Merge pull request #2603 from woocommerce/PCP-3649-fastlane-backend-logic-changes

Fix Gary-flow in PCP-3380 branch (3649)

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

@@ -17,9 +17,15 @@ const useHandlePaymentSetup = (
 		}
 
 		if ( ! cardToken ) {
+			let reason = 'tokenization error';
+
+			if ( ! paymentComponent ) {
+				reason = 'initialization error';
+			}
+
 			return {
 				type: emitResponse.responseTypes.ERROR,
-				message: 'Could not process the payment (tokenization error)',
+				message: `Could not process the payment (${ reason })`,
 			};
 		}
 
@@ -32,11 +38,7 @@ const useHandlePaymentSetup = (
 				},
 			},
 		};
-	}, [
+	}, [ card, paymentComponent, tokenizedCustomerData ] );
-		card,
-		paymentComponent,
-		tokenizedCustomerData,
-	] );
 };
 
 export default useHandlePaymentSetup;

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

@@ -1,27 +0,0 @@
-import { useEffect } from '@wordpress/element';
-
-const usePaymentSetup = ( onPaymentSetup, emitResponse, card ) => {
-	useEffect( () => {
-		const unsubscribe = onPaymentSetup( async () => {
-			return {
-				type: emitResponse.responseTypes.SUCCESS,
-				meta: {
-					paymentMethodData: {
-						axo_nonce: card?.id,
-					},
-				},
-			};
-		} );
-
-		return () => {
-			unsubscribe();
-		};
-	}, [
-		emitResponse.responseTypes.ERROR,
-		emitResponse.responseTypes.SUCCESS,
-		onPaymentSetup,
-		card,
-	] );
-};
-
-export default usePaymentSetup;

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

@@ -1,6 +1,10 @@
 import { useEffect, useCallback } from '@wordpress/element';
 
-const usePaymentSetupEffect = ( onPaymentSetup, handlePaymentSetup ) => {
+const usePaymentSetupEffect = (
+	onPaymentSetup,
+	handlePaymentSetup,
+	setPaymentComponent
+) => {
 	/**
 	 * `onPaymentSetup()` fires when we enter the "PROCESSING" state in the checkout flow.
 	 * It pre-processes the payment details and returns data for server-side processing.
@@ -13,10 +17,12 @@ const usePaymentSetupEffect = ( onPaymentSetup, handlePaymentSetup ) => {
 		};
 	}, [ onPaymentSetup, handlePaymentSetup ] );
 
-	const handlePaymentLoad = useCallback( ( component ) => {
+	const handlePaymentLoad = useCallback(
-		// We'll return this function instead of calling setPaymentComponent directly
+		( component ) => {
-		return component;
+			setPaymentComponent( component );
-	}, [] );
+		},
+		[ setPaymentComponent ]
+	);
 
 	return { handlePaymentLoad };
 };

modules/ppcp-axo-block/resources/js/index.js

@@ -6,7 +6,6 @@ import useFastlaneSdk from './hooks/useFastlaneSdk';
 import useTokenizeCustomerData from './hooks/useTokenizeCustomerData';
 import useCardChange from './hooks/useCardChange';
 import useAxoSetup from './hooks/useAxoSetup';
-import usePaymentSetup from './hooks/usePaymentSetup';
 import useAxoCleanup from './hooks/useAxoCleanup';
 import useHandlePaymentSetup from './hooks/useHandlePaymentSetup';
 
@@ -47,11 +46,11 @@ const Axo = ( props ) => {
 		setShippingAddress,
 		setCard
 	);
-	usePaymentSetup( onPaymentSetup, emitResponse, card );
 
 	const { handlePaymentLoad } = usePaymentSetupEffect(
 		onPaymentSetup,
-		handlePaymentSetup
+		handlePaymentSetup,
+		setPaymentComponent
 	);
 
 	useAxoCleanup();