Add the UnifiedScriptLoader and usePayPalCommerceGateway hook

modules/ppcp-axo-block/resources/js/hooks/usePayPalCommerceGateway.js

@@ -0,0 +1,32 @@
+import { useState, useEffect } from '@wordpress/element';
+import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug';
+
+const usePayPalCommerceGateway = ( initialConfig ) => {
+	const [ isConfigLoaded, setIsConfigLoaded ] = useState( false );
+	const [ ppcpConfig, setPpcpConfig ] = useState( initialConfig );
+
+	useEffect( () => {
+		const loadConfig = () => {
+			if ( typeof window.PayPalCommerceGateway !== 'undefined' ) {
+				setPpcpConfig( window.PayPalCommerceGateway );
+				setIsConfigLoaded( true );
+			} else {
+				log( 'PayPal Commerce Gateway config not loaded.', 'error' );
+			}
+		};
+
+		if ( document.readyState === 'loading' ) {
+			document.addEventListener( 'DOMContentLoaded', loadConfig );
+		} else {
+			loadConfig();
+		}
+
+		return () => {
+			document.removeEventListener( 'DOMContentLoaded', loadConfig );
+		};
+	}, [] );
+
+	return { isConfigLoaded, ppcpConfig };
+};
+
+export default usePayPalCommerceGateway;

modules/ppcp-axo-block/resources/js/hooks/usePayPalScript.js

@@ -27,7 +27,6 @@ const usePayPalScript = ( namespace, ppcpConfig, isConfigLoaded ) => {
 	useEffect( () => {
 		const loadScript = async () => {
 			if ( ! isPayPalLoaded && isConfigLoaded ) {
-				log( `Loading PayPal script for namespace: ${ namespace }` );
 				try {
 					await UnifiedScriptLoader.loadPayPalScript(
 						namespace,
@@ -37,8 +36,8 @@ const usePayPalScript = ( namespace, ppcpConfig, isConfigLoaded ) => {
 					setIsPayPalLoaded( true );
 				} catch ( error ) {
 					log(
-						`Error loading PayPal script for namespace: ${ namespace }`,
-						error
+						`Error loading PayPal script for namespace: ${ namespace }. Error: ${ error }`,
+						'error'
 					);
 				}
 			}

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

@@ -1,5 +1,6 @@
 import AxoManager from './AxoManager';
 import UnifiedScriptLoader from '../../../ppcp-button/resources/js/modules/Helper/UnifiedScriptLoader';
+import { log } from './Helper/Debug';
 
 ( function ( { axoConfig, ppcpConfig, jQuery } ) {
 	const namespace = 'ppcpPaypalClassicAxo';
@@ -16,11 +17,10 @@ import UnifiedScriptLoader from '../../../ppcp-button/resources/js/modules/Helpe
 		// Load PayPal
 		UnifiedScriptLoader.loadPayPalScript( namespace, ppcpConfig )
 			.then( () => {
-				console.log( 'PayPal script loaded successfully' );
 				bootstrap();
 			} )
 			.catch( ( error ) => {
-				console.error( 'Failed to load PayPal script:', error );
+				log( `Failed to load PayPal script: ${ error }`, 'error' );
 			} );
 	} );
 } )( {

modules/ppcp-button/resources/js/modules/Helper/UnifiedScriptLoader.js

@@ -0,0 +1,75 @@
+import { loadScript } from '@paypal/paypal-js';
+
+class UnifiedScriptLoader {
+	constructor() {
+		this.loadedScripts = new Map();
+		this.scriptPromises = new Map();
+	}
+
+	async loadPayPalScript( namespace, config ) {
+		if ( ! namespace ) {
+			throw new Error( 'Namespace is required' );
+		}
+
+		if ( this.loadedScripts.has( namespace ) ) {
+			console.log(
+				`PayPal script already loaded for namespace: ${ namespace }`
+			);
+			return this.loadedScripts.get( namespace );
+		}
+
+		if ( this.scriptPromises.has( namespace ) ) {
+			console.log(
+				`PayPal script loading in progress for namespace: ${ namespace }`
+			);
+			return this.scriptPromises.get( namespace );
+		}
+
+		const scriptPromise = new Promise( ( resolve, reject ) => {
+			const scriptOptions = {
+				...config.url_params,
+				...config.script_attributes,
+				'data-namespace': namespace,
+			};
+
+			if ( config.axo?.sdk_client_token ) {
+				scriptOptions[ 'data-sdk-client-token' ] =
+					config.axo.sdk_client_token;
+				scriptOptions[ 'data-client-metadata-id' ] =
+					config.axo.client_metadata_id;
+			}
+
+			if (
+				config.save_payment_methods?.id_token &&
+				! config.axo?.sdk_client_token
+			) {
+				scriptOptions[ 'data-user-id-token' ] =
+					config.save_payment_methods.id_token;
+			}
+
+			loadScript( scriptOptions )
+				.then( ( paypal ) => {
+					this.loadedScripts.set( namespace, paypal );
+					console.log(
+						`PayPal script loaded for namespace: ${ namespace }`
+					);
+					resolve( paypal );
+				} )
+				.catch( ( error ) => {
+					console.error(
+						`Failed to load PayPal script for namespace: ${ namespace }`,
+						error
+					);
+					reject( error );
+				} )
+				.finally( () => {
+					this.scriptPromises.delete( namespace );
+				} );
+		} );
+
+		this.scriptPromises.set( namespace, scriptPromise );
+		return scriptPromise;
+	}
+}
+
+export default new UnifiedScriptLoader();