Merge pull request #4555 from woocommerce/dev/PCP-6714-unsuccessfully-sandbox-onboarding-via-wizard-connecting-under-button-for-live-account

Unsuccessfully sandbox onboarding via wizard (6714)

Author: stracker-phil

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/ConnectionButton.js

@@ -3,7 +3,10 @@ import { useEffect, useCallback } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import classNames from 'classnames';
 import { OpenSignup } from '@ppcp-settings/Components/ReusableComponents/Icons';
-import { useHandleOnboardingButton } from '@ppcp-settings/hooks/useHandleConnections';
+import {
+	useHandleOnboardingButton,
+	setClickedEnvironment,
+} from '@ppcp-settings/hooks/useHandleConnections';
 import { OnboardingHooks } from '@ppcp-settings/data/onboarding/hooks';
 import BusyStateWrapper from '@ppcp-settings/Components/ReusableComponents/BusyStateWrapper';
 import { Notice } from '@ppcp-settings/Components/ReusableComponents/Elements';
@@ -72,6 +75,7 @@ const ConnectionButton = ( {
 	const {
 		onboardingUrl,
 		scriptLoaded,
+		isActiveEnvironment,
 		setCompleteHandler,
 		removeCompleteHandler,
 	} = useHandleOnboardingButton( isSandbox );
@@ -86,9 +90,41 @@ const ConnectionButton = ( {
 	} );
 	const environment = isSandbox ? 'sandbox' : 'production';
 
-	const handleButtonClick = useCallback( () => {
-		setConnectionButtonClicked( true );
-	}, [ setConnectionButtonClicked ] );
+	const handleButtonClick = useCallback(
+		( event ) => {
+			// Only the button matching the active environment is a real PayPal
+			// button; the other one is inert.
+			if ( ! isActiveEnvironment ) {
+				event.preventDefault();
+				return;
+			}
+
+			/**
+			 * partner.js wires the anchor to the minibrowser asynchronously and marks
+			 * it as ready by adding `data-secureWindowMsg` / `data-secureButtonMsg`.
+			 * Until then, a click would just follow the href and open the onboarding
+			 * page in a new browser tab - with no minibrowser and no
+			 * `onOnboardComplete` callback, so the connection is never saved. We
+			 * neutralize the click until the button is bound; the next click works.
+			 */
+			const anchor = event.currentTarget;
+			const isBoundToMiniBrowser =
+				!! anchor?.hasAttribute?.( 'data-securewindowmsg' ) ||
+				!! anchor?.hasAttribute?.( 'data-securebuttonmsg' );
+
+			if ( ! isBoundToMiniBrowser ) {
+				event.preventDefault();
+				return;
+			}
+
+			setConnectionButtonClicked( true );
+
+			// Record which environment the merchant clicked so the shared
+			// onOnboardComplete handler authenticates against the right account.
+			setClickedEnvironment( environment );
+		},
+		[ isActiveEnvironment, setConnectionButtonClicked, environment ]
+	);
 
 	// Reset button clicked state when onboardingUrl becomes available.
 	useEffect( () => {
@@ -100,7 +136,7 @@ const ConnectionButton = ( {
 	useEffect( () => {
 		if ( scriptLoaded && onboardingUrl ) {
 			window.PAYPAL.apps.Signup.render();
-			setCompleteHandler( environment );
+			setCompleteHandler();
 		}
 
 		return () => {
@@ -109,18 +145,17 @@ const ConnectionButton = ( {
 	}, [
 		scriptLoaded,
 		onboardingUrl,
-		environment,
 		setCompleteHandler,
 		removeCompleteHandler,
 	] );
 
 	return (
-		<BusyStateWrapper isBusy={ ! onboardingUrl }>
+		<BusyStateWrapper isBusy={ isActiveEnvironment && ! onboardingUrl }>
 			<ButtonOrPlaceholder
 				className={ buttonClassName }
 				variant={ variant }
 				showIcon={ showIcon }
-				href={ onboardingUrl }
+				href={ isActiveEnvironment ? onboardingUrl : undefined }
 				onClick={ handleButtonClick }
 			>
 				<span className="button-title">{ title }</span>

modules/ppcp-settings/resources/js/hooks/useHandleConnections.js

@@ -6,8 +6,21 @@ import { CommonHooks, OnboardingHooks } from '@ppcp-settings/data';
 import { useStoreManager } from './useStoreManager';
 import useNotices from './useNotices';
 
-const PAYPAL_PARTNER_SDK_URL =
-	'https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js';
+/**
+ * PayPal's onboarding SDK (partner.js) is environment-specific and offers no
+ * namespace support: it always uses the single `window.PAYPAL` global, derives
+ * the environment from its own script domain, and only wires up the *first*
+ * `[data-paypal-button]` element it finds. We therefore load the SDK for the
+ * active environment and make sure only that environment's button is a real
+ * `[data-paypal-button]`, so partner.js binds the correct button to the
+ * minibrowser (see `useHandleOnboardingButton`).
+ */
+const PAYPAL_PARTNER_SDK_URL = {
+	production:
+		'https://www.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js',
+	sandbox:
+		'https://www.sandbox.paypal.com/webapps/merchantboarding/js/lib/lightbox/partner.js',
+};
 
 const MESSAGES = {
 	CONNECTED: __( 'Connected to PayPal', 'woocommerce-paypal-payments' ),
@@ -31,10 +44,40 @@ const ACTIVITIES = {
 	API_VERIFY: 'auth/verify-login',
 };
 
+/**
+ * Environment ('sandbox' | 'production') of the connection button the merchant
+ * actually clicked.
+ *
+ * PayPal's partner.js exposes a single global onOnboardComplete callback, but the
+ * onboarding step mounts a live and a sandbox button at the same time. This
+ * module-level value lets the shared completion handler authenticate against the
+ * environment the merchant chose, rather than whichever button registered its
+ * handler first.
+ *
+ * @type {?string}
+ */
+let clickedEnvironment = null;
+
+export const setClickedEnvironment = ( environment ) => {
+	clickedEnvironment = environment;
+};
+
 export const useHandleOnboardingButton = ( isSandbox ) => {
 	const { onboardingUrl } = isSandbox
 		? CommonHooks.useSandbox()
 		: CommonHooks.useProduction();
+	const { isSandboxMode } = CommonHooks.useSandbox();
+
+	/**
+	 * partner.js only wires up a single button and derives its environment from
+	 * its own script domain, so the live and sandbox SDKs cannot coexist. Only
+	 * the button whose environment matches the "Enable Sandbox Mode" toggle is
+	 * the active one: it loads the matching SDK and is rendered as a real
+	 * `[data-paypal-button]`. The other button is rendered inert (no href /
+	 * data-attributes) so partner.js ignores it.
+	 */
+	const isActiveEnvironment = isSandbox === !! isSandboxMode;
+
 	const { ownBrandOnly, storeCountry } = CommonHooks.useWooSettings();
 	const { products, options } = OnboardingHooks.useDetermineProducts(
 		ownBrandOnly,
@@ -69,85 +112,92 @@ export const useHandleOnboardingButton = ( isSandbox ) => {
 
 	useEffect( () => {
 		/**
-		 * The partner.js script initializes all onboarding buttons in the onload event.
-		 * When no buttons are present, a JS error is displayed; i.e. we should load this script
+		 * The partner.js script initializes the onboarding button in its onload event.
+		 * When no button is present, a JS error is displayed; i.e. we should load this script
 		 * only when the button is ready (with a valid href and data-attributes).
+		 *
+		 * We load the SDK only for the button matching the active environment. Because
+		 * partner.js keeps its state on the single `window.PAYPAL` global (and derives
+		 * the environment from its own script domain), we reset that global and remove
+		 * the previously injected scripts before loading, so switching environments
+		 * re-initializes cleanly against the correct domain.
 		 */
-		if ( ! onboardingUrlState ) {
+		if ( ! onboardingUrlState || ! isActiveEnvironment ) {
 			return;
 		}
 
+		// partner.js injects signup-js and rampConfig-js itself; remove all three
+		// so switching between environments starts from a clean slate.
+		const removeOnboardingScripts = () => {
+			[
+				'partner-js',
+				'signup-js',
+				'rampConfig-js',
+				'zoidMiniBrowser-js',
+			].forEach( ( id ) => {
+				const el = document.querySelector( `script[id="${ id }"]` );
+
+				if ( el?.parentNode ) {
+					el.parentNode.removeChild( el );
+				}
+			} );
+		};
+
+		removeOnboardingScripts();
+		delete window.PAYPAL;
+
 		const script = document.createElement( 'script' );
 		script.id = 'partner-js';
-		script.src = PAYPAL_PARTNER_SDK_URL;
+		script.src = isSandbox
+			? PAYPAL_PARTNER_SDK_URL.sandbox
+			: PAYPAL_PARTNER_SDK_URL.production;
 		script.onload = () => {
 			setScriptLoaded( true );
 		};
 		document.body.appendChild( script );
 
 		return () => {
+			removeOnboardingScripts();
+			delete window.PAYPAL;
+			setScriptLoaded( false );
+		};
+	}, [ onboardingUrlState, isActiveEnvironment, isSandbox ] );
+
+	const setCompleteHandler = useCallback( () => {
+		const onComplete = async ( authCode, sharedId ) => {
 			/**
-			 * When the component is unmounted, remove the partner.js script, as well as the
-			 * dynamic scripts it loaded (signup-js and rampConfig-js)
+			 * Until now, the full page is blocked by PayPal's semi-transparent, black overlay.
+			 * But at this point, the overlay is removed, while we process the sharedId and
+			 * authCode via a REST call.
 			 *
-			 * This is important, as the onboarding button is only initialized during the onload
-			 * event of those scripts; i.e. we need to load the scripts again, when the button is
-			 * rendered again.
+			 * Note: The REST response is irrelevant, since PayPal will most likely refresh this
+			 * frame before the REST endpoint returns a value. Using "withActivity" is more of a
+			 * visual cue to the user that something is still processing in the background.
 			 */
-			const onboardingScripts = [
-				'partner-js',
-				'signup-js',
-				'rampConfig-js',
-			];
-
-			onboardingScripts.forEach( ( id ) => {
-				const el = document.querySelector( `script[id="${ id }"]` );
+			startActivity(
+				ACTIVITIES.OAUTH_VERIFY,
+				'Validating the connection details'
+			);
 
-				if ( el?.parentNode ) {
-					el.parentNode.removeChild( el );
-				}
-			} );
+			await authenticateWithOAuth(
+				sharedId,
+				authCode,
+				clickedEnvironment === 'sandbox'
+			);
 		};
-	}, [ onboardingUrlState ] );
-
-	const setCompleteHandler = useCallback(
-		( environment ) => {
-			const onComplete = async ( authCode, sharedId ) => {
-				/**
-				 * Until now, the full page is blocked by PayPal's semi-transparent, black overlay.
-				 * But at this point, the overlay is removed, while we process the sharedId and
-				 * authCode via a REST call.
-				 *
-				 * Note: The REST response is irrelevant, since PayPal will most likely refresh this
-				 * frame before the REST endpoint returns a value. Using "withActivity" is more of a
-				 * visual cue to the user that something is still processing in the background.
-				 */
-				startActivity(
-					ACTIVITIES.OAUTH_VERIFY,
-					'Validating the connection details'
-				);
-
-				await authenticateWithOAuth(
-					sharedId,
-					authCode,
-					environment === 'sandbox'
-				);
-			};
 
-			const addHandler = () => {
-				const MiniBrowser = window.PAYPAL?.apps?.Signup?.MiniBrowser;
-				if ( ! MiniBrowser || MiniBrowser.onOnboardComplete ) {
-					return;
-				}
+		const addHandler = () => {
+			const MiniBrowser = window.PAYPAL?.apps?.Signup?.MiniBrowser;
+			if ( ! MiniBrowser || MiniBrowser.onOnboardComplete ) {
+				return;
+			}
 
-				MiniBrowser.onOnboardComplete = onComplete;
-			};
+			MiniBrowser.onOnboardComplete = onComplete;
+		};
 
-			// Ensure the onComplete handler is not removed by a PayPal init script.
-			timerRef.current = setInterval( addHandler, 250 );
-		},
-		[ authenticateWithOAuth, startActivity ]
-	);
+		// Ensure the onComplete handler is not removed by a PayPal init script.
+		timerRef.current = setInterval( addHandler, 250 );
+	}, [ authenticateWithOAuth, startActivity ] );
 
 	const removeCompleteHandler = useCallback( () => {
 		if ( timerRef.current ) {
@@ -161,6 +211,7 @@ export const useHandleOnboardingButton = ( isSandbox ) => {
 	return {
 		onboardingUrl: onboardingUrlState,
 		scriptLoaded,
+		isActiveEnvironment,
 		setCompleteHandler,
 		removeCompleteHandler,
 	};