feat(clerk-js,localizations,shared,ui): Add support for credits - #7776

Merged
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit
Feb 17, 2026
Merged

feat(clerk-js,localizations,shared,ui): Add support for credits#7776
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit

Conversation

@dstaley

@dstaleydstaley commented Feb 5, 2026

Copy link
Copy Markdown
Member

Description

This PR adds support for the new account credit feature in checkout. If the current user or organization has a credit balance, the consumed amount is displayed in the same way that we display proration credits during checkout.

Testing Instructions

  • Checkout locally, run pnpm dev:sandbox to start the sandbox and go to it
  • Open the console
  • run scenario.setScenario(AVAILABLE_SCENARIOS.CheckoutAccountCredit)
  • navigate to the pricing table page
  • click subscribe on any of the plans
  • see credits listed under the subtotal

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

  • New Features

    • Add account credits in checkout with a detailed credits breakdown (proration, payer credit, totals).
    • Checkout UI shows prorated credit and applied account (payer) credit separately, including remainder and applied amounts.
  • Localization

    • Added localized message for credit remainder in billing displays.
  • Tests

    • Added tests covering rendering of credit details in checkout.

@vercel

vercelBot commented Feb 5, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 17, 2026 6:18pm

Request Review

@changeset-bot

changeset-botBot commented Feb 5, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 113dbcc

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

This PR includes changesets to release 20 packages
NameType
@clerk/localizationsMinor
@clerk/clerk-jsMinor
@clerk/sharedMinor
@clerk/uiMinor
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch

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

@dstaleydstaley changed the title feat(clerk-js,localizations,shared,ui): Add support for account credi…feat(clerk-js,localizations,shared,ui): Add support for creditsFeb 13, 2026
@coderabbitai

coderabbitaiBot commented Feb 13, 2026

Copy link
Copy Markdown
Contributor

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉


📝 Walkthrough

Walkthrough

Adds account credit support: a changeset updating multiple packages; new JSON and TypeScript types for proration, payer credit, and consolidated credits; credits fields added to BillingCheckoutTotals and BillingSubscriptionItem JSON types; billing parser updated to handle credits; a new sandbox MSW scenario CheckoutAccountCredit exported; localization key payerCreditRemainder added; Checkout UI updated to render prorated and payer-applied credits; tests updated/added to cover credit display.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately captures the main change: adding support for credits across multiple packages (clerk-js, localizations, shared, ui) as described in the changeset and file modifications.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


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

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

38-96: ⚠️ Potential issue | 🟠 Major

Fix proration credit rendering to avoid “undefined” output and preserve legacy credits.

The condition is driven by totals.credits.proration, but the rendered amount comes from totals.credit. If the new credits object exists while totals.credit is null, the UI shows “- undefined”. If only the legacy credit exists, the proration credit disappears. Use a single proration amount source (credits fallback to legacy) for both the condition and display.

Suggested fix
- const showProratedCredit = !!totals.credits?.proration?.amount && totals.credits.proration.amount.amount > 0;+ const prorationAmount = totals.credits?.proration?.amount ?? totals.credit;+ const showProratedCredit = !!prorationAmount?.amount && prorationAmount.amount > 0;
...
- <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />+ <LineItems.Description+ text={`- ${prorationAmount?.currencySymbol}${prorationAmount?.amountFormatted}`}+ />
🤖 Fix all issues with AI agents
In @.changeset/shy-loops-type.md:
- Around line 1-8: Add unit and integration tests covering the new
account-credit checkout flow: write unit tests for the parsing function (e.g.,
parseAccountCredits) to confirm it parses valid/invalid payloads and edge cases,
and add React Testing Library integration tests for the Checkout/Cart component
(e.g., Checkout, AccountCreditsBadge or AccountCreditsDisplay) to assert the UI
shows the credit amount, that totals are recalculated when credits apply, and
that error/zero-credit states render correctly; mock the API/props that supply
credits and include test cases for applying credits, removing credits, and
display formatting to prevent regressions.

Comment on lines +1 to +8
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
'@clerk/ui': minor
---

Add support for account credits in checkout.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add tests covering account-credit checkout behavior.

No tests were added/updated for the new credits flow (parsing + UI display). Please add coverage to prevent regressions.
As per coding guidelines: "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Prompt for AI Agents
In @.changeset/shy-loops-type.md around lines 1 - 8, Add unit and integration
tests covering the new account-credit checkout flow: write unit tests for the
parsing function (e.g., parseAccountCredits) to confirm it parses valid/invalid
payloads and edge cases, and add React Testing Library integration tests for the
Checkout/Cart component (e.g., Checkout, AccountCreditsBadge or
AccountCreditsDisplay) to assert the UI shows the credit amount, that totals are
recalculated when credits apply, and that error/zero-credit states render
correctly; mock the API/props that supply credits and include test cases for
applying credits, removing credits, and display formatting to prevent
regressions.

@pkg-pr-new

pkg-pr-newBot commented Feb 13, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

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

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 113dbcc

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

29-32: ⚠️ Potential issue | 🟠 Major

Add tests for the new credit rendering paths.

This PR introduces new credit logic (proration vs payer credits) but no tests were added/updated to cover it. Please add tests before merge.

As per coding guidelines, "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/Checkout/CheckoutForm.tsx`:
- Around line 84-88: The UI is rendering the prorated credit using the old field
totals.credit; update the rendering to read from the new credits structure used
by showProratedCredit (totals.credits.proration) so the displayed currency
symbol and formatted amount come from totals.credits.proration (e.g., replace
references to totals.credit in the LineItems.Description inside CheckoutForm.tsx
with the corresponding totals.credits.proration.currencySymbol and
totals.credits.proration.amountFormatted or their exact field names).

Comment threadpackages/ui/src/components/Checkout/CheckoutForm.tsx

@mauricioabreumauricioabreu left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@dstaley
dstaley merged commit 92599c7 into mainFeb 17, 2026
41 checks passed
@dstaley
dstaley deleted the ds.feat/checkout-account-credit branch February 17, 2026 22:41
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dstaley@mauricioabreu@bratsos
, '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

feat(clerk-js,localizations,shared,ui): Add support for credits - #7776

Merged
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit
Feb 17, 2026
Merged

