From 6aad61f610369f207f45dc3571b6de6a7fe43818 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 9 Aug 2024 16:20:29 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fetch=20transaction=20details=20?=
 =?UTF-8?q?on=20button=20click?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes an issue with multiple payment buttons on one page, like Mini-Cart and Single Product
---
 .../resources/js/GooglepayButton.js           | 52 +++++++++++--------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
index 9061a917d..20d7cc739 100644
--- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js
+++ b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
@@ -277,15 +277,7 @@ class GooglepayButton extends PaymentButton {
 	reinit() {
 		super.reinit();
 
-		if ( this.contextHandler?.transactionInfo ) {
-			// If possible, fetch the current transaction details from the checkout form.
-			this.contextHandler.transactionInfo().then( ( transactionInfo ) => {
-				this.transactionInfo = transactionInfo;
-				this.init();
-			} );
-		} else {
-			this.init();
-		}
+		this.init();
 	}
 
 	/**
@@ -375,29 +367,45 @@ class GooglepayButton extends PaymentButton {
 
 		const initiatePaymentRequest = () => {
 			window.ppcpFundingSource = 'googlepay';
-
 			const paymentDataRequest = this.paymentDataRequest();
-
 			this.log(
 				'onButtonClick: paymentDataRequest',
 				paymentDataRequest,
 				this.context
 			);
-
 			this.paymentsClient.loadPaymentData( paymentDataRequest );
 		};
 
-		if ( 'function' === typeof this.contextHandler.validateForm ) {
-			// During regular checkout, validate the checkout form before initiating the payment.
-			this.contextHandler
-				.validateForm()
-				.then( initiatePaymentRequest, ( reason ) => {
-					this.error( 'Form validation failed.', reason );
+		const validateForm = () => {
+			if ( 'function' !== typeof this.contextHandler.validateForm ) {
+				return Promise.resolve();
+			}
+
+			return this.contextHandler.validateForm().catch( ( error ) => {
+				this.error( 'Form validation failed:', error );
+				throw error;
+			} );
+		};
+
+		const getTransactionInfo = () => {
+			if ( 'function' !== typeof this.contextHandler.transactionInfo ) {
+				return Promise.resolve();
+			}
+
+			return this.contextHandler
+				.transactionInfo()
+				.then( ( transactionInfo ) => {
+					this.transactionInfo = transactionInfo;
+				} )
+				.catch( ( error ) => {
+					this.error( 'Failed to get transaction info:', error );
+					throw error;
 				} );
-		} else {
-			// This is the flow on product page, cart, and other non-checkout pages.
-			initiatePaymentRequest();
-		}
+		};
+
+		validateForm()
+			.then( getTransactionInfo )
+			.then( initiatePaymentRequest );
 	}
 
 	paymentDataRequest() {