woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 13:44:42 +08:00
Code Issues Projects Packages Wiki Activity Actions

🚧 Migrate the addButton logic

Browse source
This commit is contained in:
Philipp Stracker 2024-10-09 15:02:14 +02:00
parent a4b3f2a079
commit e0f0ec973b
No known key found for this signature in database
1 changed files with 25 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

62
modules/ppcp-applepay/resources/js/ApplepayButton.js
View file

@ -233,17 +233,6 @@ class ApplePayButton extends PaymentButton {
super.init(); super.init();
this.checkEligibility(); this.checkEligibility();
const button = this.addButton();
if ( ! button ) {
return;
}
button.addEventListener( 'click', ( evt ) => {
evt.preventDefault();
this.onButtonClick();
} );
} }
reinit() { reinit() {
@ -310,40 +299,39 @@ class ApplePayButton extends PaymentButton {
} }
/** /**
* Adds an Apple Pay purchase button. * Applies CSS classes and inline styling to the payment button wrapper.
*
* @return {HTMLElement|null} The newly created `<apple-pay-button>` element. Null on failure.
*/ */
addButton() { applyWrapperStyles() {
this.log( 'addButton' ); super.applyWrapperStyles();
const wrapper = this.wrapperElement; const { height } = this.style;
const style = this.buttonStyle;
const id = 'apple-' + this.wrapperId;
if ( ! wrapper ) { if ( height ) {
return null; const wrapper = this.wrapperElement;
}
const ppcpStyle = this.ppcpStyle;
wrapper.innerHTML = `<apple-pay-button id='${ id }' buttonstyle='${ style.color }' type='${ style.type }' locale='${ style.lang }' />`;
wrapper.classList.remove( 'ppcp-button-rect', 'ppcp-button-pill' );
wrapper.classList.add(
`ppcp-button-${ ppcpStyle.shape }`,
'ppcp-button-apm',
'ppcp-button-applepay'
);
if ( ppcpStyle.height ) {
wrapper.style.setProperty( wrapper.style.setProperty(
'--apple-pay-button-height', '--apple-pay-button-height',
`${ ppcpStyle.height }px` `${ height }px`
); );
wrapper.style.height = `${ ppcpStyle.height }px`;
}
return wrapper.querySelector( 'apple-pay-button' ); wrapper.style.height = `${ height }px`;
}
}
/**
* Creates the payment button and calls `this.insertButton()` to make the button visible in the
* correct wrapper.
*/
addButton() {
const { color, type, language } = this.style;
const button = document.createElement( 'apple-pay-button' );
button.id = 'apple-' + this.wrapperId;
button.setAttribute( 'buttonstyle', color );
button.setAttribute( 'type', type );
button.setAttribute( 'locale', language );
this.insertButton( button );
} }
//------------------------ //------------------------