feat(clerk-js,localizations,shared,ui): Add support for credits#7776
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit

Conversation

@dstaley

@dstaleydstaley commented Feb 5, 2026

Copy link
Copy Markdown
Member

Description

This PR adds support for the new account credit feature in checkout. If the current user or organization has a credit balance, the consumed amount is displayed in the same way that we display proration credits during checkout.

Testing Instructions

  • Checkout locally, run pnpm dev:sandbox to start the sandbox and go to it
  • Open the console
  • run scenario.setScenario(AVAILABLE_SCENARIOS.CheckoutAccountCredit)
  • navigate to the pricing table page
  • click subscribe on any of the plans
  • see credits listed under the subtotal

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

  • New Features

    • Add account credits in checkout with a detailed credits breakdown (proration, payer credit, totals).
    • Checkout UI shows prorated credit and applied account (payer) credit separately, including remainder and applied amounts.
  • Localization

    • Added localized message for credit remainder in billing displays.
  • Tests

    • Added tests covering rendering of credit details in checkout.

@vercel

vercelBot commented Feb 5, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 17, 2026 6:18pm

Request Review

@changeset-bot

changeset-botBot commented Feb 5, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 113dbcc

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

This PR includes changesets to release 20 packages
NameType
@clerk/localizationsMinor
@clerk/clerk-jsMinor
@clerk/sharedMinor
@clerk/uiMinor
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch

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

@dstaleydstaley changed the title feat(clerk-js,localizations,shared,ui): Add support for account credi…feat(clerk-js,localizations,shared,ui): Add support for creditsFeb 13, 2026
@coderabbitai

coderabbitaiBot commented Feb 13, 2026

Copy link
Copy Markdown
Contributor

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉


📝 Walkthrough

Walkthrough

Adds account credit support: a changeset updating multiple packages; new JSON and TypeScript types for proration, payer credit, and consolidated credits; credits fields added to BillingCheckoutTotals and BillingSubscriptionItem JSON types; billing parser updated to handle credits; a new sandbox MSW scenario CheckoutAccountCredit exported; localization key payerCreditRemainder added; Checkout UI updated to render prorated and payer-applied credits; tests updated/added to cover credit display.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately captures the main change: adding support for credits across multiple packages (clerk-js, localizations, shared, ui) as described in the changeset and file modifications.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


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

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

38-96: ⚠️ Potential issue | 🟠 Major

Fix proration credit rendering to avoid “undefined” output and preserve legacy credits.

The condition is driven by totals.credits.proration, but the rendered amount comes from totals.credit. If the new credits object exists while totals.credit is null, the UI shows “- undefined”. If only the legacy credit exists, the proration credit disappears. Use a single proration amount source (credits fallback to legacy) for both the condition and display.

Suggested fix
- const showProratedCredit = !!totals.credits?.proration?.amount && totals.credits.proration.amount.amount > 0;+ const prorationAmount = totals.credits?.proration?.amount ?? totals.credit;+ const showProratedCredit = !!prorationAmount?.amount && prorationAmount.amount > 0;
...
- <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />+ <LineItems.Description+ text={`- ${prorationAmount?.currencySymbol}${prorationAmount?.amountFormatted}`}+ />
🤖 Fix all issues with AI agents
In @.changeset/shy-loops-type.md:
- Around line 1-8: Add unit and integration tests covering the new
account-credit checkout flow: write unit tests for the parsing function (e.g.,
parseAccountCredits) to confirm it parses valid/invalid payloads and edge cases,
and add React Testing Library integration tests for the Checkout/Cart component
(e.g., Checkout, AccountCreditsBadge or AccountCreditsDisplay) to assert the UI
shows the credit amount, that totals are recalculated when credits apply, and
that error/zero-credit states render correctly; mock the API/props that supply
credits and include test cases for applying credits, removing credits, and
display formatting to prevent regressions.

Comment on lines +1 to +8
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
'@clerk/ui': minor
---

Add support for account credits in checkout.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add tests covering account-credit checkout behavior.

No tests were added/updated for the new credits flow (parsing + UI display). Please add coverage to prevent regressions.
As per coding guidelines: "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Prompt for AI Agents
In @.changeset/shy-loops-type.md around lines 1 - 8, Add unit and integration
tests covering the new account-credit checkout flow: write unit tests for the
parsing function (e.g., parseAccountCredits) to confirm it parses valid/invalid
payloads and edge cases, and add React Testing Library integration tests for the
Checkout/Cart component (e.g., Checkout, AccountCreditsBadge or
AccountCreditsDisplay) to assert the UI shows the credit amount, that totals are
recalculated when credits apply, and that error/zero-credit states render
correctly; mock the API/props that supply credits and include test cases for
applying credits, removing credits, and display formatting to prevent
regressions.

@pkg-pr-new

pkg-pr-newBot commented Feb 13, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

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

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 113dbcc

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

29-32: ⚠️ Potential issue | 🟠 Major

Add tests for the new credit rendering paths.

This PR introduces new credit logic (proration vs payer credits) but no tests were added/updated to cover it. Please add tests before merge.

As per coding guidelines, "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/Checkout/CheckoutForm.tsx`:
- Around line 84-88: The UI is rendering the prorated credit using the old field
totals.credit; update the rendering to read from the new credits structure used
by showProratedCredit (totals.credits.proration) so the displayed currency
symbol and formatted amount come from totals.credits.proration (e.g., replace
references to totals.credit in the LineItems.Description inside CheckoutForm.tsx
with the corresponding totals.credits.proration.currencySymbol and
totals.credits.proration.amountFormatted or their exact field names).

Comment threadpackages/ui/src/components/Checkout/CheckoutForm.tsx

@mauricioabreumauricioabreu left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@dstaley
dstaley merged commit 92599c7 into mainFeb 17, 2026
41 checks passed
@dstaley
dstaley deleted the ds.feat/checkout-account-credit branch February 17, 2026 22:41
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dstaley@mauricioabreu@bratsos
, '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

feat(clerk-js,localizations,shared,ui): Add support for credits - #7776

Merged
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit
Feb 17, 2026
Merged

feat(clerk-js,localizations,shared,ui): Add support for credits#7776
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit

Conversation

@dstaley

@dstaleydstaley commented Feb 5, 2026

