From 8afa7e34dc9342c99817afa5e08fe68329053521 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Mon, 29 Jul 2024 16:20:47 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Prevent=20duplicate=20payment=20?=
 =?UTF-8?q?button=20instances?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/js/GooglepayButton.js           | 37 +++++++++++++++++--
 1 file changed, 33 insertions(+), 4 deletions(-)

diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
index 87bc642f0..723f9dd8c 100644
--- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js
+++ b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
@@ -5,6 +5,19 @@ import UpdatePaymentData from './Helper/UpdatePaymentData';
 import { apmButtonsInit } from '../../../ppcp-button/resources/js/modules/Helper/ApmButtons';
 
 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(
 		context,
 		externalHandler,
@@ -22,8 +35,6 @@ class GooglepayButton {
 		this.ppcpConfig = ppcpConfig;
 		this.contextHandler = contextHandler;
 
-		this.paymentsClient = null;
-
 		this.log = function () {
 			if ( this.buttonConfig.is_debug ) {
 				//console.log('[GooglePayButton]', ...arguments);
@@ -235,13 +246,19 @@ class GooglepayButton {
 		const { wrapper, ppcpStyle, buttonStyle } = this.contextConfig();
 
 		this.waitForWrapper( wrapper, () => {
+			// Prevent duplicate payment buttons.
+			this.removeButton();
+
 			jQuery( wrapper ).addClass( 'ppcp-button-' + ppcpStyle.shape );
 
 			if ( ppcpStyle.height ) {
 				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 ),
 				allowedPaymentMethods: [ baseCardPaymentMethod ],
 				buttonColor: buttonStyle.color || 'black',
@@ -250,10 +267,22 @@ class GooglepayButton {
 				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 ) {
 		const button = this.paymentsClient.createButton( {
 			onClick: this.onButtonClick.bind( this ),