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

🐛 Remove the empty Google Pay wrapper

Browse source 
When using Google Pay in a separate payment gateway, there was a left-over div-tag with a fixed height beneath the PayPal payment button. This empty div was the initial wrapper for the payment button in the smart-button block, and is removed from DOM when a separate gateway is used.
This commit is contained in:
Philipp Stracker 2024-08-28 13:21:02 +02:00
parent b7d18f105e
commit f5d4faba79
No known key found for this signature in database
1 changed files with 23 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

31
modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js
View file

@ -113,6 +113,13 @@ export default class PaymentButton {
*/ */
#isInitialized = false; #isInitialized = false;
/**
* Whether the one-time initialization of the payment gateway is complete.
*
* @type {boolean}
*/
#gatewayInitialized = false;
/** /**
* The button's context. * The button's context.
* *
@ -715,26 +722,34 @@ export default class PaymentButton {
} }
/** /**
* Makes the custom payment gateway visible by removing initial inline styles from the DOM. * Makes the payment gateway visible by removing initial inline styles from the DOM.
* Also, removes the button-placeholder container from the smart button block.
* *
* Only relevant on the checkout page, i.e., when `this.isSeparateGateway` is `true` * Only relevant on the checkout page, i.e., when `this.isSeparateGateway` is `true`
*/ */
showPaymentGateway() { showPaymentGateway() {
if ( this.#gatewayInitialized ) {
return;
}
this.#gatewayInitialized = true;
if ( ! this.isSeparateGateway || ! this.isEligible ) { if ( ! this.isSeparateGateway || ! this.isEligible ) {
return; return;
} }
const styleSelectors = `style[data-hide-gateway="${ this.methodId }"]`; const styleSelector = `style[data-hide-gateway="${ this.methodId }"]`;
const wrapperSelector = `#${ this.wrappers.Default }`;
const styles = document.querySelectorAll( styleSelectors ); document
.querySelectorAll( styleSelector )
.forEach( ( el ) => el.remove() );
document
.querySelectorAll( wrapperSelector )
.forEach( ( el ) => el.remove() );
if ( ! styles.length ) {
return;
}
this.log( 'Show gateway' ); this.log( 'Show gateway' );
styles.forEach( ( el ) => el.remove() );
// This code runs only once, during button initialization, and fixes the initial visibility. // This code runs only once, during button initialization, and fixes the initial visibility.
this.isVisible = this.isCurrentGateway; this.isVisible = this.isCurrentGateway;
} }