fix(subscription): surface stripe element load errors

src/app/subscription/components/stripe-payment-dialog.tsx

@@ -14,9 +14,11 @@ import {
 import { loadStripe } from "@stripe/stripe-js";
 
 import { ROUTES } from "@/router/routes";
+import { Logger } from "@/utils";
 
 import styles from "./stripe-payment-dialog.module.css";
 
+const log = new Logger("SubscriptionStripePaymentDialog");
 const stripePublishableKey = process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY;
 const stripePromise = stripePublishableKey
   ? loadStripe(stripePublishableKey)
@@ -104,6 +106,21 @@ function StripePaymentForm({
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [isSubmitting, setIsSubmitting] = useState(false);
 
+  const handleLoadError = (event: Parameters<
+    NonNullable<React.ComponentProps<typeof PaymentElement>["onLoadError"]>
+  >[0]) => {
+    log.error("[stripe-payment-dialog] PaymentElement load failed", {
+      type: event.error.type,
+      code: event.error.code,
+      message: event.error.message,
+      declineCode: event.error.decline_code,
+    });
+    setErrorMessage(
+      event.error.message ??
+        "Payment methods could not be loaded. Please try again later.",
+    );
+  };
+
   const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (!stripe || !elements || isSubmitting) return;
@@ -141,7 +158,7 @@ function StripePaymentForm({
 
   return (
     <form className={styles.form} onSubmit={handleSubmit}>
-      <PaymentElement />
+      <PaymentElement onLoadError={handleLoadError} />
       {errorMessage ? (
         <p role="alert" className={styles.error}>
           {errorMessage}