woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

relocate dcc fields to gateway description, use \WC_Payment_Gateway_CC, reutilize theme styles for dcc fields as much as possible

Browse source
This commit is contained in:
David Remer 2020-09-14 14:17:39 +03:00
parent e4b6a412ea
commit 084eb2a908
8 changed files with 132 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

50
modules/ppcp-button/resources/css/hosted-fields.scss
View file

@ -1,50 +0,0 @@
.ppcp-card-icon {
max-width: 50px;
margin-left: 5px;
}
#ppcp-hosted-fields {
.ppcp-dcc-credit-card-wrapper {
width: 100%;
display: grid;
grid-template-columns: 55% 1fr 1fr;
grid-template-rows: 1fr 1fr auto;
grid-column-gap: 15px;
margin-bottom: 15px;
label, span {
height: 30px;
padding: 0;
margin: 0;
overflow: hidden;
position: relative;
vertical-align: bottom;
font-size: 10px;
}
label {
grid-row: 1/2;
}
span {
grid-row: 2/3;
background:white;
border: 1px #666;
padding: 5px;
}
button {
grid-row: 3/4;
grid-column: 1/4;
}
label {
line-height: 30px;
}
}
}

11
modules/ppcp-button/resources/js/modules/Helper/DccInputFactory.js Normal file
View file

@ -0,0 +1,11 @@
const dccInputFactory = (original) => {
const styles = window.getComputedStyle(original);
const newElement = document.createElement('span');
newElement.setAttribute('id', original.id);
Object.values(styles).forEach( (prop) => {
newElement.style[prop] = '' + styles[prop];
});
return newElement;
}
export default dccInputFactory;

38
modules/ppcp-button/resources/js/modules/Renderer/CreditCardRenderer.js
View file

@ -1,3 +1,5 @@
import dccInputFactory from "../Helper/DccInputFactory";
class CreditCardRenderer {
constructor(defaultConfig, errorHandler) {
@ -23,28 +25,46 @@ class CreditCardRenderer {
return;
}
const gateWayBox = document.querySelector('.payment_box.payment_method_ppcp-credit-card-gateway');
const oldDisplayStyle = gateWayBox.style.display;
gateWayBox.style.display = 'block';
document.querySelector('#ppcp-hide-dcc').parentNode.removeChild(document.querySelector('#ppcp-hide-dcc'));
const cardNumberField = document.querySelector('#ppcp-credit-card-gateway-card-number');
const cardNumber = dccInputFactory(cardNumberField);
cardNumberField.parentNode.replaceChild(cardNumber, cardNumberField);
const cardExpiryField = document.querySelector('#ppcp-credit-card-gateway-card-expiry');
const cardExpiry = dccInputFactory(cardExpiryField);
cardExpiryField.parentNode.replaceChild(cardExpiry, cardExpiryField);
const cardCodeField = document.querySelector('#ppcp-credit-card-gateway-card-cvc');
const cardCode = dccInputFactory(cardCodeField);
cardCodeField.parentNode.replaceChild(cardCode, cardCodeField);
gateWayBox.style.display = oldDisplayStyle;
const formWrapper = '.payment_box payment_method_ppcp-credit-card-gateway';
if (
this.defaultConfig.enforce_vault
&& document.querySelector(wrapper + ' .ppcp-credit-card-vault')
&& document.querySelector(formWrapper + ' .ppcp-credit-card-vault')
) {
document.querySelector(wrapper + ' .ppcp-credit-card-vault').checked = true;
document.querySelector(wrapper + ' .ppcp-credit-card-vault').setAttribute('disabled', true);
document.querySelector(formWrapper + ' .ppcp-credit-card-vault').checked = true;
document.querySelector(formWrapper + ' .ppcp-credit-card-vault').setAttribute('disabled', true);
}
paypal.HostedFields.render({
createOrder: contextConfig.createOrder,
fields: {
number: {
selector: wrapper + ' .ppcp-credit-card',
selector: '#ppcp-credit-card-gateway-card-number',
placeholder: this.defaultConfig.hosted_fields.labels.credit_card_number,
},
cvv: {
selector: wrapper + ' .ppcp-cvv',
selector: '#ppcp-credit-card-gateway-card-cvc',
placeholder: this.defaultConfig.hosted_fields.labels.cvv,
},
expirationDate: {
selector: wrapper + ' .ppcp-expiration-date',
selector: '#ppcp-credit-card-gateway-card-expiry',
placeholder: this.defaultConfig.hosted_fields.labels.mm_yyyy,
}
}
@ -79,8 +99,8 @@ class CreditCardRenderer {
hostedFields.on('inputSubmitRequest', function () {
submitEvent(null);
});
document.querySelector(wrapper).addEventListener(
'submit',
document.querySelector(wrapper + ' button').addEventListener(
'click',
submitEvent
);
});
@ -88,7 +108,7 @@ class CreditCardRenderer {
document.querySelector('#payment_method_ppcp-credit-card-gateway').addEventListener(
'click',
() => {
document.querySelector('label[for=ppcp-credit-card-ppcp-hosted-fields]').click();
document.querySelector('label[for=ppcp-credit-card-gateway-card-number]').click();
}
)
}