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

🐛 Prevent duplicate payment button instances

Browse source
This commit is contained in:
Philipp Stracker 2024-07-29 16:20:47 +02:00
parent f52b01b275
commit 8afa7e34dc
No known key found for this signature in database
1 changed files with 33 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

37
modules/ppcp-googlepay/resources/js/GooglepayButton.js
View file

@ -5,6 +5,19 @@ import UpdatePaymentData from './Helper/UpdatePaymentData';
import { apmButtonsInit } from '../../../ppcp-button/resources/js/modules/Helper/ApmButtons'; import { apmButtonsInit } from '../../../ppcp-button/resources/js/modules/Helper/ApmButtons';
class GooglepayButton { class GooglepayButton {
/**
* Reference to the payment button created by this instance.
*
* @type {HTMLElement}
*/
#button;
/**
* Client reference, provided by the Google Pay JS SDK.
* @see https://developers.google.com/pay/api/web/reference/client
*/
paymentsClient = null;
constructor( constructor(
context, context,
externalHandler, externalHandler,
@ -22,8 +35,6 @@ class GooglepayButton {
this.ppcpConfig = ppcpConfig; this.ppcpConfig = ppcpConfig;
this.contextHandler = contextHandler; this.contextHandler = contextHandler;
this.paymentsClient = null;
this.log = function () { this.log = function () {
if ( this.buttonConfig.is_debug ) { if ( this.buttonConfig.is_debug ) {
//console.log('[GooglePayButton]', ...arguments); //console.log('[GooglePayButton]', ...arguments);
@ -235,13 +246,19 @@ class GooglepayButton {
const { wrapper, ppcpStyle, buttonStyle } = this.contextConfig(); const { wrapper, ppcpStyle, buttonStyle } = this.contextConfig();
this.waitForWrapper( wrapper, () => { this.waitForWrapper( wrapper, () => {
// Prevent duplicate payment buttons.
this.removeButton();
jQuery( wrapper ).addClass( 'ppcp-button-' + ppcpStyle.shape ); jQuery( wrapper ).addClass( 'ppcp-button-' + ppcpStyle.shape );
if ( ppcpStyle.height ) { if ( ppcpStyle.height ) {
jQuery( wrapper ).css( 'height', `${ ppcpStyle.height }px` ); jQuery( wrapper ).css( 'height', `${ ppcpStyle.height }px` );
} }
const button = this.paymentsClient.createButton( { /**
* @see https://developers.google.com/pay/api/web/reference/client#createButton
*/
this.#button = this.paymentsClient.createButton( {
onClick: this.onButtonClick.bind( this ), onClick: this.onButtonClick.bind( this ),
allowedPaymentMethods: [ baseCardPaymentMethod ], allowedPaymentMethods: [ baseCardPaymentMethod ],
buttonColor: buttonStyle.color || 'black', buttonColor: buttonStyle.color || 'black',
@ -250,10 +267,22 @@ class GooglepayButton {
buttonSizeMode: 'fill', buttonSizeMode: 'fill',
} ); } );
jQuery( wrapper ).append( button ); jQuery( wrapper ).append( this.#button );
} ); } );
} }
/**
* Removes the payment button that was injected via addButton()
*/
removeButton() {
if ( ! this.#button ) {
return;
}
this.#button.remove();
this.#button = null;
}
addButtonCheckout( baseCardPaymentMethod, wrapper, buttonStyle ) { addButtonCheckout( baseCardPaymentMethod, wrapper, buttonStyle ) {
const button = this.paymentsClient.createButton( { const button = this.paymentsClient.createButton( {
onClick: this.onButtonClick.bind( this ), onClick: this.onButtonClick.bind( this ),