feat(ui): Add per-seat costs to checkout totals

.changeset/good-ads-greet.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': minor
+---
+
+Add support for rendering per-seat costs in checkout

.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

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

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',

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.
  */

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;

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;
  };
  };

packages/ui/src/components/Checkout/CheckoutForm.tsx

@@ -9,7 +9,12 @@ import { LineItems } from '@/ui/elements/LineItems';
 import { SegmentedControl } from '@/ui/elements/SegmentedControl';
 import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
 import { Tooltip } from '@/ui/elements/Tooltip';
-import { getSeatUnitPrice } from '@/ui/utils/billingPlanSeats';
+import {
+ getCheckoutSeatUnitTotal,
+ getIncludedSeatsUnitTotalTier,
+ getPaidSeatsUnitTotalTier,
+ getSeatUnitPrice,
+} from '@/ui/utils/billingPlanSeats';
 import { handleError } from '@/ui/utils/errorHandler';
 
 import { DevOnly } from '../../common/DevOnly';
@@ -48,10 +53,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
- const descriptionElements = [];
+ const seatPerUnitTotal = getCheckoutSeatUnitTotal(totals);
+ const includedSeatsTier = getIncludedSeatsUnitTotalTier(seatPerUnitTotal);
+ const paidSeatsTier = getPaidSeatsUnitTotalTier(seatPerUnitTotal);
+
+ const descriptionElements: Array<ReturnType<typeof localizationKeys>> = [];
  if (planPeriod === 'annual') {
  descriptionElements.push(localizationKeys('billing.billedAnnually'));
  }
