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

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();
}
)
}