clerk · octoper · May 27, 2025 · May 27, 2025 · May 27, 2025 · May 27, 2025
diff --git a/.changeset/shaky-seas-dream.md b/.changeset/shaky-seas-dream.md
@@ -0,0 +1,7 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add "Past Due" amount on checkout flow when applicable
diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
@@ -21,7 +21,7 @@
  { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
  { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" },
  { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" },
- { "path": "./dist/checkout*.js", "maxSize": "6.52KB" },
+ { "path": "./dist/checkout*.js", "maxSize": "6.65KB" },
  { "path": "./dist/paymentSources*.js", "maxSize": "9.06KB" },
  { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" },
  { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" },

diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -31,6 +31,7 @@ export const CheckoutForm = ({
 }) => {
  const { plan, planPeriod, totals, isImmediatePlanChange } = checkout;
  const showCredits = !!totals.credit?.amount && totals.credit.amount > 0;
+ const showPastDue = !!totals.pastDue?.amount && totals.pastDue.amount > 0;
  const showDowngradeInfo = !isImmediatePlanChange;
 
  return (
@@ -69,6 +70,12 @@ export const CheckoutForm = ({
  <LineItems.Description text={`- ${totals.credit?.currencySymbol}${totals.credit?.amountFormatted}`} />
  </LineItems.Group>
  )}
+ {showPastDue && (
+ <LineItems.Group variant='tertiary'>
+ <LineItems.Title title={localizationKeys('commerce.pastDue')} />
+ <LineItems.Description text={`${totals.pastDue?.currencySymbol}${totals.pastDue?.amountFormatted}`} />
+ </LineItems.Group>
+ )}
  <LineItems.Group borderTop>
  <LineItems.Title title={localizationKeys('commerce.totalDueToday')} />
  <LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />

diff --git a/packages/clerk-js/src/utils/commerce.ts b/packages/clerk-js/src/utils/commerce.ts
@@ -30,6 +30,10 @@ export const commerceTotalsFromJSON = <T extends CommerceStatementTotalsJSON | C
  // @ts-ignore
  totals['credit'] = commerceMoneyFromJSON(data.credit);
  }
+ if ('past_due' in data) {
+ // @ts-ignore
+ totals['pastDue'] = commerceMoneyFromJSON(data.past_due);
+ }
 
  return totals as T extends { total_due_now: CommerceMoneyJSON } ? CommerceCheckoutTotals : CommerceStatementTotals;
 };
diff --git a/packages/localizations/src/ar-SA.ts b/packages/localizations/src/ar-SA.ts
@@ -71,6 +71,7 @@ export const arSA: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const arSA: LocalizationResource = {
  sameDay: "اليوم في {{ date | timeString('en-US') }}",
  },
  dividerText: 'أو',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'أختر طريقة أخرى',
  footerPageLink__help: 'المساعدة',
  footerPageLink__privacy: 'الخصوصية',

diff --git a/packages/localizations/src/be-BY.ts b/packages/localizations/src/be-BY.ts
@@ -71,6 +71,7 @@ export const beBY: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const beBY: LocalizationResource = {
  sameDay: "Сёння ў {{ date | timeString('be-BY') }}",
  },
  dividerText: 'ці',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Выкарыстаць іншы метад',
  footerPageLink__help: 'Дапамога',
  footerPageLink__privacy: 'Приватнасць',

diff --git a/packages/localizations/src/bg-BG.ts b/packages/localizations/src/bg-BG.ts
@@ -71,6 +71,7 @@ export const bgBG: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const bgBG: LocalizationResource = {
  sameDay: "Днес в {{ date | timeString('bg-BG') }}",
  },
  dividerText: 'или',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Използвайте друг метод',
  footerPageLink__help: 'Помощ',
  footerPageLink__privacy: 'Поверителност',

diff --git a/packages/localizations/src/ca-ES.ts b/packages/localizations/src/ca-ES.ts
@@ -71,6 +71,7 @@ export const caES: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const caES: LocalizationResource = {
  sameDay: "Avui a les {{ date | timeString('en-US') }}",
  },
  dividerText: 'o',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Utilitza un altre mètode',
  footerPageLink__help: 'Ajuda',
  footerPageLink__privacy: 'Privacitat',

diff --git a/packages/localizations/src/cs-CZ.ts b/packages/localizations/src/cs-CZ.ts
@@ -71,6 +71,7 @@ export const csCZ: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const csCZ: LocalizationResource = {
  sameDay: "Dnes v {{ date | timeString('cs-CZ') }}",
  },
  dividerText: 'nebo',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Použít jinou metodu',
  footerPageLink__help: 'Nápověda',
  footerPageLink__privacy: 'Ochrana soukromí',

diff --git a/packages/localizations/src/da-DK.ts b/packages/localizations/src/da-DK.ts
@@ -71,6 +71,7 @@ export const daDK: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const daDK: LocalizationResource = {
  sameDay: "I dag: {{ date | timeString('en-US') }}",
  },
  dividerText: 'eller',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Brug en anden metode',
  footerPageLink__help: 'Hjælp',
  footerPageLink__privacy: 'Privatliv',

diff --git a/packages/localizations/src/de-DE.ts b/packages/localizations/src/de-DE.ts
@@ -74,6 +74,7 @@ export const deDE: LocalizationResource = {
  manageSubscription: 'Mitgliedschaft verwalten',
  month: 'Monat',
  monthly: 'Monatlich',
+ pastDue: undefined,
  pay: '{{amount}} bezahlen',
  paymentMethods: 'Zahlungsmethoden',
  paymentSource: {
@@ -122,6 +123,7 @@ export const deDE: LocalizationResource = {
  sameDay: "Heute um {{ date | timeString('de-DE') }}",
  },
  dividerText: 'oder',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Verwenden Sie eine andere Methode',
  footerPageLink__help: 'Hilfe',
  footerPageLink__privacy: 'Privatsphäre',

diff --git a/packages/localizations/src/el-GR.ts b/packages/localizations/src/el-GR.ts
@@ -71,6 +71,7 @@ export const elGR: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const elGR: LocalizationResource = {
  sameDay: "Σήμερα στις {{ date | timeString('el') }}",
  },
  dividerText: 'ή',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Χρησιμοποιήστε άλλη μέθοδο',
  footerPageLink__help: 'Βοήθεια',
  footerPageLink__privacy: 'Προστασία προσωπικών δεδομένων',

diff --git a/packages/localizations/src/en-GB.ts b/packages/localizations/src/en-GB.ts
@@ -71,6 +71,7 @@ export const enGB: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const enGB: LocalizationResource = {
  sameDay: "Today at {{ date | timeString('en-GB') }}",
  },
  dividerText: 'or',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Use another method',
  footerPageLink__help: 'Help',
  footerPageLink__privacy: 'Privacy',

diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
@@ -62,6 +62,7 @@ export const enUS: LocalizationResource = {
  manageSubscription: 'Manage subscription',
  month: 'Month',
  monthly: 'Monthly',
+ pastDue: 'Past due',
  pay: 'Pay {{amount}}',
  paymentMethods: 'Payment Methods',
  paymentSource: {
@@ -110,8 +111,8 @@ export const enUS: LocalizationResource = {
  sameDay: "Today at {{ date | timeString('en-US') }}",
  },
  dividerText: 'or',
- footerActionLink__useAnotherMethod: 'Use another method',
  footerActionLink__alternativePhoneCodeProvider: 'Send code via SMS instead',
+ footerActionLink__useAnotherMethod: 'Use another method',
  footerPageLink__help: 'Help',
  footerPageLink__privacy: 'Privacy',
  footerPageLink__terms: 'Terms',

diff --git a/packages/localizations/src/es-ES.ts b/packages/localizations/src/es-ES.ts
@@ -71,6 +71,7 @@ export const esES: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const esES: LocalizationResource = {
  sameDay: "Hoy a las {{ date | timeString('es-ES') }}",
  },
  dividerText: 'o',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Usar otro método',
  footerPageLink__help: 'Ayuda',
  footerPageLink__privacy: 'Privacidad',

diff --git a/packages/localizations/src/es-MX.ts b/packages/localizations/src/es-MX.ts
@@ -71,6 +71,7 @@ export const esMX: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const esMX: LocalizationResource = {
  sameDay: "Hoy a las {{ date | timeString('es-ES') }}",
  },
  dividerText: 'o',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Usar otro método',
  footerPageLink__help: 'Ayuda',
  footerPageLink__privacy: 'Privacidad',

diff --git a/packages/localizations/src/fi-FI.ts b/packages/localizations/src/fi-FI.ts
@@ -71,6 +71,7 @@ export const fiFI: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const fiFI: LocalizationResource = {
  sameDay: "Tänään klo {{ date | timeString('fi-FI') }}",
  },
  dividerText: 'tai',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Käytä toista tapaa',
  footerPageLink__help: 'Apua',
  footerPageLink__privacy: 'Tietosuoja',

diff --git a/packages/localizations/src/fr-FR.ts b/packages/localizations/src/fr-FR.ts
@@ -71,6 +71,7 @@ export const frFR: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const frFR: LocalizationResource = {
  sameDay: "Aujourd'hui à {{ date | timeString('fr-FR') }}",
  },
  dividerText: 'ou',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Utiliser une autre méthode',
  footerPageLink__help: 'Aide',
  footerPageLink__privacy: 'Vie privée',

diff --git a/packages/localizations/src/he-IL.ts b/packages/localizations/src/he-IL.ts
@@ -71,6 +71,7 @@ export const heIL: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const heIL: LocalizationResource = {
  sameDay: "היום ב-{{ date | timeString('iw') }}",
  },
  dividerText: 'או',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'השתמש בשיטה אחרת',
  footerPageLink__help: 'עזרה',
  footerPageLink__privacy: 'פרטיות',

diff --git a/packages/localizations/src/hr-HR.ts b/packages/localizations/src/hr-HR.ts
@@ -71,6 +71,7 @@ export const hrHR: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const hrHR: LocalizationResource = {
  sameDay: "Danas u {{ date | timeString('hr-HR') }}",
  },
  dividerText: 'ili',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Koristite drugu metodu',
  footerPageLink__help: 'Pomoć',
  footerPageLink__privacy: 'Privatnost',

diff --git a/packages/localizations/src/hu-HU.ts b/packages/localizations/src/hu-HU.ts
@@ -71,6 +71,7 @@ export const huHU: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const huHU: LocalizationResource = {
  sameDay: "Ma {{ date | timeString('hu-HU') }}-kor",
  },
  dividerText: 'vagy',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Másik módszer használata',
  footerPageLink__help: 'Súgó',
  footerPageLink__privacy: 'Adatvédelem',

diff --git a/packages/localizations/src/id-ID.ts b/packages/localizations/src/id-ID.ts
@@ -71,6 +71,7 @@ export const idID: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const idID: LocalizationResource = {
  sameDay: "Hari ini pada {{ date | timeString('id-ID') }}",
  },
  dividerText: 'atau',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Gunakan metode lain',
  footerPageLink__help: 'Bantuan',
  footerPageLink__privacy: 'Privasi',

diff --git a/packages/localizations/src/is-IS.ts b/packages/localizations/src/is-IS.ts
@@ -71,6 +71,7 @@ export const isIS: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const isIS: LocalizationResource = {
  sameDay: "Í dag kl {{ date | timeString('is-IS') }}",
  },
  dividerText: 'eða',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Nota aðra aðferð',
  footerPageLink__help: 'Hjálp',
  footerPageLink__privacy: 'Persónuvernd',

diff --git a/packages/localizations/src/it-IT.ts b/packages/localizations/src/it-IT.ts
@@ -71,6 +71,7 @@ export const itIT: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const itIT: LocalizationResource = {
  sameDay: "Oggi alle {{ date | timeString('it-IT') }}",
  },
  dividerText: 'oppure',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: 'Utilizzo un altro metodo',
  footerPageLink__help: 'Aiuto',
  footerPageLink__privacy: 'Privacy',

diff --git a/packages/localizations/src/ja-JP.ts b/packages/localizations/src/ja-JP.ts
@@ -71,6 +71,7 @@ export const jaJP: LocalizationResource = {
  manageSubscription: undefined,
  month: undefined,
  monthly: undefined,
+ pastDue: undefined,
  pay: undefined,
  paymentMethods: undefined,
  paymentSource: {
@@ -119,6 +120,7 @@ export const jaJP: LocalizationResource = {
  sameDay: "今日の{{ date | timeString('ja-JP') }}に",
  },
  dividerText: 'または',
+ footerActionLink__alternativePhoneCodeProvider: undefined,
  footerActionLink__useAnotherMethod: '別の方法を使用する',
  footerPageLink__help: 'ヘルプ',
  footerPageLink__privacy: 'プライバシー',