Copy link
Copy Markdown
Member

Description

This PR adds support for the new account credit feature in checkout. If the current user or organization has a credit balance, the consumed amount is displayed in the same way that we display proration credits during checkout.

Testing Instructions

  • Checkout locally, run pnpm dev:sandbox to start the sandbox and go to it
  • Open the console
  • run scenario.setScenario(AVAILABLE_SCENARIOS.CheckoutAccountCredit)
  • navigate to the pricing table page
  • click subscribe on any of the plans
  • see credits listed under the subtotal

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

  • New Features

    • Add account credits in checkout with a detailed credits breakdown (proration, payer credit, totals).
    • Checkout UI shows prorated credit and applied account (payer) credit separately, including remainder and applied amounts.
  • Localization

    • Added localized message for credit remainder in billing displays.
  • Tests

    • Added tests covering rendering of credit details in checkout.

@vercel

vercelBot commented Feb 5, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 17, 2026 6:18pm

Request Review

@changeset-bot

changeset-botBot commented Feb 5, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 113dbcc

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

This PR includes changesets to release 20 packages
NameType
@clerk/localizationsMinor
@clerk/clerk-jsMinor
@clerk/sharedMinor
@clerk/uiMinor
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch

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

@dstaleydstaley changed the title feat(clerk-js,localizations,shared,ui): Add support for account credi…feat(clerk-js,localizations,shared,ui): Add support for creditsFeb 13, 2026
@coderabbitai

coderabbitaiBot commented Feb 13, 2026

Copy link
Copy Markdown
Contributor

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉


📝 Walkthrough

Walkthrough

Adds account credit support: a changeset updating multiple packages; new JSON and TypeScript types for proration, payer credit, and consolidated credits; credits fields added to BillingCheckoutTotals and BillingSubscriptionItem JSON types; billing parser updated to handle credits; a new sandbox MSW scenario CheckoutAccountCredit exported; localization key payerCreditRemainder added; Checkout UI updated to render prorated and payer-applied credits; tests updated/added to cover credit display.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately captures the main change: adding support for credits across multiple packages (clerk-js, localizations, shared, ui) as described in the changeset and file modifications.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


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

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

38-96: ⚠️ Potential issue | 🟠 Major

Fix proration credit rendering to avoid “undefined” output and preserve legacy credits.

The condition is driven by totals.credits.proration, but the rendered amount comes from totals.credit. If the new credits object exists while totals.credit is null, the UI shows “- undefined”. If only the legacy credit exists, the proration credit disappears. Use a single proration amount source (credits fallback to legacy) for both the condition and display.

Suggested fix
- const showProratedCredit = !!totals.credits?.proration?.amount && totals.credits.proration.amount.amount > 0;+ const prorationAmount = totals.credits?.proration?.amount ?? totals.credit;+ const showProratedCredit = !!prorationAmount?.amount && prorationAmount.amount > 0;
...
- <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />+ <LineItems.Description+ text={`- ${prorationAmount?.currencySymbol}${prorationAmount?.amountFormatted}`}+ />
🤖 Fix all issues with AI agents
In @.changeset/shy-loops-type.md:
- Around line 1-8: Add unit and integration tests covering the new
account-credit checkout flow: write unit tests for the parsing function (e.g.,
parseAccountCredits) to confirm it parses valid/invalid payloads and edge cases,
and add React Testing Library integration tests for the Checkout/Cart component
(e.g., Checkout, AccountCreditsBadge or AccountCreditsDisplay) to assert the UI
shows the credit amount, that totals are recalculated when credits apply, and
that error/zero-credit states render correctly; mock the API/props that supply
credits and include test cases for applying credits, removing credits, and
display formatting to prevent regressions.

Comment on lines +1 to +8
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
'@clerk/ui': minor
---

Add support for account credits in checkout.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add tests covering account-credit checkout behavior.

No tests were added/updated for the new credits flow (parsing + UI display). Please add coverage to prevent regressions.
As per coding guidelines: "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Prompt for AI Agents
In @.changeset/shy-loops-type.md around lines 1 - 8, Add unit and integration
tests covering the new account-credit checkout flow: write unit tests for the
parsing function (e.g., parseAccountCredits) to confirm it parses valid/invalid
payloads and edge cases, and add React Testing Library integration tests for the
Checkout/Cart component (e.g., Checkout, AccountCreditsBadge or
AccountCreditsDisplay) to assert the UI shows the credit amount, that totals are
recalculated when credits apply, and that error/zero-credit states render
correctly; mock the API/props that supply credits and include test cases for
applying credits, removing credits, and display formatting to prevent
regressions.

@pkg-pr-new

pkg-pr-newBot commented Feb 13, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

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

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 113dbcc

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

29-32: ⚠️ Potential issue | 🟠 Major

Add tests for the new credit rendering paths.

This PR introduces new credit logic (proration vs payer credits) but no tests were added/updated to cover it. Please add tests before merge.

As per coding guidelines, "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/Checkout/CheckoutForm.tsx`:
- Around line 84-88: The UI is rendering the prorated credit using the old field
totals.credit; update the rendering to read from the new credits structure used
by showProratedCredit (totals.credits.proration) so the displayed currency
symbol and formatted amount come from totals.credits.proration (e.g., replace
references to totals.credit in the LineItems.Description inside CheckoutForm.tsx
with the corresponding totals.credits.proration.currencySymbol and
totals.credits.proration.amountFormatted or their exact field names).

Comment threadpackages/ui/src/components/Checkout/CheckoutForm.tsx

@mauricioabreumauricioabreu left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@dstaley
dstaley merged commit 92599c7 into mainFeb 17, 2026
41 checks passed
@dstaley
dstaley deleted the ds.feat/checkout-account-credit branch February 17, 2026 22:41
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dstaley@mauricioabreu@bratsos
, '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

feat(clerk-js,localizations,shared,ui): Add support for credits - #7776

Merged
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit
Feb 17, 2026
Merged

feat(clerk-js,localizations,shared,ui): Add support for credits#7776
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit

Conversation

@dstaley

@dstaleydstaley commented Feb 5, 2026

Copy link
Copy Markdown
Member

Description