+ if (includedSeatsTier && includedSeatsTier.quantity !== null) {
+ descriptionElements.push(
+ localizationKeys('billing.pricingTable.seatCost.includedSeats', {
+ includedSeats: includedSeatsTier.quantity,
+ }),
+ );
+ }
  const seatUnitPrice = getSeatUnitPrice(plan);
  if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
  descriptionElements.push(
@@ -91,6 +107,16 @@ export const CheckoutForm = withCardStateProvider(() => {
  suffix={localizationKeys('billing.checkout.perMonth')}
  />
  </LineItems.Group>
+ {paidSeatsTier && paidSeatsTier.quantity !== null && (
+ <LineItems.Group borderTop>
+ <LineItems.Title title={localizationKeys('billing.seats')} />
+ <LineItems.Description
+ prefix={`${paidSeatsTier.quantity} x`}
+ text={`${paidSeatsTier.feePerBlock.currencySymbol}${paidSeatsTier.feePerBlock.amountFormatted}`}
+ suffix={localizationKeys('billing.checkout.perMonth')}
+ />
+ </LineItems.Group>
+ )}
  <LineItems.Group
  borderTop
  variant='tertiary'
@@ -129,7 +155,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 +166,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>

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

packages/ui/src/utils/billingPlanSeats.ts

@@ -1,4 +1,10 @@
-import type { BillingPlanResource, BillingPlanUnitPrice, OrganizationResource } from '@clerk/shared/types';
+import type {
+ BillingPerUnitTotal,
+ BillingPerUnitTotalTier,
+ BillingPlanResource,
+ BillingPlanUnitPrice,
+ OrganizationResource,
+} from '@clerk/shared/types';
 
 /**
  * Given a plan, return the unit price for seats.
@@ -17,6 +23,69 @@ export const getSeatUnitPrice = (plan: { unitPrices?: BillingPlanUnitPrice[] }):
  return null;
 };
 
+/**
+ * Similar to the above, given a checkout totals, return the unit price for seats.
+ */
+export const getCheckoutSeatUnitTotal = (checkout: {
+ perUnitTotals?: BillingPerUnitTotal[];
+}): BillingPerUnitTotal | null => {
+ if (!checkout.perUnitTotals?.length) {
+ return null;
+ }
+
+ const seatUnitPrice = checkout.perUnitTotals.find(unitTotal => unitTotal.name === 'seats');
+
+ if (seatUnitPrice) {
+ return seatUnitPrice;
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents per-seat costs. If no tier is found, return null.
+ */
+export const getPaidSeatsUnitTotalTier = (unitTotal: BillingPerUnitTotal | null): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (unitTotal.tiers.length === 1 && unitTotal.tiers[0].feePerBlock.amount > 0) {
+ return unitTotal.tiers[0];
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[1];
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents included seats. If no tier is found, return null.
+ */
+export const getIncludedSeatsUnitTotalTier = (
+ unitTotal: BillingPerUnitTotal | null,
+): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[0];
+ }
+
+ return null;
+};
+
 /**
  * Given a plan, return the seat limit for the plan, or undefined if the plan does not have a seat limit.
  */

.changeset/good-ads-greet.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': minor
+---
+
+Add support for rendering per-seat costs in checkout

.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

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

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',

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.
  */

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;

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;
  };
  };

packages/ui/src/components/Checkout/CheckoutForm.tsx

@@ -9,7 +9,12 @@ import { LineItems } from '@/ui/elements/LineItems';
 import { SegmentedControl } from '@/ui/elements/SegmentedControl';
 import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
 import { Tooltip } from '@/ui/elements/Tooltip';
-import { getSeatUnitPrice } from '@/ui/utils/billingPlanSeats';
+import {
+ getCheckoutSeatUnitTotal,
+ getIncludedSeatsUnitTotalTier,
+ getPaidSeatsUnitTotalTier,
+ getSeatUnitPrice,
+} from '@/ui/utils/billingPlanSeats';
 import { handleError } from '@/ui/utils/errorHandler';
 
 import { DevOnly } from '../../common/DevOnly';
@@ -48,10 +53,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
- const descriptionElements = [];
+ const seatPerUnitTotal = getCheckoutSeatUnitTotal(totals);
+ const includedSeatsTier = getIncludedSeatsUnitTotalTier(seatPerUnitTotal);
+ const paidSeatsTier = getPaidSeatsUnitTotalTier(seatPerUnitTotal);
+
+ const descriptionElements: Array<ReturnType<typeof localizationKeys>> = [];
  if (planPeriod === 'annual') {
  descriptionElements.push(localizationKeys('billing.billedAnnually'));
  }
+ if (includedSeatsTier && includedSeatsTier.quantity !== null) {
+ descriptionElements.push(
+ localizationKeys('billing.pricingTable.seatCost.includedSeats', {
+ includedSeats: includedSeatsTier.quantity,
+ }),
+ );
+ }
  const seatUnitPrice = getSeatUnitPrice(plan);
  if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
  descriptionElements.push(
@@ -91,6 +107,16 @@ export const CheckoutForm = withCardStateProvider(() => {
  suffix={localizationKeys('billing.checkout.perMonth')}
  />
  </LineItems.Group>
+ {paidSeatsTier && paidSeatsTier.quantity !== null && (
+ <LineItems.Group borderTop>
+ <LineItems.Title title={localizationKeys('billing.seats')} />
+ <LineItems.Description
+ prefix={`${paidSeatsTier.quantity} x`}
+ text={`${paidSeatsTier.feePerBlock.currencySymbol}${paidSeatsTier.feePerBlock.amountFormatted}`}
+ suffix={localizationKeys('billing.checkout.perMonth')}
+ />
+ </LineItems.Group>
+ )}
  <LineItems.Group
  borderTop
  variant='tertiary'
@@ -129,7 +155,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 +166,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>

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

packages/ui/src/utils/billingPlanSeats.ts

@@ -1,4 +1,10 @@
-import type { BillingPlanResource, BillingPlanUnitPrice, OrganizationResource } from '@clerk/shared/types';
+import type {
+ BillingPerUnitTotal,
+ BillingPerUnitTotalTier,
+ BillingPlanResource,
+ BillingPlanUnitPrice,
+ OrganizationResource,
+} from '@clerk/shared/types';
 
 /**
  * Given a plan, return the unit price for seats.
@@ -17,6 +23,69 @@ export const getSeatUnitPrice = (plan: { unitPrices?: BillingPlanUnitPrice[] }):
  return null;
 };
 
+/**
+ * Similar to the above, given a checkout totals, return the unit price for seats.
+ */
+export const getCheckoutSeatUnitTotal = (checkout: {
+ perUnitTotals?: BillingPerUnitTotal[];
+}): BillingPerUnitTotal | null => {
+ if (!checkout.perUnitTotals?.length) {
+ return null;
+ }
+
+ const seatUnitPrice = checkout.perUnitTotals.find(unitTotal => unitTotal.name === 'seats');
+
+ if (seatUnitPrice) {
+ return seatUnitPrice;
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents per-seat costs. If no tier is found, return null.
+ */
+export const getPaidSeatsUnitTotalTier = (unitTotal: BillingPerUnitTotal | null): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (unitTotal.tiers.length === 1 && unitTotal.tiers[0].feePerBlock.amount > 0) {
+ return unitTotal.tiers[0];
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[1];
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents included seats. If no tier is found, return null.
+ */
+export const getIncludedSeatsUnitTotalTier = (
+ unitTotal: BillingPerUnitTotal | null,
+): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[0];
+ }
+
+ return null;
+};
+
 /**
  * Given a plan, return the seat limit for the plan, or undefined if the plan does not have a seat limit.
  */

.changeset/good-ads-greet.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': minor
+---
+
+Add support for rendering per-seat costs in checkout

.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

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

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',

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.
  */

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;

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;
  };
  };

packages/ui/src/components/Checkout/CheckoutForm.tsx

@@ -9,7 +9,12 @@ import { LineItems } from '@/ui/elements/LineItems';
 import { SegmentedControl } from '@/ui/elements/SegmentedControl';
 import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
 import { Tooltip } from '@/ui/elements/Tooltip';
-import { getSeatUnitPrice } from '@/ui/utils/billingPlanSeats';
+import {
+ getCheckoutSeatUnitTotal,
+ getIncludedSeatsUnitTotalTier,
+ getPaidSeatsUnitTotalTier,
+ getSeatUnitPrice,
+} from '@/ui/utils/billingPlanSeats';
 import { handleError } from '@/ui/utils/errorHandler';
 
 import { DevOnly } from '../../common/DevOnly';
@@ -48,10 +53,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
- const descriptionElements = [];
+ const seatPerUnitTotal = getCheckoutSeatUnitTotal(totals);
+ const includedSeatsTier = getIncludedSeatsUnitTotalTier(seatPerUnitTotal);
+ const paidSeatsTier = getPaidSeatsUnitTotalTier(seatPerUnitTotal);
+
+ const descriptionElements: Array<ReturnType<typeof localizationKeys>> = [];
  if (planPeriod === 'annual') {
  descriptionElements.push(localizationKeys('billing.billedAnnually'));
  }
+ if (includedSeatsTier && includedSeatsTier.quantity !== null) {
+ descriptionElements.push(
+ localizationKeys('billing.pricingTable.seatCost.includedSeats', {
+ includedSeats: includedSeatsTier.quantity,
+ }),
+ );
+ }
  const seatUnitPrice = getSeatUnitPrice(plan);
  if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
  descriptionElements.push(
@@ -91,6 +107,16 @@ export const CheckoutForm = withCardStateProvider(() => {
  suffix={localizationKeys('billing.checkout.perMonth')}
  />
  </LineItems.Group>
+ {paidSeatsTier && paidSeatsTier.quantity !== null && (
+ <LineItems.Group borderTop>
+ <LineItems.Title title={localizationKeys('billing.seats')} />
+ <LineItems.Description
+ prefix={`${paidSeatsTier.quantity} x`}
+ text={`${paidSeatsTier.feePerBlock.currencySymbol}${paidSeatsTier.feePerBlock.amountFormatted}`}
+ suffix={localizationKeys('billing.checkout.perMonth')}
+ />
+ </LineItems.Group>
+ )}
  <LineItems.Group
  borderTop
  variant='tertiary'
@@ -129,7 +155,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 +166,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>

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

packages/ui/src/utils/billingPlanSeats.ts

@@ -1,4 +1,10 @@
-import type { BillingPlanResource, BillingPlanUnitPrice, OrganizationResource } from '@clerk/shared/types';
+import type {
+ BillingPerUnitTotal,
+ BillingPerUnitTotalTier,
+ BillingPlanResource,
+ BillingPlanUnitPrice,
+ OrganizationResource,
+} from '@clerk/shared/types';
 
 /**
  * Given a plan, return the unit price for seats.
@@ -17,6 +23,69 @@ export const getSeatUnitPrice = (plan: { unitPrices?: BillingPlanUnitPrice[] }):
  return null;
 };
 
+/**
+ * Similar to the above, given a checkout totals, return the unit price for seats.
+ */
+export const getCheckoutSeatUnitTotal = (checkout: {
+ perUnitTotals?: BillingPerUnitTotal[];
+}): BillingPerUnitTotal | null => {
+ if (!checkout.perUnitTotals?.length) {
+ return null;
+ }
+
+ const seatUnitPrice = checkout.perUnitTotals.find(unitTotal => unitTotal.name === 'seats');
+
+ if (seatUnitPrice) {
+ return seatUnitPrice;
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents per-seat costs. If no tier is found, return null.
+ */
+export const getPaidSeatsUnitTotalTier = (unitTotal: BillingPerUnitTotal | null): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (unitTotal.tiers.length === 1 && unitTotal.tiers[0].feePerBlock.amount > 0) {
+ return unitTotal.tiers[0];
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[1];
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents included seats. If no tier is found, return null.
+ */
+export const getIncludedSeatsUnitTotalTier = (
+ unitTotal: BillingPerUnitTotal | null,
+): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[0];
+ }
+
+ return null;
+};
+
 /**
  * Given a plan, return the seat limit for the plan, or undefined if the plan does not have a seat limit.
  */

.changeset/good-ads-greet.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': minor
+---
+
+Add support for rendering per-seat costs in checkout

.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

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

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',

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.
  */

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;

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;
  };
  };

packages/ui/src/components/Checkout/CheckoutForm.tsx

@@ -9,7 +9,12 @@ import { LineItems } from '@/ui/elements/LineItems';
 import { SegmentedControl } from '@/ui/elements/SegmentedControl';
 import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
 import { Tooltip } from '@/ui/elements/Tooltip';
-import { getSeatUnitPrice } from '@/ui/utils/billingPlanSeats';
+import {
+ getCheckoutSeatUnitTotal,
+ getIncludedSeatsUnitTotalTier,
+ getPaidSeatsUnitTotalTier,
+ getSeatUnitPrice,
+} from '@/ui/utils/billingPlanSeats';
 import { handleError } from '@/ui/utils/errorHandler';
 
 import { DevOnly } from '../../common/DevOnly';
@@ -48,10 +53,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
- const descriptionElements = [];
+ const seatPerUnitTotal = getCheckoutSeatUnitTotal(totals);
+ const includedSeatsTier = getIncludedSeatsUnitTotalTier(seatPerUnitTotal);
+ const paidSeatsTier = getPaidSeatsUnitTotalTier(seatPerUnitTotal);
+
+ const descriptionElements: Array<ReturnType<typeof localizationKeys>> = [];
  if (planPeriod === 'annual') {
  descriptionElements.push(localizationKeys('billing.billedAnnually'));
  }
+ if (includedSeatsTier && includedSeatsTier.quantity !== null) {
+ descriptionElements.push(
+ localizationKeys('billing.pricingTable.seatCost.includedSeats', {
+ includedSeats: includedSeatsTier.quantity,
+ }),
+ );
+ }
  const seatUnitPrice = getSeatUnitPrice(plan);
  if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
  descriptionElements.push(
@@ -91,6 +107,16 @@ export const CheckoutForm = withCardStateProvider(() => {
  suffix={localizationKeys('billing.checkout.perMonth')}
  />
  </LineItems.Group>
+ {paidSeatsTier && paidSeatsTier.quantity !== null && (
+ <LineItems.Group borderTop>
+ <LineItems.Title title={localizationKeys('billing.seats')} />
+ <LineItems.Description
+ prefix={`${paidSeatsTier.quantity} x`}
+ text={`${paidSeatsTier.feePerBlock.currencySymbol}${paidSeatsTier.feePerBlock.amountFormatted}`}
+ suffix={localizationKeys('billing.checkout.perMonth')}
+ />
+ </LineItems.Group>
+ )}
  <LineItems.Group
  borderTop
  variant='tertiary'
@@ -129,7 +155,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 +166,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>

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

packages/ui/src/utils/billingPlanSeats.ts

@@ -1,4 +1,10 @@
-import type { BillingPlanResource, BillingPlanUnitPrice, OrganizationResource } from '@clerk/shared/types';
+import type {
+ BillingPerUnitTotal,
+ BillingPerUnitTotalTier,
+ BillingPlanResource,
+ BillingPlanUnitPrice,
+ OrganizationResource,
+} from '@clerk/shared/types';
 
 /**
  * Given a plan, return the unit price for seats.
@@ -17,6 +23,69 @@ export const getSeatUnitPrice = (plan: { unitPrices?: BillingPlanUnitPrice[] }):
  return null;
 };
 
+/**
+ * Similar to the above, given a checkout totals, return the unit price for seats.
+ */
+export const getCheckoutSeatUnitTotal = (checkout: {
+ perUnitTotals?: BillingPerUnitTotal[];
+}): BillingPerUnitTotal | null => {
+ if (!checkout.perUnitTotals?.length) {
+ return null;
+ }
+
+ const seatUnitPrice = checkout.perUnitTotals.find(unitTotal => unitTotal.name === 'seats');
+
+ if (seatUnitPrice) {
+ return seatUnitPrice;
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents per-seat costs. If no tier is found, return null.
+ */
+export const getPaidSeatsUnitTotalTier = (unitTotal: BillingPerUnitTotal | null): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (unitTotal.tiers.length === 1 && unitTotal.tiers[0].feePerBlock.amount > 0) {
+ return unitTotal.tiers[0];
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[1];
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents included seats. If no tier is found, return null.
+ */
+export const getIncludedSeatsUnitTotalTier = (
+ unitTotal: BillingPerUnitTotal | null,
+): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[0];
+ }
+
+ return null;
+};
+
 /**
  * Given a plan, return the seat limit for the plan, or undefined if the plan does not have a seat limit.
  */

.changeset/good-ads-greet.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': minor
+---
+
+Add support for rendering per-seat costs in checkout

.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

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

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',

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.
  */

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;

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;
  };
  };

packages/ui/src/components/Checkout/CheckoutForm.tsx

@@ -9,7 +9,12 @@ import { LineItems } from '@/ui/elements/LineItems';
 import { SegmentedControl } from '@/ui/elements/SegmentedControl';
 import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
 import { Tooltip } from '@/ui/elements/Tooltip';
-import { getSeatUnitPrice } from '@/ui/utils/billingPlanSeats';
+import {
+ getCheckoutSeatUnitTotal,
+ getIncludedSeatsUnitTotalTier,
+ getPaidSeatsUnitTotalTier,
+ getSeatUnitPrice,
+} from '@/ui/utils/billingPlanSeats';
 import { handleError } from '@/ui/utils/errorHandler';
 
 import { DevOnly } from '../../common/DevOnly';
@@ -48,10 +53,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
- const descriptionElements = [];
+ const seatPerUnitTotal = getCheckoutSeatUnitTotal(totals);
+ const includedSeatsTier = getIncludedSeatsUnitTotalTier(seatPerUnitTotal);
+ const paidSeatsTier = getPaidSeatsUnitTotalTier(seatPerUnitTotal);
+
+ const descriptionElements: Array<ReturnType<typeof localizationKeys>> = [];
  if (planPeriod === 'annual') {
  descriptionElements.push(localizationKeys('billing.billedAnnually'));
  }
+ if (includedSeatsTier && includedSeatsTier.quantity !== null) {
+ descriptionElements.push(
+ localizationKeys('billing.pricingTable.seatCost.includedSeats', {
+ includedSeats: includedSeatsTier.quantity,
+ }),
+ );
+ }
  const seatUnitPrice = getSeatUnitPrice(plan);
  if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
  descriptionElements.push(
@@ -91,6 +107,16 @@ export const CheckoutForm = withCardStateProvider(() => {
  suffix={localizationKeys('billing.checkout.perMonth')}
  />
  </LineItems.Group>
+ {paidSeatsTier && paidSeatsTier.quantity !== null && (
+ <LineItems.Group borderTop>
+ <LineItems.Title title={localizationKeys('billing.seats')} />
+ <LineItems.Description
+ prefix={`${paidSeatsTier.quantity} x`}
+ text={`${paidSeatsTier.feePerBlock.currencySymbol}${paidSeatsTier.feePerBlock.amountFormatted}`}
+ suffix={localizationKeys('billing.checkout.perMonth')}
+ />
+ </LineItems.Group>
+ )}
  <LineItems.Group
  borderTop
  variant='tertiary'
@@ -129,7 +155,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 +166,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>

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

packages/ui/src/utils/billingPlanSeats.ts

@@ -1,4 +1,10 @@
-import type { BillingPlanResource, BillingPlanUnitPrice, OrganizationResource } from '@clerk/shared/types';
+import type {
+ BillingPerUnitTotal,
+ BillingPerUnitTotalTier,
+ BillingPlanResource,
+ BillingPlanUnitPrice,
+ OrganizationResource,
+} from '@clerk/shared/types';
 
 /**
  * Given a plan, return the unit price for seats.
@@ -17,6 +23,69 @@ export const getSeatUnitPrice = (plan: { unitPrices?: BillingPlanUnitPrice[] }):
  return null;
 };
 
+/**
+ * Similar to the above, given a checkout totals, return the unit price for seats.
+ */
+export const getCheckoutSeatUnitTotal = (checkout: {
+ perUnitTotals?: BillingPerUnitTotal[];
+}): BillingPerUnitTotal | null => {
+ if (!checkout.perUnitTotals?.length) {
+ return null;
+ }
+
+ const seatUnitPrice = checkout.perUnitTotals.find(unitTotal => unitTotal.name === 'seats');
+
+ if (seatUnitPrice) {
+ return seatUnitPrice;
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents per-seat costs. If no tier is found, return null.
+ */
+export const getPaidSeatsUnitTotalTier = (unitTotal: BillingPerUnitTotal | null): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (unitTotal.tiers.length === 1 && unitTotal.tiers[0].feePerBlock.amount > 0) {
+ return unitTotal.tiers[0];
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[1];
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents included seats. If no tier is found, return null.
+ */
+export const getIncludedSeatsUnitTotalTier = (
+ unitTotal: BillingPerUnitTotal | null,
+): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[0];
+ }
+
+ return null;
+};
+
 /**
  * Given a plan, return the seat limit for the plan, or undefined if the plan does not have a seat limit.
  */

.changeset/good-ads-greet.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': minor
+---
+
+Add support for rendering per-seat costs in checkout

.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

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

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',

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.
  */

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;

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;
  };
  };

packages/ui/src/components/Checkout/CheckoutForm.tsx

@@ -9,7 +9,12 @@ import { LineItems } from '@/ui/elements/LineItems';
 import { SegmentedControl } from '@/ui/elements/SegmentedControl';
 import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
 import { Tooltip } from '@/ui/elements/Tooltip';
-import { getSeatUnitPrice } from '@/ui/utils/billingPlanSeats';
+import {
+ getCheckoutSeatUnitTotal,
+ getIncludedSeatsUnitTotalTier,
+ getPaidSeatsUnitTotalTier,
+ getSeatUnitPrice,
+} from '@/ui/utils/billingPlanSeats';
 import { handleError } from '@/ui/utils/errorHandler';
 
 import { DevOnly } from '../../common/DevOnly';
@@ -48,10 +53,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
- const descriptionElements = [];
+ const seatPerUnitTotal = getCheckoutSeatUnitTotal(totals);
+ const includedSeatsTier = getIncludedSeatsUnitTotalTier(seatPerUnitTotal);
+ const paidSeatsTier = getPaidSeatsUnitTotalTier(seatPerUnitTotal);
+
+ const descriptionElements: Array<ReturnType<typeof localizationKeys>> = [];
  if (planPeriod === 'annual') {
  descriptionElements.push(localizationKeys('billing.billedAnnually'));
  }
+ if (includedSeatsTier && includedSeatsTier.quantity !== null) {
+ descriptionElements.push(
+ localizationKeys('billing.pricingTable.seatCost.includedSeats', {
+ includedSeats: includedSeatsTier.quantity,
+ }),
+ );
+ }
  const seatUnitPrice = getSeatUnitPrice(plan);
  if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
  descriptionElements.push(
@@ -91,6 +107,16 @@ export const CheckoutForm = withCardStateProvider(() => {
  suffix={localizationKeys('billing.checkout.perMonth')}
  />
  </LineItems.Group>
+ {paidSeatsTier && paidSeatsTier.quantity !== null && (
+ <LineItems.Group borderTop>
+ <LineItems.Title title={localizationKeys('billing.seats')} />
+ <LineItems.Description
+ prefix={`${paidSeatsTier.quantity} x`}
+ text={`${paidSeatsTier.feePerBlock.currencySymbol}${paidSeatsTier.feePerBlock.amountFormatted}`}
+ suffix={localizationKeys('billing.checkout.perMonth')}
+ />
+ </LineItems.Group>
+ )}
  <LineItems.Group
  borderTop
  variant='tertiary'
@@ -129,7 +155,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 +166,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>

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

packages/ui/src/utils/billingPlanSeats.ts

@@ -1,4 +1,10 @@
-import type { BillingPlanResource, BillingPlanUnitPrice, OrganizationResource } from '@clerk/shared/types';
+import type {
+ BillingPerUnitTotal,
+ BillingPerUnitTotalTier,
+ BillingPlanResource,
+ BillingPlanUnitPrice,
+ OrganizationResource,
+} from '@clerk/shared/types';
 
 /**
  * Given a plan, return the unit price for seats.
@@ -17,6 +23,69 @@ export const getSeatUnitPrice = (plan: { unitPrices?: BillingPlanUnitPrice[] }):
  return null;
 };
 
+/**
+ * Similar to the above, given a checkout totals, return the unit price for seats.
+ */
+export const getCheckoutSeatUnitTotal = (checkout: {
+ perUnitTotals?: BillingPerUnitTotal[];
+}): BillingPerUnitTotal | null => {
+ if (!checkout.perUnitTotals?.length) {
+ return null;
+ }
+
+ const seatUnitPrice = checkout.perUnitTotals.find(unitTotal => unitTotal.name === 'seats');
+
+ if (seatUnitPrice) {
+ return seatUnitPrice;
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents per-seat costs. If no tier is found, return null.
+ */
+export const getPaidSeatsUnitTotalTier = (unitTotal: BillingPerUnitTotal | null): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (unitTotal.tiers.length === 1 && unitTotal.tiers[0].feePerBlock.amount > 0) {
+ return unitTotal.tiers[0];
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[1];
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents included seats. If no tier is found, return null.
+ */
+export const getIncludedSeatsUnitTotalTier = (
+ unitTotal: BillingPerUnitTotal | null,
+): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[0];
+ }
+
+ return null;
+};
+
 /**
  * Given a plan, return the seat limit for the plan, or undefined if the plan does not have a seat limit.
  */

.changeset/good-ads-greet.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': minor
+---
+
+Add support for rendering per-seat costs in checkout

.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

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

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',

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.
  */

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;

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;
  };
  };

packages/ui/src/components/Checkout/CheckoutForm.tsx

@@ -9,7 +9,12 @@ import { LineItems } from '@/ui/elements/LineItems';
 import { SegmentedControl } from '@/ui/elements/SegmentedControl';
 import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
 import { Tooltip } from '@/ui/elements/Tooltip';
-import { getSeatUnitPrice } from '@/ui/utils/billingPlanSeats';
+import {
+ getCheckoutSeatUnitTotal,
+ getIncludedSeatsUnitTotalTier,
+ getPaidSeatsUnitTotalTier,
+ getSeatUnitPrice,
+} from '@/ui/utils/billingPlanSeats';
 import { handleError } from '@/ui/utils/errorHandler';
 
 import { DevOnly } from '../../common/DevOnly';
@@ -48,10 +53,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
- const descriptionElements = [];
+ const seatPerUnitTotal = getCheckoutSeatUnitTotal(totals);
+ const includedSeatsTier = getIncludedSeatsUnitTotalTier(seatPerUnitTotal);
+ const paidSeatsTier = getPaidSeatsUnitTotalTier(seatPerUnitTotal);
+
+ const descriptionElements: Array<ReturnType<typeof localizationKeys>> = [];
  if (planPeriod === 'annual') {
  descriptionElements.push(localizationKeys('billing.billedAnnually'));
  }
+ if (includedSeatsTier && includedSeatsTier.quantity !== null) {
+ descriptionElements.push(
+ localizationKeys('billing.pricingTable.seatCost.includedSeats', {
+ includedSeats: includedSeatsTier.quantity,
+ }),
+ );
+ }
  const seatUnitPrice = getSeatUnitPrice(plan);
  if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
  descriptionElements.push(
@@ -91,6 +107,16 @@ export const CheckoutForm = withCardStateProvider(() => {
  suffix={localizationKeys('billing.checkout.perMonth')}
  />
  </LineItems.Group>
+ {paidSeatsTier && paidSeatsTier.quantity !== null && (
+ <LineItems.Group borderTop>
+ <LineItems.Title title={localizationKeys('billing.seats')} />
+ <LineItems.Description
+ prefix={`${paidSeatsTier.quantity} x`}
+ text={`${paidSeatsTier.feePerBlock.currencySymbol}${paidSeatsTier.feePerBlock.amountFormatted}`}
+ suffix={localizationKeys('billing.checkout.perMonth')}
+ />
+ </LineItems.Group>
+ )}
  <LineItems.Group
  borderTop
  variant='tertiary'
@@ -129,7 +155,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 +166,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>

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

packages/ui/src/utils/billingPlanSeats.ts

@@ -1,4 +1,10 @@
-import type { BillingPlanResource, BillingPlanUnitPrice, OrganizationResource } from '@clerk/shared/types';
+import type {
+ BillingPerUnitTotal,
+ BillingPerUnitTotalTier,
+ BillingPlanResource,
+ BillingPlanUnitPrice,
+ OrganizationResource,
+} from '@clerk/shared/types';
 
 /**
  * Given a plan, return the unit price for seats.
@@ -17,6 +23,69 @@ export const getSeatUnitPrice = (plan: { unitPrices?: BillingPlanUnitPrice[] }):
  return null;
 };
 
+/**
+ * Similar to the above, given a checkout totals, return the unit price for seats.
+ */
+export const getCheckoutSeatUnitTotal = (checkout: {
+ perUnitTotals?: BillingPerUnitTotal[];
+}): BillingPerUnitTotal | null => {
+ if (!checkout.perUnitTotals?.length) {
+ return null;
+ }
+
+ const seatUnitPrice = checkout.perUnitTotals.find(unitTotal => unitTotal.name === 'seats');
+
+ if (seatUnitPrice) {
+ return seatUnitPrice;
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents per-seat costs. If no tier is found, return null.
+ */
+export const getPaidSeatsUnitTotalTier = (unitTotal: BillingPerUnitTotal | null): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (unitTotal.tiers.length === 1 && unitTotal.tiers[0].feePerBlock.amount > 0) {
+ return unitTotal.tiers[0];
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[1];
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents included seats. If no tier is found, return null.
+ */
+export const getIncludedSeatsUnitTotalTier = (
+ unitTotal: BillingPerUnitTotal | null,
+): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[0];
+ }
+
+ return null;
+};
+
 /**
  * Given a plan, return the seat limit for the plan, or undefined if the plan does not have a seat limit.
  */

.changeset/good-ads-greet.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': minor
+---
+
+Add support for rendering per-seat costs in checkout

.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

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

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',

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.
  */

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;

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;
  };
  };

packages/ui/src/components/Checkout/CheckoutForm.tsx

@@ -9,7 +9,12 @@ import { LineItems } from '@/ui/elements/LineItems';
 import { SegmentedControl } from '@/ui/elements/SegmentedControl';
 import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
 import { Tooltip } from '@/ui/elements/Tooltip';
-import { getSeatUnitPrice } from '@/ui/utils/billingPlanSeats';
+import {
+ getCheckoutSeatUnitTotal,
+ getIncludedSeatsUnitTotalTier,
+ getPaidSeatsUnitTotalTier,
+ getSeatUnitPrice,
+} from '@/ui/utils/billingPlanSeats';
 import { handleError } from '@/ui/utils/errorHandler';
 
 import { DevOnly } from '../../common/DevOnly';
@@ -48,10 +53,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
- const descriptionElements = [];
+ const seatPerUnitTotal = getCheckoutSeatUnitTotal(totals);
+ const includedSeatsTier = getIncludedSeatsUnitTotalTier(seatPerUnitTotal);
+ const paidSeatsTier = getPaidSeatsUnitTotalTier(seatPerUnitTotal);
+
+ const descriptionElements: Array<ReturnType<typeof localizationKeys>> = [];
  if (planPeriod === 'annual') {
  descriptionElements.push(localizationKeys('billing.billedAnnually'));
  }
+ if (includedSeatsTier && includedSeatsTier.quantity !== null) {
+ descriptionElements.push(
+ localizationKeys('billing.pricingTable.seatCost.includedSeats', {
+ includedSeats: includedSeatsTier.quantity,
+ }),
+ );
+ }
  const seatUnitPrice = getSeatUnitPrice(plan);
  if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
  descriptionElements.push(
@@ -91,6 +107,16 @@ export const CheckoutForm = withCardStateProvider(() => {
  suffix={localizationKeys('billing.checkout.perMonth')}
  />
  </LineItems.Group>
+ {paidSeatsTier && paidSeatsTier.quantity !== null && (
+ <LineItems.Group borderTop>
+ <LineItems.Title title={localizationKeys('billing.seats')} />
+ <LineItems.Description
+ prefix={`${paidSeatsTier.quantity} x`}
+ text={`${paidSeatsTier.feePerBlock.currencySymbol}${paidSeatsTier.feePerBlock.amountFormatted}`}
+ suffix={localizationKeys('billing.checkout.perMonth')}
+ />
+ </LineItems.Group>
+ )}
  <LineItems.Group
  borderTop
  variant='tertiary'
@@ -129,7 +155,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 +166,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>

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

packages/ui/src/utils/billingPlanSeats.ts

@@ -1,4 +1,10 @@
-import type { BillingPlanResource, BillingPlanUnitPrice, OrganizationResource } from '@clerk/shared/types';
+import type {
+ BillingPerUnitTotal,
+ BillingPerUnitTotalTier,
+ BillingPlanResource,
+ BillingPlanUnitPrice,
+ OrganizationResource,
+} from '@clerk/shared/types';
 
 /**
  * Given a plan, return the unit price for seats.
@@ -17,6 +23,69 @@ export const getSeatUnitPrice = (plan: { unitPrices?: BillingPlanUnitPrice[] }):
  return null;
 };
 
+/**
+ * Similar to the above, given a checkout totals, return the unit price for seats.
+ */
+export const getCheckoutSeatUnitTotal = (checkout: {
+ perUnitTotals?: BillingPerUnitTotal[];
+}): BillingPerUnitTotal | null => {
+ if (!checkout.perUnitTotals?.length) {
+ return null;
+ }
+
+ const seatUnitPrice = checkout.perUnitTotals.find(unitTotal => unitTotal.name === 'seats');
+
+ if (seatUnitPrice) {
+ return seatUnitPrice;
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents per-seat costs. If no tier is found, return null.
+ */
+export const getPaidSeatsUnitTotalTier = (unitTotal: BillingPerUnitTotal | null): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (unitTotal.tiers.length === 1 && unitTotal.tiers[0].feePerBlock.amount > 0) {
+ return unitTotal.tiers[0];
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[1];
+ }
+
+ return null;
+};
+
+/**
+ * Given a checkout unit total, return the unit total tier that represents included seats. If no tier is found, return null.
+ */
+export const getIncludedSeatsUnitTotalTier = (
+ unitTotal: BillingPerUnitTotal | null,
+): BillingPerUnitTotalTier | null => {
+ if (!unitTotal) {
+ return null;
+ }
+
+ if (
+ unitTotal.tiers.length === 2 &&
+ unitTotal.tiers[0].feePerBlock.amount === 0 &&
+ unitTotal.tiers[1].feePerBlock.amount > 0
+ ) {
+ return unitTotal.tiers[0];
+ }
+
+ return null;
+};
+
 /**
  * Given a plan, return the seat limit for the plan, or undefined if the plan does not have a seat limit.
  */