woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Merge pull request #2623 from woocommerce/fix-cannot-find-FastlaneCardComponent-container-error

Browse source 
Axo Blocks: Check whether the Card Element container exists before trying to render it
This commit is contained in:
Danny Dudzic 2024-09-25 15:40:11 +02:00 • committed by GitHub
commit 3d51663ab9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 17 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

20
modules/ppcp-axo-block/resources/js/components/Payment/Payment.js
View file

@ -1,10 +1,12 @@
import { useEffect, useCallback } from '@wordpress/element';
import { useEffect, useCallback, useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { Card } from '../Card';
import { STORE_NAME } from '../../stores/axoStore';
export const Payment = ( { fastlaneSdk, card, onPaymentLoad } ) => {
const [ isCardElementReady, setIsCardElementReady ] = useState( false );
const isGuest = useSelect( ( select ) =>
select( STORE_NAME ).getIsGuest()
);
@ -14,14 +16,26 @@ export const Payment = ( { fastlaneSdk, card, onPaymentLoad } ) => {
);
const loadPaymentComponent = useCallback( async () => {
if ( isGuest && isEmailLookupCompleted ) {
if ( isGuest && isEmailLookupCompleted && isCardElementReady ) {
const paymentComponent = await fastlaneSdk.FastlaneCardComponent(
{}
);
paymentComponent.render( `#fastlane-card` );
onPaymentLoad( paymentComponent );
}
}, [ isGuest, isEmailLookupCompleted, fastlaneSdk, onPaymentLoad ] );
}, [
isGuest,
isEmailLookupCompleted,
isCardElementReady,
fastlaneSdk,
onPaymentLoad,
] );
useEffect( () => {
if ( isGuest && isEmailLookupCompleted ) {
setIsCardElementReady( true );
}
}, [ isGuest, isEmailLookupCompleted ] );
useEffect( () => {
loadPaymentComponent();