This PR adds support for the new account credit feature in checkout. If the current user or organization has a credit balance, the consumed amount is displayed in the same way that we display proration credits during checkout.

Testing Instructions

  • Checkout locally, run pnpm dev:sandbox to start the sandbox and go to it
  • Open the console
  • run scenario.setScenario(AVAILABLE_SCENARIOS.CheckoutAccountCredit)
  • navigate to the pricing table page
  • click subscribe on any of the plans
  • see credits listed under the subtotal

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

  • New Features

    • Add account credits in checkout with a detailed credits breakdown (proration, payer credit, totals).
    • Checkout UI shows prorated credit and applied account (payer) credit separately, including remainder and applied amounts.
  • Localization

    • Added localized message for credit remainder in billing displays.
  • Tests

    • Added tests covering rendering of credit details in checkout.

@vercel

vercelBot commented Feb 5, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 17, 2026 6:18pm

Request Review

@changeset-bot

changeset-botBot commented Feb 5, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 113dbcc

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

This PR includes changesets to release 20 packages
NameType
@clerk/localizationsMinor
@clerk/clerk-jsMinor
@clerk/sharedMinor
@clerk/uiMinor
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch

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

@dstaleydstaley changed the title feat(clerk-js,localizations,shared,ui): Add support for account credi…feat(clerk-js,localizations,shared,ui): Add support for creditsFeb 13, 2026
@coderabbitai

coderabbitaiBot commented Feb 13, 2026

Copy link
Copy Markdown
Contributor

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉


📝 Walkthrough

Walkthrough

Adds account credit support: a changeset updating multiple packages; new JSON and TypeScript types for proration, payer credit, and consolidated credits; credits fields added to BillingCheckoutTotals and BillingSubscriptionItem JSON types; billing parser updated to handle credits; a new sandbox MSW scenario CheckoutAccountCredit exported; localization key payerCreditRemainder added; Checkout UI updated to render prorated and payer-applied credits; tests updated/added to cover credit display.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately captures the main change: adding support for credits across multiple packages (clerk-js, localizations, shared, ui) as described in the changeset and file modifications.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


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

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

38-96: ⚠️ Potential issue | 🟠 Major

Fix proration credit rendering to avoid “undefined” output and preserve legacy credits.

The condition is driven by totals.credits.proration, but the rendered amount comes from totals.credit. If the new credits object exists while totals.credit is null, the UI shows “- undefined”. If only the legacy credit exists, the proration credit disappears. Use a single proration amount source (credits fallback to legacy) for both the condition and display.

Suggested fix
- const showProratedCredit = !!totals.credits?.proration?.amount && totals.credits.proration.amount.amount > 0;+ const prorationAmount = totals.credits?.proration?.amount ?? totals.credit;+ const showProratedCredit = !!prorationAmount?.amount && prorationAmount.amount > 0;
...
- <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />+ <LineItems.Description+ text={`- ${prorationAmount?.currencySymbol}${prorationAmount?.amountFormatted}`}+ />
🤖 Fix all issues with AI agents
In @.changeset/shy-loops-type.md:
- Around line 1-8: Add unit and integration tests covering the new
account-credit checkout flow: write unit tests for the parsing function (e.g.,
parseAccountCredits) to confirm it parses valid/invalid payloads and edge cases,
and add React Testing Library integration tests for the Checkout/Cart component
(e.g., Checkout, AccountCreditsBadge or AccountCreditsDisplay) to assert the UI
shows the credit amount, that totals are recalculated when credits apply, and
that error/zero-credit states render correctly; mock the API/props that supply
credits and include test cases for applying credits, removing credits, and
display formatting to prevent regressions.

Comment on lines +1 to +8
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
'@clerk/ui': minor
---

Add support for account credits in checkout.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add tests covering account-credit checkout behavior.

No tests were added/updated for the new credits flow (parsing + UI display). Please add coverage to prevent regressions.
As per coding guidelines: "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Prompt for AI Agents
In @.changeset/shy-loops-type.md around lines 1 - 8, Add unit and integration
tests covering the new account-credit checkout flow: write unit tests for the
parsing function (e.g., parseAccountCredits) to confirm it parses valid/invalid
payloads and edge cases, and add React Testing Library integration tests for the
Checkout/Cart component (e.g., Checkout, AccountCreditsBadge or
AccountCreditsDisplay) to assert the UI shows the credit amount, that totals are
recalculated when credits apply, and that error/zero-credit states render
correctly; mock the API/props that supply credits and include test cases for
applying credits, removing credits, and display formatting to prevent
regressions.

@pkg-pr-new

pkg-pr-newBot commented Feb 13, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

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

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 113dbcc

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

29-32: ⚠️ Potential issue | 🟠 Major

Add tests for the new credit rendering paths.

This PR introduces new credit logic (proration vs payer credits) but no tests were added/updated to cover it. Please add tests before merge.

As per coding guidelines, "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/Checkout/CheckoutForm.tsx`:
- Around line 84-88: The UI is rendering the prorated credit using the old field
totals.credit; update the rendering to read from the new credits structure used
by showProratedCredit (totals.credits.proration) so the displayed currency
symbol and formatted amount come from totals.credits.proration (e.g., replace
references to totals.credit in the LineItems.Description inside CheckoutForm.tsx
with the corresponding totals.credits.proration.currencySymbol and
totals.credits.proration.amountFormatted or their exact field names).

Comment threadpackages/ui/src/components/Checkout/CheckoutForm.tsx

@mauricioabreumauricioabreu left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@dstaley
dstaley merged commit 92599c7 into mainFeb 17, 2026
41 checks passed
@dstaley
dstaley deleted the ds.feat/checkout-account-credit branch February 17, 2026 22:41
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dstaley@mauricioabreu@bratsos
, '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

feat(clerk-js,localizations,shared,ui): Add support for credits - #7776

Merged
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit
Feb 17, 2026
Merged

feat(clerk-js,localizations,shared,ui): Add support for credits#7776
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit

Conversation

@dstaley

@dstaleydstaley commented Feb 5, 2026

Copy link
Copy Markdown
Member

Description

This PR adds support for the new account credit feature in checkout. If the current user or organization has a credit balance, the consumed amount is displayed in the same way that we display proration credits during checkout.

