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

Check whether the Card Element container exists before trying to render it

Browse source
This commit is contained in:
Daniel Dudzic 2024-09-19 14:26:49 +02:00
parent 39531cfb10
commit 8bd78e8e63
No known key found for this signature in database
GPG key ID: 31B40D33E3465483
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,9 +1,11 @@
import { useEffect, useCallback } from '@wordpress/element';
import { useEffect, useCallback, useState } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
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()
);
@ -13,14 +15,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();