Migrate Google Pay to the new script loader

composer.lock

@@ -5554,5 +5554,5 @@
     "platform-overrides": {
         "php": "7.4"
     },
-    "plugin-api-version": "2.6.0"
+    "plugin-api-version": "2.3.0"
 }

modules/ppcp-googlepay/resources/js/GooglepayManager.js

@@ -3,7 +3,8 @@ import GooglepayButton from './GooglepayButton';
 import ContextHandlerFactory from './Context/ContextHandlerFactory';
 
 class GooglepayManager {
-	constructor( buttonConfig, ppcpConfig ) {
+	constructor( namespace, buttonConfig, ppcpConfig ) {
+		this.namespace = namespace;
 		this.buttonConfig = buttonConfig;
 		this.ppcpConfig = ppcpConfig;
 		this.googlePayConfig = null;
@@ -52,7 +53,9 @@ class GooglepayManager {
 		try {
 			if ( ! this.googlePayConfig ) {
 				// Gets GooglePay configuration of the PayPal merchant.
-				this.googlePayConfig = await paypal.Googlepay().config();
+				this.googlePayConfig = await window[ this.namespace ]
+					.Googlepay()
+					.config();
 			}
 
 			if ( ! this.transactionInfo ) {

modules/ppcp-googlepay/resources/js/GooglepayManagerBlockEditor.js

@@ -2,7 +2,8 @@ import GooglepayButton from './GooglepayButton';
 import ContextHandlerFactory from './Context/ContextHandlerFactory';
 
 class GooglepayManagerBlockEditor {
-	constructor( buttonConfig, ppcpConfig ) {
+	constructor( namespace, buttonConfig, ppcpConfig ) {
+		this.namespace = namespace;
 		this.buttonConfig = buttonConfig;
 		this.ppcpConfig = ppcpConfig;
 		this.googlePayConfig = null;
@@ -19,7 +20,9 @@ class GooglepayManagerBlockEditor {
 	async config() {
 		try {
 			// Gets GooglePay configuration of the PayPal merchant.
-			this.googlePayConfig = await ppcpBlocksEditorPaypalGooglepay.Googlepay().config();
+			this.googlePayConfig = await window[ this.namespace ]
+				.Googlepay()
+				.config();
 
 			// Fetch transaction information.
 			this.transactionInfo = await this.fetchTransactionInfo();

modules/ppcp-googlepay/resources/js/boot-block.js

@@ -4,7 +4,7 @@ import {
 	registerPaymentMethod,
 } from '@woocommerce/blocks-registry';
 import { __ } from '@wordpress/i18n';
-import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading';
+import UnifiedScriptLoader from '../../../ppcp-button/resources/js/modules/Helper/UnifiedScriptLoader';
 import GooglepayManager from './GooglepayManager';
 import { loadCustomScript } from '@paypal/paypal-js';
 import GooglepayManagerBlockEditor from './GooglepayManagerBlockEditor';
@@ -14,7 +14,7 @@ const ppcpConfig = ppcpData.scriptData;
 
 const buttonData = wc.wcSettings.getSetting( 'ppcp-googlepay_data' );
 const buttonConfig = buttonData.scriptData;
-const dataNamespace = 'ppcpBlocksEditorPaypalGooglepay';
+const namespace = 'ppcpBlocksPaypalGooglepay';
 
 if ( typeof window.PayPalCommerceGateway === 'undefined' ) {
 	window.PayPalCommerceGateway = ppcpConfig;
@@ -24,14 +24,7 @@ const GooglePayComponent = ( props ) => {
 	const [ bootstrapped, setBootstrapped ] = useState( false );
 	const [ paypalLoaded, setPaypalLoaded ] = useState( false );
 	const [ googlePayLoaded, setGooglePayLoaded ] = useState( false );
-
-	const bootstrap = function () {
-		const ManagerClass = props.isEditing
-			? GooglepayManagerBlockEditor
-			: GooglepayManager;
-		const manager = new ManagerClass( buttonConfig, ppcpConfig );
-		manager.init();
-	};
+	const [ manager, setManager ] = useState( null );
 
 	useEffect( () => {
 		// Load GooglePay SDK
@@ -41,22 +34,36 @@ const GooglePayComponent = ( props ) => {
 
 		ppcpConfig.url_params.components += ',googlepay';
 
-		if ( props.isEditing ) {
-			ppcpConfig.data_namespace = dataNamespace;
-		}
-
 		// Load PayPal
-		loadPaypalScript( ppcpConfig, () => {
-			setPaypalLoaded( true );
-		} );
+		UnifiedScriptLoader.loadPayPalScript( namespace, ppcpConfig )
+			.then( () => {
+				setPaypalLoaded( true );
+			} )
+			.catch( ( error ) => {
+				console.error( 'Failed to load PayPal script: ', error );
+			} );
 	}, [] );
 
 	useEffect( () => {
-		if ( ! bootstrapped && paypalLoaded && googlePayLoaded ) {
-			setBootstrapped( true );
-			bootstrap();
+		if ( paypalLoaded && googlePayLoaded && ! manager ) {
+			const ManagerClass = props.isEditing
+				? GooglepayManagerBlockEditor
+				: GooglepayManager;
+			const newManager = new ManagerClass(
+				namespace,
+				buttonConfig,
+				ppcpConfig
+			);
+			setManager( newManager );
 		}
-	}, [ paypalLoaded, googlePayLoaded ] );
+	}, [ paypalLoaded, googlePayLoaded, props.isEditing ] );
+
+	useEffect( () => {
+		if ( manager && ! bootstrapped ) {
+			setBootstrapped( true );
+			manager.init();
+		}
+	}, [ manager, bootstrapped ] );
 
 	return (
 		<div

modules/ppcp-googlepay/resources/js/boot.js

@@ -8,7 +8,7 @@
  */
 
 import { loadCustomScript } from '@paypal/paypal-js';
-import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading';
+import UnifiedScriptLoader from '../../../ppcp-button/resources/js/modules/Helper/UnifiedScriptLoader';
 import GooglepayManager from './GooglepayManager';
 import { setupButtonEvents } from '../../../ppcp-button/resources/js/modules/Helper/ButtonRefreshHelper';
 import { CheckoutBootstrap } from './ContextBootstrap/CheckoutBootstrap';
@@ -16,14 +16,18 @@ import moduleStorage from './Helper/GooglePayStorage';
 
 ( function ( { buttonConfig, ppcpConfig = {} } ) {
 	const context = ppcpConfig.context;
+	const namespace = 'ppcpPaypalGooglepay';
 
 	function bootstrapPayButton() {
 		if ( ! buttonConfig || ! ppcpConfig ) {
 			return;
 		}
 
-		const manager = new GooglepayManager( buttonConfig, ppcpConfig );
-		manager.init();
+		const manager = new GooglepayManager(
+			namespace,
+			buttonConfig,
+			ppcpConfig
+		);
 
 		setupButtonEvents( function () {
 			manager.reinit();
@@ -31,9 +35,11 @@ import moduleStorage from './Helper/GooglePayStorage';
 	}
 
 	function bootstrapCheckout() {
-		if ( context
-            && ! [ 'checkout' ].includes( context )
-            && ! (context === 'mini-cart' && ppcpConfig.continuation) ) {
+		if (
+			context &&
+			! [ 'checkout' ].includes( context ) &&
+			! ( context === 'mini-cart' && ppcpConfig.continuation )
+		) {
 			// Context must be missing/empty, or "checkout"/checkout continuation to proceed.
 			return;
 		}
@@ -80,10 +86,14 @@ import moduleStorage from './Helper/GooglePayStorage';
 		} );
 
 		// Load PayPal
-		loadPaypalScript( ppcpConfig, () => {
-			paypalLoaded = true;
-			tryToBoot();
-		} );
+		UnifiedScriptLoader.loadPayPalScript( namespace, ppcpConfig )
+			.then( () => {
+				paypalLoaded = true;
+				tryToBoot();
+			} )
+			.catch( ( error ) => {
+				console.error( 'Failed to load PayPal script: ', error );
+			} );
 	} );
 } )( {
 	buttonConfig: window.wc_ppcp_googlepay,