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

[aeliox]

We currently defer to Stripe to handle any errors when submitting the payment method form, but this assumes any error will be validation in nature, allowing for other errors like 3DS authorization errors to go unhandled. This change fixes that by handling any non-validation error.

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Summary by CodeRabbit

• Bug Fixes
  • Fixed a payment method form issue where failed card setup could leave the UI stuck in a loading state.
  • Improved error handling so non-validation payment errors are shown clearly instead of getting hidden.
  • Validation-related card errors continue to display inline as expected.

[changeset-bot]

🦋 Changeset detected

Latest commit: fe838d6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch
@clerk/swingset	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 2, 2026 11:16pm
swingset	Ready	Preview, Comment	Jul 2, 2026 11:16pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 619b67ef-60f5-41ae-a5d4-701a4296ddca

📥 Commits

Reviewing files that changed from the base of the PR and between 8089baa and fe838d6.

📒 Files selected for processing (2)

• .changeset/brave-mammals-burn.md
• packages/ui/src/components/PaymentMethods/AddPaymentMethod.tsx

---

📝 Walkthrough

Walkthrough

Modifies error handling in AddPaymentMethodForm's onSubmit so that on Stripe error, the card state resets to idle, and non-validation errors (e.g., 3DS failures) set a card-level error message rather than leaving the UI stuck in a loading state. Adds a changeset entry.

Changes

Payment method error handling fix

Layer / File(s)	Summary
Card error state handling on submit failure packages/ui/src/components/PaymentMethods/AddPaymentMethod.tsx, .changeset/brave-mammals-burn.md	On Stripe error, resets card to idle and sets a card error for non-validation_error cases while leaving validation errors to Stripe's inline UI; adds a patch changeset describing the fix.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Suggested reviewers: mauricioabreu, dstaley

Poem

A card once stuck in loading limbo,
Now hops to idle, quick and slim-bo,
3DS errors shown with glee,
Validation left for Stripe to see,
A patch, a hop, a fix so neat 🐇✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: showing non-validation Stripe errors in the checkout flow.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

_{Comment @coderabbitai help to get the list of available commands.}

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9080

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9080

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9080

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9080

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9080

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9080

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9080

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9080

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9080

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9080

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9080

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9080

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9080

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9080

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9080

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9080

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9080

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9080

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9080

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9080

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9080

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9080

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9080

commit: fe838d6

[github-actions]

API Changes Report

Generated by Break Check on 2026-07-02T23:20:02.156Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

---

Report generated by Break Check

_{Last ran on fe838d6.}

[dstaley]

nice!!