fix(ui): Display non-validation Stripe errors within Checkout component (#9080)

Author: aeliox

.changeset/brave-mammals-burn.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix the payment method form getting stuck in a loading state after a failed card setup. Non-validation errors such as 3DS authentication failures are now displayed.

packages/ui/src/components/PaymentMethods/AddPaymentMethod.tsx

@@ -206,7 +206,14 @@ const AddPaymentMethodForm = ({ children }: PropsWithChildren) => {
 
     const { data, error } = await submitPaymentElement();
     if (error) {
-      return; // just return, since stripe will handle the error
+      card.setIdle();
+      // Validation errors are already rendered inline by Stripe's PaymentElement.
+      // Non-validation errors (e.g. 3DS authentication failure) are not surfaced by
+      // Stripe's UI, so we display them ourselves.
+      if (error.error.type !== 'validation_error') {
+        card.setError(error.error.message);
+      }
+      return;
     }
     try {
       await onSuccess(data);