From 66966c51b73eec89deb799b8891e94e822e797e4 Mon Sep 17 00:00:00 2001 From: Conner Turnbull Date: Wed, 29 Jan 2025 15:55:56 -0500 Subject: [PATCH] Added retry logic when mounting Stripe elements and extended timout to 50 ms --- 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 61bc0b6cdd2..f3eac01959c 100644 --- a/apps/web/src/app/billing/services/stripe.service.ts +++ b/apps/web/src/app/billing/services/stripe.service.ts @@ -69,15 +69,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); } /**