From 1e5b6d5a210252b6f0f49d4d7c52e6ba0ff29337 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Mon, 29 Jul 2024 18:05:08 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Improve=20debug-logging=20for=20Goo?=
 =?UTF-8?q?glePayButton=20events?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement same logic as we use for the ApplePayButton
---
 .../resources/js/GooglepayButton.js           | 33 ++++++++++++++++---
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
index 723f9dd8c..aa2c27921 100644
--- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js
+++ b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
@@ -25,6 +25,8 @@ class GooglepayButton {
 		ppcpConfig,
 		contextHandler
 	) {
+		this._initDebug( !! buttonConfig?.is_debug, context );
+
 		apmButtonsInit( ppcpConfig );
 
 		this.isInitialized = false;
@@ -34,12 +36,35 @@ class GooglepayButton {
 		this.buttonConfig = buttonConfig;
 		this.ppcpConfig = ppcpConfig;
 		this.contextHandler = contextHandler;
+	}
 
-		this.log = function () {
-			if ( this.buttonConfig.is_debug ) {
-				//console.log('[GooglePayButton]', ...arguments);
-			}
+	/**
+	 * NOOP log function to avoid errors when debugging is disabled.
+	 */
+	log() {}
+
+	/**
+	 * Enables debugging tools, when the button's is_debug flag is set.
+	 *
+	 * @param {boolean} enableDebugging If debugging features should be enabled for this instance.
+	 * @param {string}  context         Used to make the instance accessible via the global debug object.
+	 * @private
+	 */
+	_initDebug( enableDebugging, context ) {
+		if ( ! enableDebugging ) {
+			return;
+		}
+
+		document.ppcpGooglepayButtons = document.ppcpGooglepayButtons || {};
+		document.ppcpGooglepayButtons[ context ] = this;
+
+		this.log = ( ...args ) => {
+			console.log( `[GooglePayButton | ${ context }]`, ...args );
 		};
+
+		document.addEventListener( 'ppcp-googlepay-debug', () => {
+			this.log( this );
+		} );
 	}
 
 	init( config, transactionInfo ) {