diff --git a/modules/ppcp-axo-block/resources/js/index.js b/modules/ppcp-axo-block/resources/js/index.js index b94d74763..8be804734 100644 --- a/modules/ppcp-axo-block/resources/js/index.js +++ b/modules/ppcp-axo-block/resources/js/index.js @@ -42,12 +42,40 @@ if ( typeof window.PayPalCommerceGateway === 'undefined' ) { const axoConfig = window.wc_ppcp_axo; -const Axo = () => { +const Axo = ( props ) => { + const { eventRegistration, emitResponse } = props; + const { onPaymentSetup } = eventRegistration; const [ paypalLoaded, setPaypalLoaded ] = useState( false ); const [ shippingAddress, setShippingAddress ] = useState( null ); const [ card, setCard ] = useState( null ); const fastlaneSdk = useAxoBlockManager( axoConfig, ppcpConfig ); + useEffect( () => { + const unsubscribe = onPaymentSetup( async () => { + // Validate payment options and emit response. + + // Note: This response supports the Ryan flow (payment via saved card-token) + return { + type: emitResponse.responseTypes.SUCCESS, + meta: { + paymentMethodData: { + axo_nonce: card?.id, + }, + }, + }; + } ); + + // Unsubscribes when this component is unmounted. + return () => { + unsubscribe(); + }; + }, [ + emitResponse.responseTypes.ERROR, + emitResponse.responseTypes.SUCCESS, + onPaymentSetup, + card, + ] ); + const { setIsAxoActive, setIsGuest, setIsAxoScriptLoaded } = useDispatch( STORE_NAME );