clerk · dstaley · Apr 28, 2026 · May 4, 2026 · May 4, 2026
diff --git a/.changeset/good-ads-greet.md b/.changeset/good-ads-greet.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': minor
+---
+
+Add support for rendering per-seat costs in checkout
diff --git a/.changeset/khaki-hairs-punch.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'
@@ -129,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', {
@@ -140,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>

diff --git 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,
           })}
         >