diff --git a/modules/ppcp-axo-block/resources/js/hooks/useHandlePaymentSetup.js b/modules/ppcp-axo-block/resources/js/hooks/useHandlePaymentSetup.js index f94504d6d..bfef664bb 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useHandlePaymentSetup.js +++ b/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; diff --git a/modules/ppcp-axo-block/resources/js/hooks/usePaymentSetup.js b/modules/ppcp-axo-block/resources/js/hooks/usePaymentSetup.js deleted file mode 100644 index c55d18b94..000000000 --- a/modules/ppcp-axo-block/resources/js/hooks/usePaymentSetup.js +++ /dev/null @@ -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; diff --git a/modules/ppcp-axo-block/resources/js/hooks/usePaymentSetupEffect.js b/modules/ppcp-axo-block/resources/js/hooks/usePaymentSetupEffect.js index bc10e1533..087fc807e 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/usePaymentSetupEffect.js +++ b/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 ) => { - // We'll return this function instead of calling setPaymentComponent directly - return component; - }, [] ); + const handlePaymentLoad = useCallback( + ( component ) => { + setPaymentComponent( component ); + }, + [ setPaymentComponent ] + ); return { handlePaymentLoad }; }; diff --git a/modules/ppcp-axo-block/resources/js/index.js b/modules/ppcp-axo-block/resources/js/index.js index 26b2c188d..17321df15 100644 --- a/modules/ppcp-axo-block/resources/js/index.js +++ b/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();