From 78e0da27a1b9c4928848e26de40e94b4fef01ef3 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 16 Sep 2024 15:12:56 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=94=8A=20More=20descriptive=20error?= =?UTF-8?q?=20message?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New error reason when tokenization fails due to missing paymentComponent --- .../resources/js/hooks/useHandlePaymentSetup.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) 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; From 243630ea5d22fb0f24024f0e22a3c8f8c5838cdc Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 16 Sep 2024 15:45:41 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=90=9B=20Revert=20logic=20to=20call?= =?UTF-8?q?=20setPaymentComponent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Before the change, the paymentComponent always was null, as it was not set anywhere. --- .../resources/js/hooks/usePaymentSetupEffect.js | 16 +++++++++++----- modules/ppcp-axo-block/resources/js/index.js | 5 ++--- 2 files changed, 13 insertions(+), 8 deletions(-) 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(); From e2cb4545569b3771c19f6dd3ad036e94fd80a5f2 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 16 Sep 2024 15:47:10 +0200 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=94=A5=20Remove=20unused=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/js/hooks/usePaymentSetup.js | 27 ------------------- 1 file changed, 27 deletions(-) delete mode 100644 modules/ppcp-axo-block/resources/js/hooks/usePaymentSetup.js 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;