From ad1e69e18b7115363f4d73dc099c5ef86df45a67 Mon Sep 17 00:00:00 2001
From: Zach Waterfield <zlwaterfield@gmail.com>
Date: Mon, 18 Nov 2024 12:43:21 -0500
Subject: [PATCH] fix: delay the payment intent auth (#26252)

---
 .../src/scenes/billing/PaymentEntryModal.tsx  | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/scenes/billing/PaymentEntryModal.tsx b/frontend/src/scenes/billing/PaymentEntryModal.tsx
index 52092c47d0e..38fc535191f 100644
--- a/frontend/src/scenes/billing/PaymentEntryModal.tsx
+++ b/frontend/src/scenes/billing/PaymentEntryModal.tsx
@@ -71,18 +71,22 @@ export const PaymentEntryModal = ({
     const [stripePromise, setStripePromise] = useState<any>(null)
 
     useEffect(() => {
-        // Load Stripe.js asynchronously
-        const loadStripeJs = async (): Promise<void> => {
-            const { loadStripe } = await stripeJs()
-            const publicKey = window.STRIPE_PUBLIC_KEY!
-            setStripePromise(await loadStripe(publicKey))
+        // Only load Stripe.js when the modal is opened
+        if (paymentEntryModalOpen && !stripePromise) {
+            const loadStripeJs = async (): Promise<void> => {
+                const { loadStripe } = await stripeJs()
+                const publicKey = window.STRIPE_PUBLIC_KEY!
+                setStripePromise(await loadStripe(publicKey))
+            }
+            void loadStripeJs()
         }
-        void loadStripeJs()
-    }, [])
+    }, [paymentEntryModalOpen, stripePromise])
 
     useEffect(() => {
-        initiateAuthorization(redirectPath)
-    }, [initiateAuthorization, redirectPath])
+        if (paymentEntryModalOpen) {
+            initiateAuthorization(redirectPath)
+        }
+    }, [paymentEntryModalOpen, initiateAuthorization, redirectPath])
 
     return (
         <LemonModal