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

Merged
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success
Nov 4, 2025
Merged

fix(clerk-js): Avoid using needsPaymentMethod in CheckoutComplete step#7140
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success

Conversation

@panteliselef

@panteliselefpanteliselef commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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.

@panteliselefpanteliselef self-assigned this Nov 4, 2025
@changeset-bot

changeset-botBot commented Nov 4, 2025

Copy link
Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

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

vercelBot commented Nov 4, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 4, 2025 3:39pm

@coderabbitai

coderabbitaiBot commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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

pkg-pr-newBot commented Nov 4, 2025

Copy link
Copy Markdown

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

@panteliselef
panteliselef merged commit 02b723d into mainNov 4, 2025
42 checks passed
@panteliselef
panteliselef deleted the elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success branch November 4, 2025 15:57
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@panteliselef@tmilewski@wobsoriano@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

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

Merged
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success
Nov 4, 2025
Merged

fix(clerk-js): Avoid using needsPaymentMethod in CheckoutComplete step#7140
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success

Conversation

@panteliselef

@panteliselefpanteliselef commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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.

@panteliselefpanteliselef self-assigned this Nov 4, 2025
@changeset-bot

changeset-botBot commented Nov 4, 2025

Copy link
Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

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

vercelBot commented Nov 4, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 4, 2025 3:39pm

@coderabbitai

coderabbitaiBot commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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

pkg-pr-newBot commented Nov 4, 2025

Copy link
Copy Markdown

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

@panteliselef
panteliselef merged commit 02b723d into mainNov 4, 2025
42 checks passed
@panteliselef
panteliselef deleted the elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success branch November 4, 2025 15:57
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@panteliselef@tmilewski@wobsoriano@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

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

Merged
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success
Nov 4, 2025
Merged

fix(clerk-js): Avoid using needsPaymentMethod in CheckoutComplete step#7140
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success

Conversation

@panteliselef

@panteliselefpanteliselef commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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.

@panteliselefpanteliselef self-assigned this Nov 4, 2025
@changeset-bot

changeset-botBot commented Nov 4, 2025

Copy link
Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

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

vercelBot commented Nov 4, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 4, 2025 3:39pm

@coderabbitai

coderabbitaiBot commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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

pkg-pr-newBot commented Nov 4, 2025

Copy link
Copy Markdown

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

@panteliselef
panteliselef merged commit 02b723d into mainNov 4, 2025
42 checks passed
@panteliselef
panteliselef deleted the elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success branch November 4, 2025 15:57
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@panteliselef@tmilewski@wobsoriano@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

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

Merged
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success
Nov 4, 2025
Merged

fix(clerk-js): Avoid using needsPaymentMethod in CheckoutComplete step#7140
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success

Conversation

@panteliselef

@panteliselefpanteliselef commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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.

@panteliselefpanteliselef self-assigned this Nov 4, 2025
@changeset-bot

changeset-botBot commented Nov 4, 2025

Copy link
Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

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

vercelBot commented Nov 4, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 4, 2025 3:39pm

@coderabbitai

coderabbitaiBot commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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

pkg-pr-newBot commented Nov 4, 2025

Copy link
Copy Markdown

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

@panteliselef
panteliselef merged commit 02b723d into mainNov 4, 2025
42 checks passed
@panteliselef
panteliselef deleted the elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success branch November 4, 2025 15:57
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@panteliselef@tmilewski@wobsoriano@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

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

Merged
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success
Nov 4, 2025
Merged

fix(clerk-js): Avoid using needsPaymentMethod in CheckoutComplete step#7140
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success

Conversation

@panteliselef

@panteliselefpanteliselef commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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.

@panteliselefpanteliselef self-assigned this Nov 4, 2025
@changeset-bot

changeset-botBot commented Nov 4, 2025

Copy link
Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

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

vercelBot commented Nov 4, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 4, 2025 3:39pm

@coderabbitai

coderabbitaiBot commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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

pkg-pr-newBot commented Nov 4, 2025

Copy link
Copy Markdown

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

@panteliselef
panteliselef merged commit 02b723d into mainNov 4, 2025
42 checks passed
@panteliselef
panteliselef deleted the elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success branch November 4, 2025 15:57
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@panteliselef@tmilewski@wobsoriano@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

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

Merged
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success
Nov 4, 2025
Merged

fix(clerk-js): Avoid using needsPaymentMethod in CheckoutComplete step#7140
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success

Conversation

@panteliselef

@panteliselefpanteliselef commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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.

@panteliselefpanteliselef self-assigned this Nov 4, 2025
@changeset-bot

changeset-botBot commented Nov 4, 2025

Copy link
Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

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

vercelBot commented Nov 4, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 4, 2025 3:39pm

@coderabbitai

coderabbitaiBot commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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

pkg-pr-newBot commented Nov 4, 2025

Copy link
Copy Markdown

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

@panteliselef
panteliselef merged commit 02b723d into mainNov 4, 2025
42 checks passed
@panteliselef
panteliselef deleted the elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success branch November 4, 2025 15:57
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@panteliselef@tmilewski@wobsoriano@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

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

Merged
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success
Nov 4, 2025
Merged

fix(clerk-js): Avoid using needsPaymentMethod in CheckoutComplete step#7140
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success

Conversation

@panteliselef

@panteliselefpanteliselef commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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.

@panteliselefpanteliselef self-assigned this Nov 4, 2025
@changeset-bot

changeset-botBot commented Nov 4, 2025

Copy link
Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

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

vercelBot commented Nov 4, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 4, 2025 3:39pm

@coderabbitai

coderabbitaiBot commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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

pkg-pr-newBot commented Nov 4, 2025

Copy link
Copy Markdown

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

@panteliselef
panteliselef merged commit 02b723d into mainNov 4, 2025
42 checks passed
@panteliselef
panteliselef deleted the elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success branch November 4, 2025 15:57
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@panteliselef@tmilewski@wobsoriano@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

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

Merged
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success
Nov 4, 2025
Merged

fix(clerk-js): Avoid using needsPaymentMethod in CheckoutComplete step#7140
panteliselef merged 2 commits into
mainfrom
elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success

Conversation

@panteliselef

@panteliselefpanteliselef commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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.

@panteliselefpanteliselef self-assigned this Nov 4, 2025
@changeset-bot

changeset-botBot commented Nov 4, 2025

Copy link
Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

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

vercelBot commented Nov 4, 2025

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentNov 4, 2025 3:39pm

@coderabbitai

coderabbitaiBot commented Nov 4, 2025

Copy link
Copy Markdown
Contributor

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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe 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

pkg-pr-newBot commented Nov 4, 2025

Copy link
Copy Markdown

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

@panteliselef
panteliselef merged commit 02b723d into mainNov 4, 2025
42 checks passed
@panteliselef
panteliselef deleted the elef/bill-1395-on-checkoutcomplete-depend-on-amount-to-display-success branch November 4, 2025 15:57
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants

@panteliselef@tmilewski@wobsoriano@clerk-cookie