Testing Instructions

  • Checkout locally, run pnpm dev:sandbox to start the sandbox and go to it
  • Open the console
  • run scenario.setScenario(AVAILABLE_SCENARIOS.CheckoutAccountCredit)
  • navigate to the pricing table page
  • click subscribe on any of the plans
  • see credits listed under the subtotal

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

  • New Features

    • Add account credits in checkout with a detailed credits breakdown (proration, payer credit, totals).
    • Checkout UI shows prorated credit and applied account (payer) credit separately, including remainder and applied amounts.
  • Localization

    • Added localized message for credit remainder in billing displays.
  • Tests

    • Added tests covering rendering of credit details in checkout.

@vercel

vercelBot commented Feb 5, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 17, 2026 6:18pm

Request Review

@changeset-bot

changeset-botBot commented Feb 5, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 113dbcc

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

This PR includes changesets to release 20 packages
NameType
@clerk/localizationsMinor
@clerk/clerk-jsMinor
@clerk/sharedMinor
@clerk/uiMinor
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch

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

@dstaleydstaley changed the title feat(clerk-js,localizations,shared,ui): Add support for account credi…feat(clerk-js,localizations,shared,ui): Add support for creditsFeb 13, 2026
@coderabbitai

coderabbitaiBot commented Feb 13, 2026

Copy link
Copy Markdown
Contributor

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉


📝 Walkthrough

Walkthrough

Adds account credit support: a changeset updating multiple packages; new JSON and TypeScript types for proration, payer credit, and consolidated credits; credits fields added to BillingCheckoutTotals and BillingSubscriptionItem JSON types; billing parser updated to handle credits; a new sandbox MSW scenario CheckoutAccountCredit exported; localization key payerCreditRemainder added; Checkout UI updated to render prorated and payer-applied credits; tests updated/added to cover credit display.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately captures the main change: adding support for credits across multiple packages (clerk-js, localizations, shared, ui) as described in the changeset and file modifications.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


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

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

38-96: ⚠️ Potential issue | 🟠 Major

Fix proration credit rendering to avoid “undefined” output and preserve legacy credits.

The condition is driven by totals.credits.proration, but the rendered amount comes from totals.credit. If the new credits object exists while totals.credit is null, the UI shows “- undefined”. If only the legacy credit exists, the proration credit disappears. Use a single proration amount source (credits fallback to legacy) for both the condition and display.

Suggested fix
- const showProratedCredit = !!totals.credits?.proration?.amount && totals.credits.proration.amount.amount > 0;+ const prorationAmount = totals.credits?.proration?.amount ?? totals.credit;+ const showProratedCredit = !!prorationAmount?.amount && prorationAmount.amount > 0;
...
- <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />+ <LineItems.Description+ text={`- ${prorationAmount?.currencySymbol}${prorationAmount?.amountFormatted}`}+ />
🤖 Fix all issues with AI agents
In @.changeset/shy-loops-type.md:
- Around line 1-8: Add unit and integration tests covering the new
account-credit checkout flow: write unit tests for the parsing function (e.g.,
parseAccountCredits) to confirm it parses valid/invalid payloads and edge cases,
and add React Testing Library integration tests for the Checkout/Cart component
(e.g., Checkout, AccountCreditsBadge or AccountCreditsDisplay) to assert the UI
shows the credit amount, that totals are recalculated when credits apply, and
that error/zero-credit states render correctly; mock the API/props that supply
credits and include test cases for applying credits, removing credits, and
display formatting to prevent regressions.

Comment on lines +1 to +8
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
'@clerk/ui': minor
---

Add support for account credits in checkout.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add tests covering account-credit checkout behavior.

No tests were added/updated for the new credits flow (parsing + UI display). Please add coverage to prevent regressions.
As per coding guidelines: "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Prompt for AI Agents
In @.changeset/shy-loops-type.md around lines 1 - 8, Add unit and integration
tests covering the new account-credit checkout flow: write unit tests for the
parsing function (e.g., parseAccountCredits) to confirm it parses valid/invalid
payloads and edge cases, and add React Testing Library integration tests for the
Checkout/Cart component (e.g., Checkout, AccountCreditsBadge or
AccountCreditsDisplay) to assert the UI shows the credit amount, that totals are
recalculated when credits apply, and that error/zero-credit states render
correctly; mock the API/props that supply credits and include test cases for
applying credits, removing credits, and display formatting to prevent
regressions.

@pkg-pr-new

pkg-pr-newBot commented Feb 13, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

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

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 113dbcc

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

29-32: ⚠️ Potential issue | 🟠 Major

Add tests for the new credit rendering paths.

This PR introduces new credit logic (proration vs payer credits) but no tests were added/updated to cover it. Please add tests before merge.

As per coding guidelines, "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/Checkout/CheckoutForm.tsx`:
- Around line 84-88: The UI is rendering the prorated credit using the old field
totals.credit; update the rendering to read from the new credits structure used
by showProratedCredit (totals.credits.proration) so the displayed currency
symbol and formatted amount come from totals.credits.proration (e.g., replace
references to totals.credit in the LineItems.Description inside CheckoutForm.tsx
with the corresponding totals.credits.proration.currencySymbol and
totals.credits.proration.amountFormatted or their exact field names).

Comment threadpackages/ui/src/components/Checkout/CheckoutForm.tsx

@mauricioabreumauricioabreu left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@dstaley
dstaley merged commit 92599c7 into mainFeb 17, 2026
41 checks passed
@dstaley
dstaley deleted the ds.feat/checkout-account-credit branch February 17, 2026 22:41
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dstaley@mauricioabreu@bratsos
, '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

feat(clerk-js,localizations,shared,ui): Add support for credits - #7776

Merged
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit
Feb 17, 2026
Merged

feat(clerk-js,localizations,shared,ui): Add support for credits#7776
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit

Conversation

@dstaley

@dstaleydstaley commented Feb 5, 2026

Copy link
Copy Markdown
Member

Description

This PR adds support for the new account credit feature in checkout. If the current user or organization has a credit balance, the consumed amount is displayed in the same way that we display proration credits during checkout.

