fix(clerk-js,shared): upgrade Stripe SDK from v5 to v9#8223
fix(clerk-js,shared): upgrade Stripe SDK from v5 to v9#8223jacekradko wants to merge 5 commits intomainfrom
Conversation
Upgrade @stripe/stripe-js from 5.6.0 to 9.0.0 and @stripe/react-stripe-js from 3.1.1 to 6.0.0 to stay current with Stripe's API surface.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 94c15c7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 21 packages
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 |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThis PR adds a Changeset entry and bumps Stripe dependencies: 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Comment |
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/shared/package.json`:
- Around line 155-156: The Stripe SDK dependency bumps in package.json may
introduce breaking changes; specifically verify the payment confirmation flow by
exercising the confirmSetup() call in the PaymentElement component: add
automated coverage (unit or e2e) that simulates a full setup confirmation flow
(mocking Stripe elements and confirmSetup responses) or provide documented
manual verification steps and screenshots/logs proving confirmSetup() works with
the new `@stripe/stripe-js` and `@stripe/react-stripe-js` versions; update or add
tests targeting the PaymentElement component and its confirmSetup usage, or
revert the dependency change if tests/manual checks fail.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: ASSERTIVE
Plan: Pro
Run ID: 7c03a69a-42ed-4395-a980-2ca0d092fb31
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (3)
.changeset/small-rugs-add.mdpackages/clerk-js/package.jsonpackages/shared/package.json
| "@stripe/react-stripe-js": "6.0.0", | ||
| "@stripe/stripe-js": "9.0.0", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Verify whether test files were part of this PR branch changes
git diff --name-only --diff-filter=ACMRT origin/main...HEAD | rg -n '(\.test\.|\.spec\.)' || true
# Locate current critical Stripe flow callsites covered by tests
rg -n --type=ts --type=tsx 'confirmSetup\s*\(' packages/shared packages/clerk-js
rg -n --type=ts --type=tsx 'PaymentElement|useInitializePaymentMethod' packages/shared packages/clerk-jsRepository: clerk/javascript
Length of output: 128
🏁 Script executed:
# Check if packages/shared/package.json exists and contains the Stripe versions
cat -n packages/shared/package.json | sed -n '150,160p'Repository: clerk/javascript
Length of output: 670
🏁 Script executed:
# Search for test files related to payments or Stripe
fd -e test.ts -e test.tsx -e spec.ts -e spec.tsx -e test.js -e test.jsx packages/ | head -20Repository: clerk/javascript
Length of output: 401
🏁 Script executed:
# Search for confirmSetup usage in the codebase
rg -n 'confirmSetup' packages/shared packages/clerk-js --max-count=10Repository: clerk/javascript
Length of output: 180
🏁 Script executed:
# Search for PaymentElement usage
rg -n 'PaymentElement' packages/shared packages/clerk-js --max-count=10Repository: clerk/javascript
Length of output: 4393
🏁 Script executed:
cat -n packages/shared/src/react/__tests__/payment-element.test.tsxRepository: clerk/javascript
Length of output: 11043
🏁 Script executed:
# Check recent git changes to understand what was modified
git status
git log --oneline -10Repository: clerk/javascript
Length of output: 359
🏁 Script executed:
# Look for any recent payment-related changes
git diff packages/shared/src/react/billing/payment-element.tsx | head -100Repository: clerk/javascript
Length of output: 42
🏁 Script executed:
# Check if there are other test files that may cover confirmSetup
fd -e test.ts -e test.tsx -e spec.ts -e spec.tsx . packages/ --full-path | grep -i stripeRepository: clerk/javascript
Length of output: 42
🏁 Script executed:
# Check the payment-element.tsx source to see confirmSetup implementation
cat packages/shared/src/react/billing/payment-element.tsx | sed -n '320,340p'Repository: clerk/javascript
Length of output: 678
🏁 Script executed:
# Check what changed in package.json specifically for Stripe
git diff HEAD -- packages/shared/package.json | grep -A 3 -B 3 stripe || echo "No git diff available"Repository: clerk/javascript
Length of output: 81
🏁 Script executed:
# List all modified/added files in the PR
git show --name-only --oneline | head -30Repository: clerk/javascript
Length of output: 905
🏁 Script executed:
# Check the changeset files to understand what's being upgraded
cat .changeset/cozy-lands-grow.md .changeset/nasty-insects-follow.md .changeset/new-seas-pick.md .changeset/polite-camels-chew.md .changeset/small-rugs-add.md 2>/dev/null | head -50Repository: clerk/javascript
Length of output: 744
🏁 Script executed:
# Check if payment-element.test.tsx was modified in this commit
git show HEAD:packages/shared/src/react/__tests__/payment-element.test.tsx > /tmp/test_current.tsx 2>/dev/null && echo "File exists in HEAD" || echo "File does not exist in HEAD"Repository: clerk/javascript
Length of output: 79
🏁 Script executed:
# Get Stripe SDK version changes from changeset or recent commits
rg -A 5 "stripe" .changeset/ 2>/dev/null | head -30Repository: clerk/javascript
Length of output: 186
🏁 Script executed:
# Check the Stripe release notes / breaking changes between versions
# Search web for Stripe SDK v5 to v9 migration guide
cat > /tmp/check_stripe.txt << 'EOF'
Checking Stripe SDK upgrade: v5.6.0 -> v9.0.0 for `@stripe/stripe-js`
and v3.1.1 -> v6.0.0 for `@stripe/react-stripe-js`
Need to verify if confirmSetup API changed in breaking ways.
EOF
cat /tmp/check_stripe.txtRepository: clerk/javascript
Length of output: 238
🏁 Script executed:
# Search for any migration or upgrade guidance in repo
rg -i "stripe.*breaking\|stripe.*migration\|confirmSetup" packages/ --max-count=5Repository: clerk/javascript
Length of output: 42
🏁 Script executed:
# Check if there are any integration tests or e2e tests that might cover this
fd . packages/ -e cy.ts -e e2e.ts -e integration.test.ts -e integration.spec.ts --full-pathRepository: clerk/javascript
Length of output: 42
Major Stripe SDK upgrade requires verification of payment confirmation flow before merge.
Lines 155-156 upgrade Stripe SDKs across major versions (v5→v9 for stripe-js, v3→v6 for react-stripe-js). These are significant version jumps that may introduce breaking changes. The confirmSetup() call at packages/shared/src/react/billing/payment-element.tsx:329 is critical billing code that must be verified to work correctly after this upgrade. Add test coverage (unit or e2e) or manual verification evidence for the payment confirmation flow before merging to prevent runtime billing failures.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/shared/package.json` around lines 155 - 156, The Stripe SDK
dependency bumps in package.json may introduce breaking changes; specifically
verify the payment confirmation flow by exercising the confirmSetup() call in
the PaymentElement component: add automated coverage (unit or e2e) that
simulates a full setup confirmation flow (mocking Stripe elements and
confirmSetup responses) or provide documented manual verification steps and
screenshots/logs proving confirmSetup() works with the new `@stripe/stripe-js` and
`@stripe/react-stripe-js` versions; update or add tests targeting the
PaymentElement component and its confirmSetup usage, or revert the dependency
change if tests/manual checks fail.
Stripe JS v9 vendor chunk is slightly larger (~1.3KB gzipped vs <1KB).
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/shared/src/react/billing/__tests__/usePaymentElement.spec.tsx`:
- Around line 7-8: Replace the explicit any annotations on mockStripe,
mockElements and submitResult with safer types (e.g., use unknown or the
specific Stripe types from `@stripe/stripe-js`) and narrow them where used; for
example change mockStripe: any and mockElements: any to mockStripe: unknown and
mockElements: unknown (or to Stripe | null / StripeElements | null if you import
those interfaces) and update the test usages by adding type guards or casts only
at the points of interaction (e.g., before calling
mockStripe.createPaymentMethod or mockElements.getElement) so the code is
statically typed and still mockable; ensure submitResult is typed (unknown or a
specific result interface) and narrowed before asserting fields.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: ASSERTIVE
Plan: Pro
Run ID: 364798fd-739c-417b-a0fe-5c4cbb9e4ec9
📒 Files selected for processing (1)
packages/shared/src/react/billing/__tests__/usePaymentElement.spec.tsx
| let mockStripe: any = null; | ||
| let mockElements: any = null; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify no explicit `any` remains in this test file.
rg -nP '\bany\b' packages/shared/src/react/billing/__tests__/usePaymentElement.spec.tsxRepository: clerk/javascript
Length of output: 220
Remove explicit any type annotations in this test file.
The Stripe mock objects and submit results use any, which violates the repository's TypeScript guidelines and can mask type regressions in upgrade tests. Provide proper types for mockStripe, mockElements, and submitResult variables.
Proposed fix
-let mockStripe: any = null;
-let mockElements: any = null;
+type MockStripe = {
+ confirmSetup: ReturnType<typeof vi.fn>;
+};
+
+type MockElements = {
+ create: ReturnType<typeof vi.fn>;
+ update: ReturnType<typeof vi.fn>;
+};
+
+type SubmitResult = Awaited<
+ ReturnType<ReturnType<typeof __experimental_usePaymentElement>['submit']>
+>;
+
+let mockStripe: MockStripe | null = null;
+let mockElements: MockElements | null = null;
@@
- let submitResult: any;
+ let submitResult: SubmitResult;
@@
- let submitResult: any;
+ let submitResult: SubmitResult;
@@
- let submitResult: any;
+ let submitResult: SubmitResult;Per coding guidelines: "Avoid any type - prefer unknown when type is uncertain, then narrow with type guards" and "No any types without justification in code review". Instances at lines 7, 8, 135, 167, 198.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/shared/src/react/billing/__tests__/usePaymentElement.spec.tsx`
around lines 7 - 8, Replace the explicit any annotations on mockStripe,
mockElements and submitResult with safer types (e.g., use unknown or the
specific Stripe types from `@stripe/stripe-js`) and narrow them where used; for
example change mockStripe: any and mockElements: any to mockStripe: unknown and
mockElements: unknown (or to Stripe | null / StripeElements | null if you import
those interfaces) and update the test usages by adding type guards or casts only
at the points of interaction (e.g., before calling
mockStripe.createPaymentMethod or mockElements.getElement) so the code is
statically typed and still mockable; ensure submitResult is typed (unknown or a
specific result interface) and narrowed before asserting fields.
Cover the confirmSetup flow, error handling, reset, and provider readiness states to validate the Stripe SDK v9 upgrade.
jacekradko
force-pushed
the
jacek/upgrade-stripe-sdk
branch
from
4f86c47 to
e06bf3b
Compare
|
I believe the highest we can upgrade to is stripe.js v6.1.0, which is the last major stripe.js aligned with the acacia API versions, which is what we use on the backend. Stripe's documentation recommends using the same versions on the frontend as the backend.
|
|
Thanks @dstaley ! Will adjust the PR accordingly |
2 participants
Summary
@stripe/stripe-jsfrom 5.6.0 to 9.0.0 (4 major versions)@stripe/react-stripe-jsfrom 3.1.1 to 6.0.0 (3 major versions)usePaymentElementhook covering theconfirmSetupflowstripe-vendorsbundlewatch limit from 1KB to 2KB to accommodate slightly larger v9 vendor chunk (~1.3KB gzipped)The codebase uses a narrow slice of the Stripe API (SetupIntents + PaymentElement via a forked react-stripe-js wrapper), so the breaking changes across these versions don't affect us:
redirectToCheckoutremoved (v8) — not usedcreateSource/retrieveSourcetypes removed (v9) — not used, we useconfirmSetupelements.update()returnsPromise<void>(v9) — return value is already ignoredoptions.layout.radiosno longer accepts boolean (v9) — not usedNote:
9.0.1/6.1.0exist but are blocked by the repo's 2-dayminimumReleaseAgepolicy. Can be bumped in a follow-up.Test plan
pnpm buildpasses for@clerk/sharedand@clerk/clerk-jsusePaymentElementtests + 10 existing)confirmSetupsuccess, error handling (card_error, validation_error), reset flow, and provider readiness statesconfirmSetupflow works end-to-endSummary by CodeRabbit
Chores
Tests