From c6176ed8a25c5885d53a2cbc4af4ac086cf1b537 Mon Sep 17 00:00:00 2001
From: Conner Turnbull <133619638+cturnbull-bitwarden@users.noreply.github.com>
Date: Fri, 14 Feb 2025 12:00:15 -0500
Subject: [PATCH] Added retry logic when mounting Stripe elements and extended
 timout to 50 ms (#13142)

---
 apps/web/src/app/billing/services/stripe.service.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/app/billing/services/stripe.service.ts b/apps/web/src/app/billing/services/stripe.service.ts
index caf43334795..aac86107e26 100644
--- a/apps/web/src/app/billing/services/stripe.service.ts
+++ b/apps/web/src/app/billing/services/stripe.service.ts
@@ -55,15 +55,21 @@ export class StripeService {
    * Re-mounts previously created Stripe credit card [elements]{@link https://docs.stripe.com/js/elements_object/create} into the HTML elements
    * specified during the {@link loadStripe} call. This is useful for when those HTML elements are removed from the DOM by Angular.
    */
-  mountElements() {
+  mountElements(i: number = 0) {
     setTimeout(() => {
+      if (!document.querySelector(this.elementIds.cardNumber) && i < 10) {
+        this.logService.warning("Stripe container missing, retrying...");
+        this.mountElements(i + 1);
+        return;
+      }
+
       const cardNumber = this.elements.getElement("cardNumber");
       const cardExpiry = this.elements.getElement("cardExpiry");
       const cardCvc = this.elements.getElement("cardCvc");
       cardNumber.mount(this.elementIds.cardNumber);
       cardExpiry.mount(this.elementIds.cardExpiry);
       cardCvc.mount(this.elementIds.cardCvc);
-    });
+    }, 50);
   }
 
   /**