Testing Instructions

  • Checkout locally, run pnpm dev:sandbox to start the sandbox and go to it
  • Open the console
  • run scenario.setScenario(AVAILABLE_SCENARIOS.CheckoutAccountCredit)
  • navigate to the pricing table page
  • click subscribe on any of the plans
  • see credits listed under the subtotal

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

  • New Features

    • Add account credits in checkout with a detailed credits breakdown (proration, payer credit, totals).
    • Checkout UI shows prorated credit and applied account (payer) credit separately, including remainder and applied amounts.
  • Localization

    • Added localized message for credit remainder in billing displays.
  • Tests

    • Added tests covering rendering of credit details in checkout.

@vercel

vercelBot commented Feb 5, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 17, 2026 6:18pm

Request Review

@changeset-bot

changeset-botBot commented Feb 5, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 113dbcc

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

This PR includes changesets to release 20 packages
NameType
@clerk/localizationsMinor
@clerk/clerk-jsMinor
@clerk/sharedMinor
@clerk/uiMinor
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch

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

@dstaleydstaley changed the title feat(clerk-js,localizations,shared,ui): Add support for account credi…feat(clerk-js,localizations,shared,ui): Add support for creditsFeb 13, 2026
@coderabbitai

coderabbitaiBot commented Feb 13, 2026

Copy link
Copy Markdown
Contributor

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉


📝 Walkthrough

Walkthrough

Adds account credit support: a changeset updating multiple packages; new JSON and TypeScript types for proration, payer credit, and consolidated credits; credits fields added to BillingCheckoutTotals and BillingSubscriptionItem JSON types; billing parser updated to handle credits; a new sandbox MSW scenario CheckoutAccountCredit exported; localization key payerCreditRemainder added; Checkout UI updated to render prorated and payer-applied credits; tests updated/added to cover credit display.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately captures the main change: adding support for credits across multiple packages (clerk-js, localizations, shared, ui) as described in the changeset and file modifications.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


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

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

38-96: ⚠️ Potential issue | 🟠 Major

Fix proration credit rendering to avoid “undefined” output and preserve legacy credits.

The condition is driven by totals.credits.proration, but the rendered amount comes from totals.credit. If the new credits object exists while totals.credit is null, the UI shows “- undefined”. If only the legacy credit exists, the proration credit disappears. Use a single proration amount source (credits fallback to legacy) for both the condition and display.

Suggested fix
- const showProratedCredit = !!totals.credits?.proration?.amount && totals.credits.proration.amount.amount > 0;+ const prorationAmount = totals.credits?.proration?.amount ?? totals.credit;+ const showProratedCredit = !!prorationAmount?.amount && prorationAmount.amount > 0;
...
- <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />+ <LineItems.Description+ text={`- ${prorationAmount?.currencySymbol}${prorationAmount?.amountFormatted}`}+ />
🤖 Fix all issues with AI agents
In @.changeset/shy-loops-type.md:
- Around line 1-8: Add unit and integration tests covering the new
account-credit checkout flow: write unit tests for the parsing function (e.g.,
parseAccountCredits) to confirm it parses valid/invalid payloads and edge cases,
and add React Testing Library integration tests for the Checkout/Cart component
(e.g., Checkout, AccountCreditsBadge or AccountCreditsDisplay) to assert the UI
shows the credit amount, that totals are recalculated when credits apply, and
that error/zero-credit states render correctly; mock the API/props that supply
credits and include test cases for applying credits, removing credits, and
display formatting to prevent regressions.

Comment on lines +1 to +8
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
'@clerk/ui': minor
---

Add support for account credits in checkout.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add tests covering account-credit checkout behavior.

No tests were added/updated for the new credits flow (parsing + UI display). Please add coverage to prevent regressions.
As per coding guidelines: "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Prompt for AI Agents
In @.changeset/shy-loops-type.md around lines 1 - 8, Add unit and integration
tests covering the new account-credit checkout flow: write unit tests for the
parsing function (e.g., parseAccountCredits) to confirm it parses valid/invalid
payloads and edge cases, and add React Testing Library integration tests for the
Checkout/Cart component (e.g., Checkout, AccountCreditsBadge or
AccountCreditsDisplay) to assert the UI shows the credit amount, that totals are
recalculated when credits apply, and that error/zero-credit states render
correctly; mock the API/props that supply credits and include test cases for
applying credits, removing credits, and display formatting to prevent
regressions.

@pkg-pr-new

pkg-pr-newBot commented Feb 13, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

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

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 113dbcc

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

29-32: ⚠️ Potential issue | 🟠 Major

Add tests for the new credit rendering paths.

This PR introduces new credit logic (proration vs payer credits) but no tests were added/updated to cover it. Please add tests before merge.

As per coding guidelines, "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/Checkout/CheckoutForm.tsx`:
- Around line 84-88: The UI is rendering the prorated credit using the old field
totals.credit; update the rendering to read from the new credits structure used
by showProratedCredit (totals.credits.proration) so the displayed currency
symbol and formatted amount come from totals.credits.proration (e.g., replace
references to totals.credit in the LineItems.Description inside CheckoutForm.tsx
with the corresponding totals.credits.proration.currencySymbol and
totals.credits.proration.amountFormatted or their exact field names).

Comment threadpackages/ui/src/components/Checkout/CheckoutForm.tsx

@mauricioabreumauricioabreu left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@dstaley
dstaley merged commit 92599c7 into mainFeb 17, 2026
41 checks passed
@dstaley
dstaley deleted the ds.feat/checkout-account-credit branch February 17, 2026 22:41
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dstaley@mauricioabreu@bratsos
, '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

feat(clerk-js,localizations,shared,ui): Add support for credits - #7776

Merged
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit
Feb 17, 2026
Merged

feat(clerk-js,localizations,shared,ui): Add support for credits#7776
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit

Conversation

@dstaley

@dstaleydstaley commented Feb 5, 2026

Copy link
Copy Markdown
Member

Description

This PR adds support for the new account credit feature in checkout. If the current user or organization has a credit balance, the consumed amount is displayed in the same way that we display proration credits during checkout.

