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

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

modules/ppcp-axo-block/resources/js/components/Payment/Payment.js

@@ -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();