diff --git a/.changeset/shaky-seas-dream.md b/.changeset/shaky-seas-dream.md
new file mode 100644
index 00000000000..87109eff393
--- /dev/null
+++ 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
index 0adcde5ca77..24ae8062b1a 100644
--- 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
index fdd2087d7f4..8b2772ce395 100644
--- 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 = ({
)}
+ {showPastDue && (
+
+
+
+
+ )}
diff --git a/packages/clerk-js/src/utils/commerce.ts b/packages/clerk-js/src/utils/commerce.ts
index ac39f166150..1430f752b34 100644
--- a/packages/clerk-js/src/utils/commerce.ts
+++ b/packages/clerk-js/src/utils/commerce.ts
@@ -30,6 +30,10 @@ export const commerceTotalsFromJSON =