From 8bd78e8e631e0389997f66a3d57faf8f5dec6bbf Mon Sep 17 00:00:00 2001
From: Daniel Dudzic <d.dudzic@syde.com>
Date: Thu, 19 Sep 2024 14:26:49 +0200
Subject: [PATCH] Check whether the Card Element container exists before trying
 to render it

---
 .../js/components/Payment/Payment.js          | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js b/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js
index b5a29cb44..1fb04856f 100644
--- a/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js
+++ b/modules/ppcp-axo-block/resources/js/components/Payment/Payment.js
@@ -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();