✨ Apply new namespaced script loading

modules/ppcp-applepay/resources/js/ApplepayManager.js

@@ -1,11 +1,10 @@
-/* global paypal */
-
 import buttonModuleWatcher from '../../../ppcp-button/resources/js/modules/ButtonModuleWatcher';
 import ApplePayButton from './ApplepayButton';
 import ContextHandlerFactory from './Context/ContextHandlerFactory';
 
 class ApplePayManager {
-	constructor( buttonConfig, ppcpConfig ) {
+	constructor( namespace, buttonConfig, ppcpConfig ) {
+		this.namespace = namespace;
 		this.buttonConfig = buttonConfig;
 		this.ppcpConfig = ppcpConfig;
 		this.ApplePayConfig = null;
@@ -36,16 +35,18 @@ class ApplePayManager {
 		// Ensure ApplePayConfig is loaded before proceeding.
 		await this.init();
 
-		button.configure( this.ApplePayConfig );
+		button.configure( this.applePayConfig );
 		button.init();
 	}
 
 	async init() {
 		try {
-			if ( ! this.ApplePayConfig ) {
-				this.ApplePayConfig = await paypal.Applepay().config();
+			if ( ! this.applePayConfig ) {
+				this.applePayConfig = await window[ this.namespace ]
+					.Applepay()
+					.config();
 
-				if ( ! this.ApplePayConfig ) {
+				if ( ! this.applePayConfig ) {
 					console.error( 'No ApplePayConfig received during init' );
 				}
 			}

modules/ppcp-applepay/resources/js/ApplepayManagerBlockEditor.js

@@ -1,32 +1,43 @@
-/* global paypal */
-
 import ApplePayButton from './ApplepayButton';
+import ContextHandlerFactory from './Context/ContextHandlerFactory';
 
 class ApplePayManagerBlockEditor {
-	constructor( buttonConfig, ppcpConfig ) {
+	constructor( namespace, buttonConfig, ppcpConfig ) {
+		this.namespace = namespace;
 		this.buttonConfig = buttonConfig;
 		this.ppcpConfig = ppcpConfig;
-		this.applePayConfig = null;
+
+		/*
+		 * On the front-end, the init method is called when a new button context was detected
+		 * via `buttonModuleWatcher`. In the block editor, we do not need to wait for the
+		 * context, but can initialize the button in the next event loop.
+		 */
+		setTimeout( () => this.init() );
 	}
 
-	init() {
-		( async () => {
-			await this.config();
-		} )();
-	}
-
-	async config() {
+	async init() {
 		try {
-			this.applePayConfig = await ppcpBlocksEditorPaypalApplepay.Applepay().config();
+			this.applePayConfig = await window[ this.namespace ]
+				.Applepay()
+				.config();
 
-			const button = new ApplePayButton(
+			this.contextHandler = ContextHandlerFactory.create(
+				this.ppcpConfig.context,
+				this.buttonConfig,
+				this.ppcpConfig,
+				null
+			);
+
+			const button = ApplePayButton.createButton(
 				this.ppcpConfig.context,
 				null,
 				this.buttonConfig,
-				this.ppcpConfig
+				this.ppcpConfig,
+				this.contextHandler
 			);
 
-			button.init( this.applePayConfig );
+			button.configure( this.applePayConfig );
+			button.init();
 		} catch ( error ) {
 			console.error( 'Failed to initialize Apple Pay:', error );
 		}

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

@@ -1,6 +1,7 @@
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useRef, useState } from '@wordpress/element';
 import { registerExpressPaymentMethod } from '@woocommerce/blocks-registry';
-import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading';
+import { __ } from '@wordpress/i18n';
+import { loadPayPalScript } from '../../../ppcp-button/resources/js/modules/Helper/PayPalScriptLoading';
 import { cartHasSubscriptionProducts } from '../../../ppcp-blocks/resources/js/Helper/Subscription';
 import { loadCustomScript } from '@paypal/paypal-js';
 import CheckoutHandler from './Context/CheckoutHandler';
@@ -12,24 +13,16 @@ const ppcpConfig = ppcpData.scriptData;
 
 const buttonData = wc.wcSettings.getSetting( 'ppcp-applepay_data' );
 const buttonConfig = buttonData.scriptData;
-const dataNamespace = 'ppcpBlocksEditorPaypalApplepay';
+const namespace = 'ppcpBlocksPaypalAppglepay';
 
 if ( typeof window.PayPalCommerceGateway === 'undefined' ) {
 	window.PayPalCommerceGateway = ppcpConfig;
 }
 
 const ApplePayComponent = ( props ) => {
-	const [ bootstrapped, setBootstrapped ] = useState( false );
 	const [ paypalLoaded, setPaypalLoaded ] = useState( false );
 	const [ applePayLoaded, setApplePayLoaded ] = useState( false );
-
-	const bootstrap = function () {
-		const ManagerClass = props.isEditing
-			? ApplePayManagerBlockEditor
-			: ApplePayManager;
-		const manager = new ManagerClass( buttonConfig, ppcpConfig );
-		manager.init();
-	};
+	const wrapperRef = useRef( null );
 
 	useEffect( () => {
 		// Load ApplePay SDK
@@ -39,25 +32,33 @@ const ApplePayComponent = ( props ) => {
 
 		ppcpConfig.url_params.components += ',applepay';
 
-		if ( props.isEditing ) {
-			ppcpConfig.data_namespace = dataNamespace;
-		}
-
 		// Load PayPal
-		loadPaypalScript( ppcpConfig, () => {
-			setPaypalLoaded( true );
-		} );
+		loadPayPalScript( namespace, ppcpConfig )
+			.then( () => {
+				setPaypalLoaded( true );
+			} )
+			.catch( ( error ) => {
+				console.error( 'Failed to load PayPal script: ', error );
+			} );
 	}, [] );
 
 	useEffect( () => {
-		if ( ! bootstrapped && paypalLoaded && applePayLoaded ) {
-			setBootstrapped( true );
-			bootstrap();
+		if ( ! paypalLoaded || ! applePayLoaded ) {
+			return;
 		}
-	}, [ paypalLoaded, applePayLoaded ] );
+
+		const ManagerClass = props.isEditing
+			? ApplePayManagerBlockEditor
+			: ApplePayManager;
+
+		buttonConfig.reactWrapper = wrapperRef.current;
+
+		new ManagerClass( namespace, buttonConfig, ppcpConfig );
+	}, [ paypalLoaded, applePayLoaded, props.isEditing ] );
 
 	return (
 		<div
+			ref={ wrapperRef }
 			id={ buttonConfig.button.wrapper.replace( '#', '' ) }
 			className="ppcp-button-apm ppcp-button-applepay"
 		></div>
@@ -75,6 +76,11 @@ if (
 
 registerExpressPaymentMethod( {
 	name: buttonData.id,
+	title: `PayPal - ${ buttonData.title }`,
+	description: __(
+		'Eligible users will see the PayPal button.',
+		'woocommerce-paypal-payments'
+	),
 	label: <div dangerouslySetInnerHTML={ { __html: buttonData.title } } />,
 	content: <ApplePayComponent isEditing={ false } />,
 	edit: <ApplePayComponent isEditing={ true } />,

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

@@ -1,15 +1,21 @@
 import { loadCustomScript } from '@paypal/paypal-js';
-import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Helper/ScriptLoading';
+import { loadPayPalScript } from '../../../ppcp-button/resources/js/modules/Helper/PayPalScriptLoading';
 import ApplePayManager from './ApplepayManager';
 import { setupButtonEvents } from '../../../ppcp-button/resources/js/modules/Helper/ButtonRefreshHelper';
 
 ( function ( { buttonConfig, ppcpConfig } ) {
+	const namespace = 'ppcpPaypalApplepay';
+
 	function bootstrapPayButton() {
 		if ( ! buttonConfig || ! ppcpConfig ) {
 			return;
 		}
 
-		const manager = new ApplePayManager( buttonConfig, ppcpConfig );
+		const manager = new ApplePayManager(
+			namespace,
+			buttonConfig,
+			ppcpConfig
+		);
 
 		setupButtonEvents( function () {
 			manager.reinit();
@@ -61,10 +67,14 @@ import { setupButtonEvents } from '../../../ppcp-button/resources/js/modules/Hel
 		} );
 
 		// Load PayPal
-		loadPaypalScript( ppcpConfig, () => {
-			paypalLoaded = true;
-			tryToBoot();
-		} );
+		loadPayPalScript( namespace, ppcpConfig )
+			.then( () => {
+				paypalLoaded = true;
+				tryToBoot();
+			} )
+			.catch( ( error ) => {
+				console.error( 'Failed to load PayPal script: ', error );
+			} );
 	} );
 } )( {
 	buttonConfig: window.wc_ppcp_applepay,