feat(clerk-js,ui): Show SBB totals in Checkout

packages/clerk-js/sandbox/scenarios/checkout-seats.ts

@@ -0,0 +1,341 @@
+import {
+ clerkHandlers,
+ http,
+ HttpResponse,
+ EnvironmentService,
+ SessionService,
+ setClerkState,
+ type MockScenario,
+ UserService,
+} from '@clerk/msw';
+
+export function CheckoutSeats(): MockScenario {
+ const user = UserService.create();
+ const session = SessionService.create(user);
+
+ setClerkState({
+ environment: EnvironmentService.MULTI_SESSION,
+ session,
+ user,
+ });
+
+ const subscriptionHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/subscription', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const paymentMethodsHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/payment_methods', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const checkoutAccountCreditHandler = http.post('https://*.clerk.accounts.dev/v1/me/billing/checkouts', () => {
+ return HttpResponse.json({
+ response: {
+ object: 'commerce_checkout',
+ id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'Pro',
+ fee: {
+ amount: 0,
+ amount_formatted: '25.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ external_gateway_id: 'string',
+ status: 'needs_confirmation',
+ totals: {
+ subtotal: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ tax_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ grand_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_after_free_trial: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_now: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ past_due: null,
+ credit: {
+ amount: 1,
+ amount_formatted: '5.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ per_unit_totals: [
+ {
+ name: 'seats',
+ block_size: 1,
+ tiers: [
+ {
+ quantity: 10,
+ fee_per_block: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ {
+ quantity: 2,
+ fee_per_block: {
+ amount: 1000,
+ amount_formatted: '10.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 2000,
+ amount_formatted: '20.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ subscription_item: {
+ object: 'commerce_subscription_item',
+ id: 'string',
+ instance_id: 'string',
+ status: 'active',
+ credit: {
+ amount: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ cycle_days_remaining: 1,
+ cycle_days_total: 1,
+ cycle_remaining_percent: 1,
+ },
+ plan_id: 'string',
+ price_id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'string',
+ fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payment_method_id: 'string',
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ lifetime_paid: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ next_payment: {
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ date: 1,
+ },
+ payer_id: 'string',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ is_free_trial: true,
+ period_start: 1,
+ period_end: null,
+ proration_date: 'string',
+ canceled_at: null,
+ past_due_at: null,
+ ended_at: null,
+ created_at: 1,
+ updated_at: 1,
+ },
+ plan_period_start: 1,
+ is_immediate_plan_change: true,
+ free_trial_ends_at: 1,
+ needs_payment_method: true,
+ },
+ });
+ });
+
+ return {
+ description: 'Checkout with seats',
+ handlers: [checkoutAccountCreditHandler, subscriptionHandler, paymentMethodsHandler, ...clerkHandlers],
+ initialState: { session, user },
+ name: 'checkout-seats',
+ };
+}

packages/clerk-js/sandbox/scenarios/index.ts

@@ -1,5 +1,6 @@
 export { UserButtonSignedIn } from './user-button-signed-in';
 export { CheckoutAccountCredit } from './checkout-account-credit';
+export { CheckoutSeats } from './checkout-seats';
 export { OrgProfileSeatLimit } from './org-profile-seat-limit';
 export { PricingTableSBB } from './pricing-table-sbb';
 export { AnnualOnlyPlans } from './annual-only-plans';

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

@@ -46,6 +46,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
+ const descriptionElements = [];
+ if (planPeriod === 'annual') {
+ descriptionElements.push(localizationKeys('billing.billedAnnually'));
+ }
+ const seatUnitPrice = plan.unitPrices?.find(unitPrice => unitPrice.name.toLowerCase() === 'seats');
+ if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
+ descriptionElements.push(
+ seatUnitPrice.tiers[0].endsAfterBlock
+ ? localizationKeys('billing.pricingTable.seatCost.upToSeats', {
+ endsAfterBlock: seatUnitPrice.tiers[0].endsAfterBlock,
+ })
+ : localizationKeys('billing.pricingTable.seatCost.unlimitedSeats'),
+ );
+ }
+
  return (
  <Drawer.Body>
  <Box
@@ -61,7 +76,7 @@ export const CheckoutForm = withCardStateProvider(() => {
  <LineItems.Group>
  <LineItems.Title
  title={plan.name}
- description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}
+ description={descriptionElements}
  badge={
  plan.freeTrialEnabled && freeTrialEndsAt ? (
  <SubscriptionBadge subscription={{ status: 'free_trial' }} />

packages/clerk-js/sandbox/scenarios/checkout-seats.ts

@@ -0,0 +1,341 @@
+import {
+ clerkHandlers,
+ http,
+ HttpResponse,
+ EnvironmentService,
+ SessionService,
+ setClerkState,
+ type MockScenario,
+ UserService,
+} from '@clerk/msw';
+
+export function CheckoutSeats(): MockScenario {
+ const user = UserService.create();
+ const session = SessionService.create(user);
+
+ setClerkState({
+ environment: EnvironmentService.MULTI_SESSION,
+ session,
+ user,
+ });
+
+ const subscriptionHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/subscription', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const paymentMethodsHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/payment_methods', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const checkoutAccountCreditHandler = http.post('https://*.clerk.accounts.dev/v1/me/billing/checkouts', () => {
+ return HttpResponse.json({
+ response: {
+ object: 'commerce_checkout',
+ id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'Pro',
+ fee: {
+ amount: 0,
+ amount_formatted: '25.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ external_gateway_id: 'string',
+ status: 'needs_confirmation',
+ totals: {
+ subtotal: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ tax_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ grand_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_after_free_trial: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_now: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ past_due: null,
+ credit: {
+ amount: 1,
+ amount_formatted: '5.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ per_unit_totals: [
+ {
+ name: 'seats',
+ block_size: 1,
+ tiers: [
+ {
+ quantity: 10,
+ fee_per_block: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ {
+ quantity: 2,
+ fee_per_block: {
+ amount: 1000,
+ amount_formatted: '10.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 2000,
+ amount_formatted: '20.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ subscription_item: {
+ object: 'commerce_subscription_item',
+ id: 'string',
+ instance_id: 'string',
+ status: 'active',
+ credit: {
+ amount: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ cycle_days_remaining: 1,
+ cycle_days_total: 1,
+ cycle_remaining_percent: 1,
+ },
+ plan_id: 'string',
+ price_id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'string',
+ fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payment_method_id: 'string',
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ lifetime_paid: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ next_payment: {
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ date: 1,
+ },
+ payer_id: 'string',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ is_free_trial: true,
+ period_start: 1,
+ period_end: null,
+ proration_date: 'string',
+ canceled_at: null,
+ past_due_at: null,
+ ended_at: null,
+ created_at: 1,
+ updated_at: 1,
+ },
+ plan_period_start: 1,
+ is_immediate_plan_change: true,
+ free_trial_ends_at: 1,
+ needs_payment_method: true,
+ },
+ });
+ });
+
+ return {
+ description: 'Checkout with seats',
+ handlers: [checkoutAccountCreditHandler, subscriptionHandler, paymentMethodsHandler, ...clerkHandlers],
+ initialState: { session, user },
+ name: 'checkout-seats',
+ };
+}

packages/clerk-js/sandbox/scenarios/index.ts

@@ -1,5 +1,6 @@
 export { UserButtonSignedIn } from './user-button-signed-in';
 export { CheckoutAccountCredit } from './checkout-account-credit';
+export { CheckoutSeats } from './checkout-seats';
 export { OrgProfileSeatLimit } from './org-profile-seat-limit';
 export { PricingTableSBB } from './pricing-table-sbb';
 export { AnnualOnlyPlans } from './annual-only-plans';

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

@@ -46,6 +46,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
+ const descriptionElements = [];
+ if (planPeriod === 'annual') {
+ descriptionElements.push(localizationKeys('billing.billedAnnually'));
+ }
+ const seatUnitPrice = plan.unitPrices?.find(unitPrice => unitPrice.name.toLowerCase() === 'seats');
+ if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
+ descriptionElements.push(
+ seatUnitPrice.tiers[0].endsAfterBlock
+ ? localizationKeys('billing.pricingTable.seatCost.upToSeats', {
+ endsAfterBlock: seatUnitPrice.tiers[0].endsAfterBlock,
+ })
+ : localizationKeys('billing.pricingTable.seatCost.unlimitedSeats'),
+ );
+ }
+
  return (
  <Drawer.Body>
  <Box
@@ -61,7 +76,7 @@ export const CheckoutForm = withCardStateProvider(() => {
  <LineItems.Group>
  <LineItems.Title
  title={plan.name}
- description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}
+ description={descriptionElements}
  badge={
  plan.freeTrialEnabled && freeTrialEndsAt ? (
  <SubscriptionBadge subscription={{ status: 'free_trial' }} />

packages/clerk-js/sandbox/scenarios/checkout-seats.ts

@@ -0,0 +1,341 @@
+import {
+ clerkHandlers,
+ http,
+ HttpResponse,
+ EnvironmentService,
+ SessionService,
+ setClerkState,
+ type MockScenario,
+ UserService,
+} from '@clerk/msw';
+
+export function CheckoutSeats(): MockScenario {
+ const user = UserService.create();
+ const session = SessionService.create(user);
+
+ setClerkState({
+ environment: EnvironmentService.MULTI_SESSION,
+ session,
+ user,
+ });
+
+ const subscriptionHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/subscription', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const paymentMethodsHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/payment_methods', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const checkoutAccountCreditHandler = http.post('https://*.clerk.accounts.dev/v1/me/billing/checkouts', () => {
+ return HttpResponse.json({
+ response: {
+ object: 'commerce_checkout',
+ id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'Pro',
+ fee: {
+ amount: 0,
+ amount_formatted: '25.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ external_gateway_id: 'string',
+ status: 'needs_confirmation',
+ totals: {
+ subtotal: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ tax_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ grand_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_after_free_trial: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_now: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ past_due: null,
+ credit: {
+ amount: 1,
+ amount_formatted: '5.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ per_unit_totals: [
+ {
+ name: 'seats',
+ block_size: 1,
+ tiers: [
+ {
+ quantity: 10,
+ fee_per_block: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ {
+ quantity: 2,
+ fee_per_block: {
+ amount: 1000,
+ amount_formatted: '10.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 2000,
+ amount_formatted: '20.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ subscription_item: {
+ object: 'commerce_subscription_item',
+ id: 'string',
+ instance_id: 'string',
+ status: 'active',
+ credit: {
+ amount: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ cycle_days_remaining: 1,
+ cycle_days_total: 1,
+ cycle_remaining_percent: 1,
+ },
+ plan_id: 'string',
+ price_id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'string',
+ fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payment_method_id: 'string',
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ lifetime_paid: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ next_payment: {
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ date: 1,
+ },
+ payer_id: 'string',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ is_free_trial: true,
+ period_start: 1,
+ period_end: null,
+ proration_date: 'string',
+ canceled_at: null,
+ past_due_at: null,
+ ended_at: null,
+ created_at: 1,
+ updated_at: 1,
+ },
+ plan_period_start: 1,
+ is_immediate_plan_change: true,
+ free_trial_ends_at: 1,
+ needs_payment_method: true,
+ },
+ });
+ });
+
+ return {
+ description: 'Checkout with seats',
+ handlers: [checkoutAccountCreditHandler, subscriptionHandler, paymentMethodsHandler, ...clerkHandlers],
+ initialState: { session, user },
+ name: 'checkout-seats',
+ };
+}

packages/clerk-js/sandbox/scenarios/index.ts

@@ -1,5 +1,6 @@
 export { UserButtonSignedIn } from './user-button-signed-in';
 export { CheckoutAccountCredit } from './checkout-account-credit';
+export { CheckoutSeats } from './checkout-seats';
 export { OrgProfileSeatLimit } from './org-profile-seat-limit';
 export { PricingTableSBB } from './pricing-table-sbb';
 export { AnnualOnlyPlans } from './annual-only-plans';

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

@@ -46,6 +46,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
+ const descriptionElements = [];
+ if (planPeriod === 'annual') {
+ descriptionElements.push(localizationKeys('billing.billedAnnually'));
+ }
+ const seatUnitPrice = plan.unitPrices?.find(unitPrice => unitPrice.name.toLowerCase() === 'seats');
+ if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
+ descriptionElements.push(
+ seatUnitPrice.tiers[0].endsAfterBlock
+ ? localizationKeys('billing.pricingTable.seatCost.upToSeats', {
+ endsAfterBlock: seatUnitPrice.tiers[0].endsAfterBlock,
+ })
+ : localizationKeys('billing.pricingTable.seatCost.unlimitedSeats'),
+ );
+ }
+
  return (
  <Drawer.Body>
  <Box
@@ -61,7 +76,7 @@ export const CheckoutForm = withCardStateProvider(() => {
  <LineItems.Group>
  <LineItems.Title
  title={plan.name}
- description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}
+ description={descriptionElements}
  badge={
  plan.freeTrialEnabled && freeTrialEndsAt ? (
  <SubscriptionBadge subscription={{ status: 'free_trial' }} />

packages/clerk-js/sandbox/scenarios/checkout-seats.ts

@@ -0,0 +1,341 @@
+import {
+ clerkHandlers,
+ http,
+ HttpResponse,
+ EnvironmentService,
+ SessionService,
+ setClerkState,
+ type MockScenario,
+ UserService,
+} from '@clerk/msw';
+
+export function CheckoutSeats(): MockScenario {
+ const user = UserService.create();
+ const session = SessionService.create(user);
+
+ setClerkState({
+ environment: EnvironmentService.MULTI_SESSION,
+ session,
+ user,
+ });
+
+ const subscriptionHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/subscription', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const paymentMethodsHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/payment_methods', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const checkoutAccountCreditHandler = http.post('https://*.clerk.accounts.dev/v1/me/billing/checkouts', () => {
+ return HttpResponse.json({
+ response: {
+ object: 'commerce_checkout',
+ id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'Pro',
+ fee: {
+ amount: 0,
+ amount_formatted: '25.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ external_gateway_id: 'string',
+ status: 'needs_confirmation',
+ totals: {
+ subtotal: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ tax_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ grand_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_after_free_trial: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_now: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ past_due: null,
+ credit: {
+ amount: 1,
+ amount_formatted: '5.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ per_unit_totals: [
+ {
+ name: 'seats',
+ block_size: 1,
+ tiers: [
+ {
+ quantity: 10,
+ fee_per_block: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ {
+ quantity: 2,
+ fee_per_block: {
+ amount: 1000,
+ amount_formatted: '10.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 2000,
+ amount_formatted: '20.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ subscription_item: {
+ object: 'commerce_subscription_item',
+ id: 'string',
+ instance_id: 'string',
+ status: 'active',
+ credit: {
+ amount: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ cycle_days_remaining: 1,
+ cycle_days_total: 1,
+ cycle_remaining_percent: 1,
+ },
+ plan_id: 'string',
+ price_id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'string',
+ fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payment_method_id: 'string',
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ lifetime_paid: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ next_payment: {
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ date: 1,
+ },
+ payer_id: 'string',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ is_free_trial: true,
+ period_start: 1,
+ period_end: null,
+ proration_date: 'string',
+ canceled_at: null,
+ past_due_at: null,
+ ended_at: null,
+ created_at: 1,
+ updated_at: 1,
+ },
+ plan_period_start: 1,
+ is_immediate_plan_change: true,
+ free_trial_ends_at: 1,
+ needs_payment_method: true,
+ },
+ });
+ });
+
+ return {
+ description: 'Checkout with seats',
+ handlers: [checkoutAccountCreditHandler, subscriptionHandler, paymentMethodsHandler, ...clerkHandlers],
+ initialState: { session, user },
+ name: 'checkout-seats',
+ };
+}

packages/clerk-js/sandbox/scenarios/index.ts

@@ -1,5 +1,6 @@
 export { UserButtonSignedIn } from './user-button-signed-in';
 export { CheckoutAccountCredit } from './checkout-account-credit';
+export { CheckoutSeats } from './checkout-seats';
 export { OrgProfileSeatLimit } from './org-profile-seat-limit';
 export { PricingTableSBB } from './pricing-table-sbb';
 export { AnnualOnlyPlans } from './annual-only-plans';

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

@@ -46,6 +46,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
+ const descriptionElements = [];
+ if (planPeriod === 'annual') {
+ descriptionElements.push(localizationKeys('billing.billedAnnually'));
+ }
+ const seatUnitPrice = plan.unitPrices?.find(unitPrice => unitPrice.name.toLowerCase() === 'seats');
+ if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
+ descriptionElements.push(
+ seatUnitPrice.tiers[0].endsAfterBlock
+ ? localizationKeys('billing.pricingTable.seatCost.upToSeats', {
+ endsAfterBlock: seatUnitPrice.tiers[0].endsAfterBlock,
+ })
+ : localizationKeys('billing.pricingTable.seatCost.unlimitedSeats'),
+ );
+ }
+
  return (
  <Drawer.Body>
  <Box
@@ -61,7 +76,7 @@ export const CheckoutForm = withCardStateProvider(() => {
  <LineItems.Group>
  <LineItems.Title
  title={plan.name}
- description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}
+ description={descriptionElements}
  badge={
  plan.freeTrialEnabled && freeTrialEndsAt ? (
  <SubscriptionBadge subscription={{ status: 'free_trial' }} />

packages/clerk-js/sandbox/scenarios/checkout-seats.ts

@@ -0,0 +1,341 @@
+import {
+ clerkHandlers,
+ http,
+ HttpResponse,
+ EnvironmentService,
+ SessionService,
+ setClerkState,
+ type MockScenario,
+ UserService,
+} from '@clerk/msw';
+
+export function CheckoutSeats(): MockScenario {
+ const user = UserService.create();
+ const session = SessionService.create(user);
+
+ setClerkState({
+ environment: EnvironmentService.MULTI_SESSION,
+ session,
+ user,
+ });
+
+ const subscriptionHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/subscription', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const paymentMethodsHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/payment_methods', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const checkoutAccountCreditHandler = http.post('https://*.clerk.accounts.dev/v1/me/billing/checkouts', () => {
+ return HttpResponse.json({
+ response: {
+ object: 'commerce_checkout',
+ id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'Pro',
+ fee: {
+ amount: 0,
+ amount_formatted: '25.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ external_gateway_id: 'string',
+ status: 'needs_confirmation',
+ totals: {
+ subtotal: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ tax_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ grand_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_after_free_trial: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_now: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ past_due: null,
+ credit: {
+ amount: 1,
+ amount_formatted: '5.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ per_unit_totals: [
+ {
+ name: 'seats',
+ block_size: 1,
+ tiers: [
+ {
+ quantity: 10,
+ fee_per_block: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ {
+ quantity: 2,
+ fee_per_block: {
+ amount: 1000,
+ amount_formatted: '10.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 2000,
+ amount_formatted: '20.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ subscription_item: {
+ object: 'commerce_subscription_item',
+ id: 'string',
+ instance_id: 'string',
+ status: 'active',
+ credit: {
+ amount: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ cycle_days_remaining: 1,
+ cycle_days_total: 1,
+ cycle_remaining_percent: 1,
+ },
+ plan_id: 'string',
+ price_id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'string',
+ fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payment_method_id: 'string',
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ lifetime_paid: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ next_payment: {
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ date: 1,
+ },
+ payer_id: 'string',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ is_free_trial: true,
+ period_start: 1,
+ period_end: null,
+ proration_date: 'string',
+ canceled_at: null,
+ past_due_at: null,
+ ended_at: null,
+ created_at: 1,
+ updated_at: 1,
+ },
+ plan_period_start: 1,
+ is_immediate_plan_change: true,
+ free_trial_ends_at: 1,
+ needs_payment_method: true,
+ },
+ });
+ });
+
+ return {
+ description: 'Checkout with seats',
+ handlers: [checkoutAccountCreditHandler, subscriptionHandler, paymentMethodsHandler, ...clerkHandlers],
+ initialState: { session, user },
+ name: 'checkout-seats',
+ };
+}

packages/clerk-js/sandbox/scenarios/index.ts

@@ -1,5 +1,6 @@
 export { UserButtonSignedIn } from './user-button-signed-in';
 export { CheckoutAccountCredit } from './checkout-account-credit';
+export { CheckoutSeats } from './checkout-seats';
 export { OrgProfileSeatLimit } from './org-profile-seat-limit';
 export { PricingTableSBB } from './pricing-table-sbb';
 export { AnnualOnlyPlans } from './annual-only-plans';

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

@@ -46,6 +46,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
+ const descriptionElements = [];
+ if (planPeriod === 'annual') {
+ descriptionElements.push(localizationKeys('billing.billedAnnually'));
+ }
+ const seatUnitPrice = plan.unitPrices?.find(unitPrice => unitPrice.name.toLowerCase() === 'seats');
+ if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
+ descriptionElements.push(
+ seatUnitPrice.tiers[0].endsAfterBlock
+ ? localizationKeys('billing.pricingTable.seatCost.upToSeats', {
+ endsAfterBlock: seatUnitPrice.tiers[0].endsAfterBlock,
+ })
+ : localizationKeys('billing.pricingTable.seatCost.unlimitedSeats'),
+ );
+ }
+
  return (
  <Drawer.Body>
  <Box
@@ -61,7 +76,7 @@ export const CheckoutForm = withCardStateProvider(() => {
  <LineItems.Group>
  <LineItems.Title
  title={plan.name}
- description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}
+ description={descriptionElements}
  badge={
  plan.freeTrialEnabled && freeTrialEndsAt ? (
  <SubscriptionBadge subscription={{ status: 'free_trial' }} />

packages/clerk-js/sandbox/scenarios/checkout-seats.ts

@@ -0,0 +1,341 @@
+import {
+ clerkHandlers,
+ http,
+ HttpResponse,
+ EnvironmentService,
+ SessionService,
+ setClerkState,
+ type MockScenario,
+ UserService,
+} from '@clerk/msw';
+
+export function CheckoutSeats(): MockScenario {
+ const user = UserService.create();
+ const session = SessionService.create(user);
+
+ setClerkState({
+ environment: EnvironmentService.MULTI_SESSION,
+ session,
+ user,
+ });
+
+ const subscriptionHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/subscription', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const paymentMethodsHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/payment_methods', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const checkoutAccountCreditHandler = http.post('https://*.clerk.accounts.dev/v1/me/billing/checkouts', () => {
+ return HttpResponse.json({
+ response: {
+ object: 'commerce_checkout',
+ id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'Pro',
+ fee: {
+ amount: 0,
+ amount_formatted: '25.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ external_gateway_id: 'string',
+ status: 'needs_confirmation',
+ totals: {
+ subtotal: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ tax_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ grand_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_after_free_trial: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_now: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ past_due: null,
+ credit: {
+ amount: 1,
+ amount_formatted: '5.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ per_unit_totals: [
+ {
+ name: 'seats',
+ block_size: 1,
+ tiers: [
+ {
+ quantity: 10,
+ fee_per_block: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ {
+ quantity: 2,
+ fee_per_block: {
+ amount: 1000,
+ amount_formatted: '10.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 2000,
+ amount_formatted: '20.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ subscription_item: {
+ object: 'commerce_subscription_item',
+ id: 'string',
+ instance_id: 'string',
+ status: 'active',
+ credit: {
+ amount: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ cycle_days_remaining: 1,
+ cycle_days_total: 1,
+ cycle_remaining_percent: 1,
+ },
+ plan_id: 'string',
+ price_id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'string',
+ fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payment_method_id: 'string',
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ lifetime_paid: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ next_payment: {
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ date: 1,
+ },
+ payer_id: 'string',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ is_free_trial: true,
+ period_start: 1,
+ period_end: null,
+ proration_date: 'string',
+ canceled_at: null,
+ past_due_at: null,
+ ended_at: null,
+ created_at: 1,
+ updated_at: 1,
+ },
+ plan_period_start: 1,
+ is_immediate_plan_change: true,
+ free_trial_ends_at: 1,
+ needs_payment_method: true,
+ },
+ });
+ });
+
+ return {
+ description: 'Checkout with seats',
+ handlers: [checkoutAccountCreditHandler, subscriptionHandler, paymentMethodsHandler, ...clerkHandlers],
+ initialState: { session, user },
+ name: 'checkout-seats',
+ };
+}

packages/clerk-js/sandbox/scenarios/index.ts

@@ -1,5 +1,6 @@
 export { UserButtonSignedIn } from './user-button-signed-in';
 export { CheckoutAccountCredit } from './checkout-account-credit';
+export { CheckoutSeats } from './checkout-seats';
 export { OrgProfileSeatLimit } from './org-profile-seat-limit';
 export { PricingTableSBB } from './pricing-table-sbb';
 export { AnnualOnlyPlans } from './annual-only-plans';

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

@@ -46,6 +46,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
+ const descriptionElements = [];
+ if (planPeriod === 'annual') {
+ descriptionElements.push(localizationKeys('billing.billedAnnually'));
+ }
+ const seatUnitPrice = plan.unitPrices?.find(unitPrice => unitPrice.name.toLowerCase() === 'seats');
+ if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
+ descriptionElements.push(
+ seatUnitPrice.tiers[0].endsAfterBlock
+ ? localizationKeys('billing.pricingTable.seatCost.upToSeats', {
+ endsAfterBlock: seatUnitPrice.tiers[0].endsAfterBlock,
+ })
+ : localizationKeys('billing.pricingTable.seatCost.unlimitedSeats'),
+ );
+ }
+
  return (
  <Drawer.Body>
  <Box
@@ -61,7 +76,7 @@ export const CheckoutForm = withCardStateProvider(() => {
  <LineItems.Group>
  <LineItems.Title
  title={plan.name}
- description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}
+ description={descriptionElements}
  badge={
  plan.freeTrialEnabled && freeTrialEndsAt ? (
  <SubscriptionBadge subscription={{ status: 'free_trial' }} />

packages/clerk-js/sandbox/scenarios/checkout-seats.ts

@@ -0,0 +1,341 @@
+import {
+ clerkHandlers,
+ http,
+ HttpResponse,
+ EnvironmentService,
+ SessionService,
+ setClerkState,
+ type MockScenario,
+ UserService,
+} from '@clerk/msw';
+
+export function CheckoutSeats(): MockScenario {
+ const user = UserService.create();
+ const session = SessionService.create(user);
+
+ setClerkState({
+ environment: EnvironmentService.MULTI_SESSION,
+ session,
+ user,
+ });
+
+ const subscriptionHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/subscription', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const paymentMethodsHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/payment_methods', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const checkoutAccountCreditHandler = http.post('https://*.clerk.accounts.dev/v1/me/billing/checkouts', () => {
+ return HttpResponse.json({
+ response: {
+ object: 'commerce_checkout',
+ id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'Pro',
+ fee: {
+ amount: 0,
+ amount_formatted: '25.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ external_gateway_id: 'string',
+ status: 'needs_confirmation',
+ totals: {
+ subtotal: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ tax_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ grand_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_after_free_trial: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_now: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ past_due: null,
+ credit: {
+ amount: 1,
+ amount_formatted: '5.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ per_unit_totals: [
+ {
+ name: 'seats',
+ block_size: 1,
+ tiers: [
+ {
+ quantity: 10,
+ fee_per_block: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ {
+ quantity: 2,
+ fee_per_block: {
+ amount: 1000,
+ amount_formatted: '10.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 2000,
+ amount_formatted: '20.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ subscription_item: {
+ object: 'commerce_subscription_item',
+ id: 'string',
+ instance_id: 'string',
+ status: 'active',
+ credit: {
+ amount: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ cycle_days_remaining: 1,
+ cycle_days_total: 1,
+ cycle_remaining_percent: 1,
+ },
+ plan_id: 'string',
+ price_id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'string',
+ fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payment_method_id: 'string',
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ lifetime_paid: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ next_payment: {
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ date: 1,
+ },
+ payer_id: 'string',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ is_free_trial: true,
+ period_start: 1,
+ period_end: null,
+ proration_date: 'string',
+ canceled_at: null,
+ past_due_at: null,
+ ended_at: null,
+ created_at: 1,
+ updated_at: 1,
+ },
+ plan_period_start: 1,
+ is_immediate_plan_change: true,
+ free_trial_ends_at: 1,
+ needs_payment_method: true,
+ },
+ });
+ });
+
+ return {
+ description: 'Checkout with seats',
+ handlers: [checkoutAccountCreditHandler, subscriptionHandler, paymentMethodsHandler, ...clerkHandlers],
+ initialState: { session, user },
+ name: 'checkout-seats',
+ };
+}

packages/clerk-js/sandbox/scenarios/index.ts

@@ -1,5 +1,6 @@
 export { UserButtonSignedIn } from './user-button-signed-in';
 export { CheckoutAccountCredit } from './checkout-account-credit';
+export { CheckoutSeats } from './checkout-seats';
 export { OrgProfileSeatLimit } from './org-profile-seat-limit';
 export { PricingTableSBB } from './pricing-table-sbb';
 export { AnnualOnlyPlans } from './annual-only-plans';

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

@@ -46,6 +46,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
+ const descriptionElements = [];
+ if (planPeriod === 'annual') {
+ descriptionElements.push(localizationKeys('billing.billedAnnually'));
+ }
+ const seatUnitPrice = plan.unitPrices?.find(unitPrice => unitPrice.name.toLowerCase() === 'seats');
+ if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
+ descriptionElements.push(
+ seatUnitPrice.tiers[0].endsAfterBlock
+ ? localizationKeys('billing.pricingTable.seatCost.upToSeats', {
+ endsAfterBlock: seatUnitPrice.tiers[0].endsAfterBlock,
+ })
+ : localizationKeys('billing.pricingTable.seatCost.unlimitedSeats'),
+ );
+ }
+
  return (
  <Drawer.Body>
  <Box
@@ -61,7 +76,7 @@ export const CheckoutForm = withCardStateProvider(() => {
  <LineItems.Group>
  <LineItems.Title
  title={plan.name}
- description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}
+ description={descriptionElements}
  badge={
  plan.freeTrialEnabled && freeTrialEndsAt ? (
  <SubscriptionBadge subscription={{ status: 'free_trial' }} />

packages/clerk-js/sandbox/scenarios/checkout-seats.ts

@@ -0,0 +1,341 @@
+import {
+ clerkHandlers,
+ http,
+ HttpResponse,
+ EnvironmentService,
+ SessionService,
+ setClerkState,
+ type MockScenario,
+ UserService,
+} from '@clerk/msw';
+
+export function CheckoutSeats(): MockScenario {
+ const user = UserService.create();
+ const session = SessionService.create(user);
+
+ setClerkState({
+ environment: EnvironmentService.MULTI_SESSION,
+ session,
+ user,
+ });
+
+ const subscriptionHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/subscription', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const paymentMethodsHandler = http.get('https://*.clerk.accounts.dev/v1/me/billing/payment_methods', () => {
+ return HttpResponse.json({
+ response: {
+ data: {},
+ },
+ });
+ });
+
+ const checkoutAccountCreditHandler = http.post('https://*.clerk.accounts.dev/v1/me/billing/checkouts', () => {
+ return HttpResponse.json({
+ response: {
+ object: 'commerce_checkout',
+ id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'Pro',
+ fee: {
+ amount: 0,
+ amount_formatted: '25.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ external_gateway_id: 'string',
+ status: 'needs_confirmation',
+ totals: {
+ subtotal: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ tax_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ grand_total: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_after_free_trial: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ total_due_now: {
+ amount: 4500,
+ amount_formatted: '45.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ past_due: null,
+ credit: {
+ amount: 1,
+ amount_formatted: '5.00',
+ currency: 'string',
+ currency_symbol: '$',
+ },
+ per_unit_totals: [
+ {
+ name: 'seats',
+ block_size: 1,
+ tiers: [
+ {
+ quantity: 10,
+ fee_per_block: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 0,
+ amount_formatted: '0.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ {
+ quantity: 2,
+ fee_per_block: {
+ amount: 1000,
+ amount_formatted: '10.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ total: {
+ amount: 2000,
+ amount_formatted: '20.00',
+ currency: 'USD',
+ currency_symbol: '$',
+ },
+ },
+ ],
+ },
+ ],
+ },
+ subscription_item: {
+ object: 'commerce_subscription_item',
+ id: 'string',
+ instance_id: 'string',
+ status: 'active',
+ credit: {
+ amount: {
+ amount: 1,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ cycle_days_remaining: 1,
+ cycle_days_total: 1,
+ cycle_remaining_percent: 1,
+ },
+ plan_id: 'string',
+ price_id: 'string',
+ plan: {
+ object: 'commerce_plan',
+ id: 'string',
+ name: 'string',
+ fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_monthly_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ annual_fee: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ description: null,
+ is_default: true,
+ is_recurring: true,
+ publicly_visible: true,
+ has_base_fee: true,
+ for_payer_type: 'string',
+ slug: 'string',
+ avatar_url: null,
+ free_trial_enabled: true,
+ free_trial_days: null,
+ features: [
+ {
+ object: 'feature',
+ id: 'string',
+ name: 'string',
+ description: null,
+ slug: 'string',
+ avatar_url: null,
+ },
+ ],
+ },
+ plan_period: 'month',
+ payment_method_id: 'string',
+ payment_method: {
+ object: 'commerce_payment_method',
+ id: 'string',
+ payer_id: 'string',
+ payment_type: 'card',
+ is_default: true,
+ gateway: 'string',
+ gateway_external_id: 'string',
+ gateway_external_account_id: null,
+ last4: null,
+ status: 'active',
+ wallet_type: null,
+ card_type: null,
+ expiry_year: null,
+ expiry_month: null,
+ created_at: 1,
+ updated_at: 1,
+ is_removable: true,
+ },
+ lifetime_paid: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ next_payment: {
+ amount: {
+ amount: 0,
+ amount_formatted: 'string',
+ currency: 'string',
+ currency_symbol: 'string',
+ },
+ date: 1,
+ },
+ payer_id: 'string',
+ payer: {
+ object: 'commerce_payer',
+ id: 'string',
+ instance_id: 'string',
+ user_id: null,
+ first_name: null,
+ last_name: null,
+ email: null,
+ organization_id: null,
+ organization_name: null,
+ image_url: 'https://example.com',
+ created_at: 1,
+ updated_at: 1,
+ },
+ is_free_trial: true,
+ period_start: 1,
+ period_end: null,
+ proration_date: 'string',
+ canceled_at: null,
+ past_due_at: null,
+ ended_at: null,
+ created_at: 1,
+ updated_at: 1,
+ },
+ plan_period_start: 1,
+ is_immediate_plan_change: true,
+ free_trial_ends_at: 1,
+ needs_payment_method: true,
+ },
+ });
+ });
+
+ return {
+ description: 'Checkout with seats',
+ handlers: [checkoutAccountCreditHandler, subscriptionHandler, paymentMethodsHandler, ...clerkHandlers],
+ initialState: { session, user },
+ name: 'checkout-seats',
+ };
+}

packages/clerk-js/sandbox/scenarios/index.ts

@@ -1,5 +1,6 @@
 export { UserButtonSignedIn } from './user-button-signed-in';
 export { CheckoutAccountCredit } from './checkout-account-credit';
+export { CheckoutSeats } from './checkout-seats';
 export { OrgProfileSeatLimit } from './org-profile-seat-limit';
 export { PricingTableSBB } from './pricing-table-sbb';
 export { AnnualOnlyPlans } from './annual-only-plans';

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

@@ -46,6 +46,21 @@ export const CheckoutForm = withCardStateProvider(() => {
  : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  plan.annualMonthlyFee!;
 
+ const descriptionElements = [];
+ if (planPeriod === 'annual') {
+ descriptionElements.push(localizationKeys('billing.billedAnnually'));
+ }
+ const seatUnitPrice = plan.unitPrices?.find(unitPrice => unitPrice.name.toLowerCase() === 'seats');
+ if (seatUnitPrice && seatUnitPrice.tiers.length === 1 && seatUnitPrice.tiers[0].feePerBlock.amount === 0) {
+ descriptionElements.push(
+ seatUnitPrice.tiers[0].endsAfterBlock
+ ? localizationKeys('billing.pricingTable.seatCost.upToSeats', {
+ endsAfterBlock: seatUnitPrice.tiers[0].endsAfterBlock,
+ })
+ : localizationKeys('billing.pricingTable.seatCost.unlimitedSeats'),
+ );
+ }
+
  return (
  <Drawer.Body>
  <Box
@@ -61,7 +76,7 @@ export const CheckoutForm = withCardStateProvider(() => {
  <LineItems.Group>
  <LineItems.Title
  title={plan.name}
- description={planPeriod === 'annual' ? localizationKeys('billing.billedAnnually') : undefined}
+ description={descriptionElements}
  badge={
  plan.freeTrialEnabled && freeTrialEndsAt ? (
  <SubscriptionBadge subscription={{ status: 'free_trial' }} />