From e9c2ca9fea4319d6cf8286afbfede077694f786a Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Tue, 28 Apr 2026 12:18:53 -0500
Subject: [PATCH 1/3] feat(ui): Add per-seat costs to checkout totals

---
 .../src/components/Checkout/CheckoutForm.tsx  | 36 ++++++++++++++++++-
 packages/ui/src/elements/LineItems.tsx        |  1 -
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/Checkout/CheckoutForm.tsx b/packages/ui/src/components/Checkout/CheckoutForm.tsx
index 2a6dc9c4122..da366388493 100644
--- a/packages/ui/src/components/Checkout/CheckoutForm.tsx
+++ b/packages/ui/src/components/Checkout/CheckoutForm.tsx
@@ -48,10 +48,34 @@ export const CheckoutForm = withCardStateProvider(() => {
       : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         plan.annualMonthlyFee!;
 
-  const descriptionElements = [];
+  const seatPerUnitTotal = totals.perUnitTotals?.find(({ name }) => name === 'seats');
+  const seatPerUnitTotalTiers = seatPerUnitTotal?.tiers ?? [];
+  const firstSeatTotalTier = seatPerUnitTotalTiers[0];
+  const secondSeatTotalTier = seatPerUnitTotalTiers[1];
+  const paidSeatTotalTier =
+    firstSeatTotalTier?.feePerBlock.amount &&
+    firstSeatTotalTier.feePerBlock.amount > 0 &&
+    seatPerUnitTotalTiers.length === 1
+      ? firstSeatTotalTier
+      : secondSeatTotalTier?.feePerBlock.amount && secondSeatTotalTier.feePerBlock.amount > 0
+        ? secondSeatTotalTier
+        : undefined;
+
+  const descriptionElements: Array<ReturnType<typeof localizationKeys>> = [];
   if (planPeriod === 'annual') {
     descriptionElements.push(localizationKeys('billing.billedAnnually'));
   }
+  if (
+    seatPerUnitTotalTiers.length > 1 &&
+    firstSeatTotalTier?.feePerBlock.amount === 0 &&
+    firstSeatTotalTier.quantity !== null
+  ) {
+    descriptionElements.push(
+      localizationKeys('billing.pricingTable.seatCost.includedSeats', {
+        includedSeats: firstSeatTotalTier.quantity,
+      }),
+    );
+  }
   const seatUnitPrice = getSeatUnitPrice(plan);
   if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
     descriptionElements.push(
@@ -91,6 +115,16 @@ export const CheckoutForm = withCardStateProvider(() => {
               suffix={localizationKeys('billing.checkout.perMonth')}
             />
           </LineItems.Group>
+          {paidSeatTotalTier && paidSeatTotalTier.quantity !== null && (
+            <LineItems.Group borderTop>
+              <LineItems.Title title={localizationKeys('billing.seats')} />
+              <LineItems.Description
+                prefix={`${paidSeatTotalTier.quantity} x`}
+                text={`${paidSeatTotalTier.feePerBlock.currencySymbol}${paidSeatTotalTier.feePerBlock.amountFormatted}`}
+                suffix={localizationKeys('billing.checkout.perMonth')}
+              />
+            </LineItems.Group>
+          )}
           <LineItems.Group
             borderTop
             variant='tertiary'
diff --git a/packages/ui/src/elements/LineItems.tsx b/packages/ui/src/elements/LineItems.tsx
index ab5173392ba..c6e35f6938f 100644
--- a/packages/ui/src/elements/LineItems.tsx
+++ b/packages/ui/src/elements/LineItems.tsx
@@ -112,7 +112,6 @@ const Title = React.forwardRef<HTMLTableCellElement, TitleProps>(({ title, descr
         <Span
           sx={t => ({
             display: 'inline-flex',
-            alignItems: 'center',
             gap: t.space.$1,
           })}
         >

From f77bda61ded1fd7efbb330822156cb78cfa5c251 Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Mon, 4 May 2026 10:34:50 -0500
Subject: [PATCH 2/3] feat(clerk-js,localizations,shared,ui): Add support for
 total_due_per_period

---
 .changeset/khaki-hairs-punch.md                      | 8 ++++++++
 packages/clerk-js/src/utils/billing.ts               | 3 +++
 packages/localizations/src/en-US.ts                  | 1 +
 packages/shared/src/types/billing.ts                 | 4 ++++
 packages/shared/src/types/json.ts                    | 1 +
 packages/shared/src/types/localization.ts            | 1 +
 packages/ui/src/components/Checkout/CheckoutForm.tsx | 9 ++++++++-
 7 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/khaki-hairs-punch.md

diff --git a/.changeset/khaki-hairs-punch.md b/.changeset/khaki-hairs-punch.md
new file mode 100644
index 00000000000..7b4e9fe5ebc
--- /dev/null
+++ b/.changeset/khaki-hairs-punch.md
@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': minor
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/ui': minor
+---
+
+Add support for total due per period to checkout
diff --git a/packages/clerk-js/src/utils/billing.ts b/packages/clerk-js/src/utils/billing.ts
index 77b28782197..e994843361f 100644
--- a/packages/clerk-js/src/utils/billing.ts
+++ b/packages/clerk-js/src/utils/billing.ts
@@ -77,6 +77,9 @@ export const billingTotalsFromJSON = <T extends BillingStatementTotalsJSON | Bil
   if ('total_due_now' in data) {
     totals.totalDueNow = billingMoneyAmountFromJSON(data.total_due_now);
   }
+  if ('total_due_per_period' in data) {
+    totals.totalDuePerPeriod = billingMoneyAmountFromJSON(data.total_due_per_period);
+  }
 
   if ('total_due_after_free_trial' in data) {
     totals.totalDueAfterFreeTrial = data.total_due_after_free_trial
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 3b5b3e1bc61..886cc65ff7a 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -110,6 +110,7 @@ export const enUS: LocalizationResource = {
       title__subscriptionSuccessful: 'Success!',
       title__trialSuccess: 'Trial successfully started!',
       totalDueAfterTrial: 'Total Due after trial ends in {{days}} days',
+      totalDuePerPeriod: 'Total Due per period',
     },
     credit: 'Credit',
     prorationCredit: 'Prorated credit',
diff --git a/packages/shared/src/types/billing.ts b/packages/shared/src/types/billing.ts
index 786887fd2b6..151f72db0d5 100644
--- a/packages/shared/src/types/billing.ts
+++ b/packages/shared/src/types/billing.ts
@@ -840,6 +840,10 @@ export interface BillingCheckoutTotals {
    * The amount that needs to be immediately paid to complete the checkout.
    */
   totalDueNow: BillingMoneyAmount;
+  /**
+   * The amount that will be charged per period for this subscription.
+   */
+  totalDuePerPeriod: BillingMoneyAmount;
   /**
    * Any credits (like account balance or promo credits) that are being applied to the checkout.
    */
diff --git a/packages/shared/src/types/json.ts b/packages/shared/src/types/json.ts
index 7c91ed39498..4f26f9b7c8c 100644
--- a/packages/shared/src/types/json.ts
+++ b/packages/shared/src/types/json.ts
@@ -860,6 +860,7 @@ export interface BillingCheckoutTotalsJSON {
    */
   per_unit_totals?: BillingPerUnitTotalJSON[];
   total_due_now: BillingMoneyAmountJSON;
+  total_due_per_period: BillingMoneyAmountJSON;
   credit: BillingMoneyAmountJSON | null;
   credits: BillingCreditsJSON | null;
   account_credit: BillingMoneyAmountJSON | null;
diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts
index 222509565bb..b05f6a709e6 100644
--- a/packages/shared/src/types/localization.ts
+++ b/packages/shared/src/types/localization.ts
@@ -301,6 +301,7 @@ export type __internal_LocalizationResource = {
       downgradeNotice: LocalizationValue;
       pastDueNotice: LocalizationValue;
       totalDueAfterTrial: LocalizationValue<'days'>;
+      totalDuePerPeriod: LocalizationValue;
       perMonth: LocalizationValue;
     };
   };
diff --git a/packages/ui/src/components/Checkout/CheckoutForm.tsx b/packages/ui/src/components/Checkout/CheckoutForm.tsx
index da366388493..f5933e69465 100644
--- a/packages/ui/src/components/Checkout/CheckoutForm.tsx
+++ b/packages/ui/src/components/Checkout/CheckoutForm.tsx
@@ -163,7 +163,7 @@ export const CheckoutForm = withCardStateProvider(() => {
             </LineItems.Group>
           )}
 
-          {!!freeTrialEndsAt && !!plan.freeTrialDays && totals.totalDueAfterFreeTrial && (
+          {!!freeTrialEndsAt && !!plan.freeTrialDays && totals.totalDueAfterFreeTrial ? (
             <LineItems.Group variant='tertiary'>
               <LineItems.Title
                 title={localizationKeys('billing.checkout.totalDueAfterTrial', {
@@ -174,6 +174,13 @@ export const CheckoutForm = withCardStateProvider(() => {
                 text={`${totals.totalDueAfterFreeTrial.currencySymbol}${totals.totalDueAfterFreeTrial.amountFormatted}`}
               />
             </LineItems.Group>
+          ) : (
+            <LineItems.Group variant='tertiary'>
+              <LineItems.Title title={localizationKeys('billing.checkout.totalDuePerPeriod')} />
+              <LineItems.Description
+                text={`${totals.totalDuePerPeriod.currencySymbol}${totals.totalDuePerPeriod.amountFormatted}`}
+              />
+            </LineItems.Group>
           )}
 
           <LineItems.Group borderTop>

From eadf76119de32887aa92096754dd7ed77d9dbd15 Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Mon, 4 May 2026 10:39:06 -0500
Subject: [PATCH 3/3] chore(repo): Add changeset

---
 .changeset/good-ads-greet.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/good-ads-greet.md

diff --git a/.changeset/good-ads-greet.md b/.changeset/good-ads-greet.md
new file mode 100644
index 00000000000..06dfb32119a
--- /dev/null
+++ b/.changeset/good-ads-greet.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': minor
+---
+
+Add support for rendering per-seat costs in checkout