Testing Instructions

  • Checkout locally, run pnpm dev:sandbox to start the sandbox and go to it
  • Open the console
  • run scenario.setScenario(AVAILABLE_SCENARIOS.CheckoutAccountCredit)
  • navigate to the pricing table page
  • click subscribe on any of the plans
  • see credits listed under the subtotal

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

  • New Features

    • Add account credits in checkout with a detailed credits breakdown (proration, payer credit, totals).
    • Checkout UI shows prorated credit and applied account (payer) credit separately, including remainder and applied amounts.
  • Localization

    • Added localized message for credit remainder in billing displays.
  • Tests

    • Added tests covering rendering of credit details in checkout.

@vercel

vercelBot commented Feb 5, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 17, 2026 6:18pm

Request Review

@changeset-bot

changeset-botBot commented Feb 5, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 113dbcc

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

This PR includes changesets to release 20 packages
NameType
@clerk/localizationsMinor
@clerk/clerk-jsMinor
@clerk/sharedMinor
@clerk/uiMinor
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch

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

@dstaleydstaley changed the title feat(clerk-js,localizations,shared,ui): Add support for account credi…feat(clerk-js,localizations,shared,ui): Add support for creditsFeb 13, 2026
@coderabbitai

coderabbitaiBot commented Feb 13, 2026

Copy link
Copy Markdown
Contributor

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉


📝 Walkthrough

Walkthrough

Adds account credit support: a changeset updating multiple packages; new JSON and TypeScript types for proration, payer credit, and consolidated credits; credits fields added to BillingCheckoutTotals and BillingSubscriptionItem JSON types; billing parser updated to handle credits; a new sandbox MSW scenario CheckoutAccountCredit exported; localization key payerCreditRemainder added; Checkout UI updated to render prorated and payer-applied credits; tests updated/added to cover credit display.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately captures the main change: adding support for credits across multiple packages (clerk-js, localizations, shared, ui) as described in the changeset and file modifications.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


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

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

38-96: ⚠️ Potential issue | 🟠 Major

Fix proration credit rendering to avoid “undefined” output and preserve legacy credits.

The condition is driven by totals.credits.proration, but the rendered amount comes from totals.credit. If the new credits object exists while totals.credit is null, the UI shows “- undefined”. If only the legacy credit exists, the proration credit disappears. Use a single proration amount source (credits fallback to legacy) for both the condition and display.

Suggested fix
- const showProratedCredit = !!totals.credits?.proration?.amount && totals.credits.proration.amount.amount > 0;+ const prorationAmount = totals.credits?.proration?.amount ?? totals.credit;+ const showProratedCredit = !!prorationAmount?.amount && prorationAmount.amount > 0;
...
- <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />+ <LineItems.Description+ text={`- ${prorationAmount?.currencySymbol}${prorationAmount?.amountFormatted}`}+ />
🤖 Fix all issues with AI agents
In @.changeset/shy-loops-type.md:
- Around line 1-8: Add unit and integration tests covering the new
account-credit checkout flow: write unit tests for the parsing function (e.g.,
parseAccountCredits) to confirm it parses valid/invalid payloads and edge cases,
and add React Testing Library integration tests for the Checkout/Cart component
(e.g., Checkout, AccountCreditsBadge or AccountCreditsDisplay) to assert the UI
shows the credit amount, that totals are recalculated when credits apply, and
that error/zero-credit states render correctly; mock the API/props that supply
credits and include test cases for applying credits, removing credits, and
display formatting to prevent regressions.

Comment on lines +1 to +8
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
'@clerk/ui': minor
---

Add support for account credits in checkout.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add tests covering account-credit checkout behavior.

No tests were added/updated for the new credits flow (parsing + UI display). Please add coverage to prevent regressions.
As per coding guidelines: "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Prompt for AI Agents
In @.changeset/shy-loops-type.md around lines 1 - 8, Add unit and integration
tests covering the new account-credit checkout flow: write unit tests for the
parsing function (e.g., parseAccountCredits) to confirm it parses valid/invalid
payloads and edge cases, and add React Testing Library integration tests for the
Checkout/Cart component (e.g., Checkout, AccountCreditsBadge or
AccountCreditsDisplay) to assert the UI shows the credit amount, that totals are
recalculated when credits apply, and that error/zero-credit states render
correctly; mock the API/props that supply credits and include test cases for
applying credits, removing credits, and display formatting to prevent
regressions.

@pkg-pr-new

pkg-pr-newBot commented Feb 13, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

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

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 113dbcc

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

29-32: ⚠️ Potential issue | 🟠 Major

Add tests for the new credit rendering paths.

This PR introduces new credit logic (proration vs payer credits) but no tests were added/updated to cover it. Please add tests before merge.

As per coding guidelines, "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/Checkout/CheckoutForm.tsx`:
- Around line 84-88: The UI is rendering the prorated credit using the old field
totals.credit; update the rendering to read from the new credits structure used
by showProratedCredit (totals.credits.proration) so the displayed currency
symbol and formatted amount come from totals.credits.proration (e.g., replace
references to totals.credit in the LineItems.Description inside CheckoutForm.tsx
with the corresponding totals.credits.proration.currencySymbol and
totals.credits.proration.amountFormatted or their exact field names).

Comment threadpackages/ui/src/components/Checkout/CheckoutForm.tsx

@mauricioabreumauricioabreu left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@dstaley
dstaley merged commit 92599c7 into mainFeb 17, 2026
41 checks passed
@dstaley
dstaley deleted the ds.feat/checkout-account-credit branch February 17, 2026 22:41
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dstaley@mauricioabreu@bratsos
, '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

feat(clerk-js,localizations,shared,ui): Add support for credits - #7776

Merged
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit
Feb 17, 2026
Merged

feat(clerk-js,localizations,shared,ui): Add support for credits#7776
dstaley merged 8 commits into
mainfrom
ds.feat/checkout-account-credit

Conversation

@dstaley

@dstaleydstaley commented Feb 5, 2026

Copy link
Copy Markdown
Member

Description

This PR adds support for the new account credit feature in checkout. If the current user or organization has a credit balance, the consumed amount is displayed in the same way that we display proration credits during checkout.

Testing Instructions

  • Checkout locally, run pnpm dev:sandbox to start the sandbox and go to it
  • Open the console
  • run scenario.setScenario(AVAILABLE_SCENARIOS.CheckoutAccountCredit)
  • navigate to the pricing table page
  • click subscribe on any of the plans
  • see credits listed under the subtotal

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

  • New Features

    • Add account credits in checkout with a detailed credits breakdown (proration, payer credit, totals).
    • Checkout UI shows prorated credit and applied account (payer) credit separately, including remainder and applied amounts.
  • Localization

    • Added localized message for credit remainder in billing displays.
  • Tests

    • Added tests covering rendering of credit details in checkout.

