fix(clerk-js): Avoid using needsPaymentMethod in CheckoutComplete step

[panteliselef]

Description

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

  • Checkout success screen no longer shows payment-related messaging when no payment was required.

• Chores

  • Added a changeset entry to mark a patch release.

[changeset-bot]

🦋 Changeset detected

Latest commit: 2eb46fd

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	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	Preview	Comments	Updated (UTC)
clerk-js-sandbox	Ready	Preview	Comment	Nov 4, 2025 3:39pm

[coderabbitai]

Walkthrough

A patch for @clerk/clerk-js fixes checkout success messaging by changing CheckoutComplete’s logic to base payment vs subscription text on totals.totalDueNow.amount > 0 and freeTrialEndsAt !== null instead of needsPaymentMethod.

Changes

Cohort / File(s)	Summary
Changeset Entry .changeset/hungry-parrots-follow.md	Adds a patch changeset for @clerk/clerk-js describing the bug fix to checkout success messaging.
Checkout UI Fix packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx	Replaces needsPaymentMethod checks with totals.totalDueNow.amount > 0 and freeTrialEndsAt !== null across title, description, and line-item label branches to determine payment vs subscription success text and rendering of payment method details.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant User
  participant CheckoutComplete
  participant Renderer

  User->>CheckoutComplete: opens success screen (props: totals, freeTrialEndsAt, paymentMethod)
  Note right of CheckoutComplete: Decision based on<br/>totals.totalDueNow.amount > 0<br/>or freeTrialEndsAt !== null
  alt totalDueNow > 0 or freeTrialEndsAt set
    CheckoutComplete->>Renderer: render "payment/subscription success" title & description
    CheckoutComplete->>Renderer: render payment method details (if applicable)
  else totalDueNow == 0 and no trial end
    CheckoutComplete->>Renderer: render "no-payment success" title & description
  end
  Renderer->>User: display appropriate success UI

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Focus review on CheckoutComplete.tsx conditional replacements affecting title, description, and line-item rendering.
• Verify edge cases: zero amounts, null/undefined freeTrialEndsAt, and presence/absence of paymentMethod details.

Poem

🐰 I nibbled logic neat and small,
Replaced a check that caused a call;
When nothing's due and trials run free,
The success screen now agrees with me —
Hooray, no phantom payment spree! 🥕

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title clearly and specifically summarizes the main change: refactoring the CheckoutComplete component to depend on amount and trial end date instead of needsPaymentMethod.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 68c888f and 2eb46fd.

📒 Files selected for processing (1)

• packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx (4 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: Formatting | Dedupe | Changeset
• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: semgrep-cloud-platform/scan
• GitHub Check: semgrep-cloud-platform/scan

---

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

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7140

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7140

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7140

@clerk/clerk-expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/clerk-react

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

@clerk/react-router

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

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7140

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7140

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7140

@clerk/upgrade

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

@clerk/vue

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

commit: 2eb46fd