feat(commerce): Add past due amount on checkout

[octoper]

Description

This PR adds the Past due amount on checkout when available

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:

[changeset-bot]

🦋 Changeset detected

Latest commit: f26e6e0

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

This PR includes changesets to release 22 packages

Name	Type
@clerk/localizations	Patch
@clerk/clerk-js	Patch
@clerk/types	Patch
@clerk/clerk-react	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch
@clerk/agent-toolkit	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/elements	Patch
@clerk/expo-passkeys	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/nextjs	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/remix	Patch
@clerk/shared	Patch
@clerk/tanstack-react-start	Patch
@clerk/testing	Patch
@clerk/themes	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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clerk-js-sandbox	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 27, 2025 4:29pm

[Copilot]

Pull Request Overview

This PR introduces support for displaying a "Past Due" amount on the checkout page when applicable.

• Added a new pastDue field in localization resources, type definitions, and English translations
• Extended JSON-to-model mapping to include data.past_due
• Updated the checkout form UI to conditionally render the past due line item

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/types/src/localization.ts	Added pastDue key to _LocalizationResource
packages/types/src/commerce.ts	Extended CommerceCheckoutTotals with pastDue
packages/localizations/src/en-US.ts	Added English translation for "Past Due"
packages/clerk-js/src/utils/commerce.ts	Mapped data.past_due to totals.pastDue
packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx	Displayed the past due amount in the checkout summary
.changeset/shaky-seas-dream.md	Added changeset entry for the new past due feature

Comments suppressed due to low confidence (2)

packages/clerk-js/src/utils/commerce.ts:33

• Add a unit test for commerceTotalsFromJSON that supplies a past_due value in the JSON and verifies that totals.pastDue is populated correctly.

if ('past_due' in data) {

packages/localizations/src/en-US.ts:94

• [nitpick] String casing here is inconsistent with other labels (e.g., Total Due Today). Consider using title case: 'Past Due'.

pastDue: 'Past due',

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

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

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/elements

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

@clerk/clerk-expo

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

@clerk/express

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

@clerk/fastify

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

@clerk/expo-passkeys

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

@clerk/nextjs

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

@clerk/localizations

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

@clerk/nuxt

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

@clerk/clerk-react

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

@clerk/react-router

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

@clerk/remix

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/shared

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

@clerk/themes

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

@clerk/types

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

@clerk/upgrade

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

@clerk/vue

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

commit: f26e6e0

[alexcarpenter]

LGTM, generate localizations?

[octoper]

generate localizations?

Will do right before merging to avoid any conflicts!