@vercel

vercelBot commented Feb 5, 2026

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentFeb 17, 2026 6:18pm

Request Review

@changeset-bot

changeset-botBot commented Feb 5, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 113dbcc

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

This PR includes changesets to release 20 packages
NameType
@clerk/localizationsMinor
@clerk/clerk-jsMinor
@clerk/sharedMinor
@clerk/uiMinor
@clerk/reactPatch
@clerk/chrome-extensionPatch
@clerk/expoPatch
@clerk/agent-toolkitPatch
@clerk/astroPatch
@clerk/backendPatch
@clerk/expo-passkeysPatch
@clerk/expressPatch
@clerk/fastifyPatch
@clerk/mswPatch
@clerk/nextjsPatch
@clerk/nuxtPatch
@clerk/react-routerPatch
@clerk/tanstack-react-startPatch
@clerk/testingPatch
@clerk/vuePatch

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

@dstaleydstaley changed the title feat(clerk-js,localizations,shared,ui): Add support for account credi…feat(clerk-js,localizations,shared,ui): Add support for creditsFeb 13, 2026
@coderabbitai

coderabbitaiBot commented Feb 13, 2026

Copy link
Copy Markdown
Contributor

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉


📝 Walkthrough

Walkthrough

Adds account credit support: a changeset updating multiple packages; new JSON and TypeScript types for proration, payer credit, and consolidated credits; credits fields added to BillingCheckoutTotals and BillingSubscriptionItem JSON types; billing parser updated to handle credits; a new sandbox MSW scenario CheckoutAccountCredit exported; localization key payerCreditRemainder added; Checkout UI updated to render prorated and payer-applied credits; tests updated/added to cover credit display.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check nameStatusExplanationResolution
Docstring Coverage⚠️ WarningDocstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title check✅ PassedThe title accurately captures the main change: adding support for credits across multiple packages (clerk-js, localizations, shared, ui) as described in the changeset and file modifications.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


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

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

38-96: ⚠️ Potential issue | 🟠 Major

Fix proration credit rendering to avoid “undefined” output and preserve legacy credits.

The condition is driven by totals.credits.proration, but the rendered amount comes from totals.credit. If the new credits object exists while totals.credit is null, the UI shows “- undefined”. If only the legacy credit exists, the proration credit disappears. Use a single proration amount source (credits fallback to legacy) for both the condition and display.

Suggested fix
- const showProratedCredit = !!totals.credits?.proration?.amount && totals.credits.proration.amount.amount > 0;+ const prorationAmount = totals.credits?.proration?.amount ?? totals.credit;+ const showProratedCredit = !!prorationAmount?.amount && prorationAmount.amount > 0;
...
- <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />+ <LineItems.Description+ text={`- ${prorationAmount?.currencySymbol}${prorationAmount?.amountFormatted}`}+ />
🤖 Fix all issues with AI agents
In @.changeset/shy-loops-type.md:
- Around line 1-8: Add unit and integration tests covering the new
account-credit checkout flow: write unit tests for the parsing function (e.g.,
parseAccountCredits) to confirm it parses valid/invalid payloads and edge cases,
and add React Testing Library integration tests for the Checkout/Cart component
(e.g., Checkout, AccountCreditsBadge or AccountCreditsDisplay) to assert the UI
shows the credit amount, that totals are recalculated when credits apply, and
that error/zero-credit states render correctly; mock the API/props that supply
credits and include test cases for applying credits, removing credits, and
display formatting to prevent regressions.

Comment on lines +1 to +8
---
'@clerk/localizations': minor
'@clerk/clerk-js': minor
'@clerk/shared': minor
'@clerk/ui': minor
---

Add support for account credits in checkout.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add tests covering account-credit checkout behavior.

No tests were added/updated for the new credits flow (parsing + UI display). Please add coverage to prevent regressions.
As per coding guidelines: "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Prompt for AI Agents
In @.changeset/shy-loops-type.md around lines 1 - 8, Add unit and integration
tests covering the new account-credit checkout flow: write unit tests for the
parsing function (e.g., parseAccountCredits) to confirm it parses valid/invalid
payloads and edge cases, and add React Testing Library integration tests for the
Checkout/Cart component (e.g., Checkout, AccountCreditsBadge or
AccountCreditsDisplay) to assert the UI shows the credit amount, that totals are
recalculated when credits apply, and that error/zero-credit states render
correctly; mock the API/props that supply credits and include test cases for
applying credits, removing credits, and display formatting to prevent
regressions.

@pkg-pr-new

pkg-pr-newBot commented Feb 13, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/agent-toolkit

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

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 113dbcc

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/ui/src/components/Checkout/CheckoutForm.tsx (1)

29-32: ⚠️ Potential issue | 🟠 Major

Add tests for the new credit rendering paths.

This PR introduces new credit logic (proration vs payer credits) but no tests were added/updated to cover it. Please add tests before merge.

As per coding guidelines, "If there are no tests added or modified as part of the PR, please suggest that tests be added to cover the changes."

🤖 Fix all issues with AI agents
In `@packages/ui/src/components/Checkout/CheckoutForm.tsx`:
- Around line 84-88: The UI is rendering the prorated credit using the old field
totals.credit; update the rendering to read from the new credits structure used
by showProratedCredit (totals.credits.proration) so the displayed currency
symbol and formatted amount come from totals.credits.proration (e.g., replace
references to totals.credit in the LineItems.Description inside CheckoutForm.tsx
with the corresponding totals.credits.proration.currencySymbol and
totals.credits.proration.amountFormatted or their exact field names).

Comment threadpackages/ui/src/components/Checkout/CheckoutForm.tsx

@mauricioabreumauricioabreu left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯

@dstaley
dstaley merged commit 92599c7 into mainFeb 17, 2026
41 checks passed
@dstaley
dstaley deleted the ds.feat/checkout-account-credit branch February 17, 2026 22:41
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants

@dstaley@mauricioabreu@bratsos