Skip to content

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

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

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

Conversation

@dstaley
Copy link
Member

@dstaley dstaley commented Feb 5, 2026

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
Copy link

vercel bot commented Feb 5, 2026

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

Project Deployment Actions Updated (UTC)
clerk-js-sandbox Ready Ready Preview, Comment Feb 17, 2026 6:18pm

Request Review

@changeset-bot
Copy link

changeset-bot bot commented Feb 5, 2026

🦋 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
Name Type
@clerk/localizations Minor
@clerk/clerk-js Minor
@clerk/shared Minor
@clerk/ui Minor
@clerk/react Patch
@clerk/chrome-extension Patch
@clerk/expo Patch
@clerk/agent-toolkit Patch
@clerk/astro Patch
@clerk/backend Patch
@clerk/expo-passkeys Patch
@clerk/express Patch
@clerk/fastify Patch
@clerk/msw Patch
@clerk/nextjs Patch
@clerk/nuxt Patch
@clerk/react-router Patch
@clerk/tanstack-react-start Patch
@clerk/testing Patch
@clerk/vue Patch

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

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

@dstaley dstaley changed the title feat(clerk-js,localizations,shared,ui): Add support for account credi… feat(clerk-js,localizations,shared,ui): Add support for credits Feb 13, 2026
@dstaley dstaley marked this pull request as ready for review February 13, 2026 20:01
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 13, 2026

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 name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring 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 name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The 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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

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
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
Copy link

pkg-pr-new bot commented Feb 13, 2026

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

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

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).

Copy link
Contributor

@mauricioabreu mauricioabreu left a comment

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 main Feb 17, 2026
41 checks passed
@dstaley dstaley deleted the ds.feat/checkout-account-credit branch February 17, 2026 22:41
Sign up for free to 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