feat(clerk-js,types,localizations): Preliminary Commerce work including PricingTable and Checkout components

.changeset/large-feet-hammer.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce experimental billing APIs and components

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "560kB" },
- { "path": "./dist/clerk.browser.js", "maxSize": "75kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "48.3KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "89KB" },
- { "path": "./dist/vendors*.js", "maxSize": "25.1KB" },
+ { "path": "./dist/clerk.js", "maxSize": "570kB" },
+ { "path": "./dist/clerk.browser.js", "maxSize": "76kB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "92KB" },
+ { "path": "./dist/vendors*.js", "maxSize": "26.5KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
  { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
@@ -18,6 +18,8 @@
  { "path": "./dist/userverification*.js", "maxSize": "5KB" },
  { "path": "./dist/onetap*.js", "maxSize": "1KB" },
  { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
- { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" }
+ { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" },
+ { "path": "./dist/pricingTable*.js", "maxSize": "3.5KB" },
+ { "path": "./dist/checkout*.js", "maxSize": "8.8KB" }
  ]
 }

packages/clerk-js/package.json

@@ -63,6 +63,8 @@
  "@floating-ui/react": "0.25.4",
  "@floating-ui/react-dom": "^2.0.2",
  "@formkit/auto-animate": "^0.8.1",
+ "@stripe/react-stripe-js": "3.1.1",
+ "@stripe/stripe-js": "5.6.0",
  "@swc/helpers": "^0.5.13",
  "@zxcvbn-ts/core": "3.0.4",
  "@zxcvbn-ts/language-common": "3.0.4",

packages/clerk-js/rspack.config.js

@@ -93,6 +93,15 @@ const common = ({ mode, disableRHC = false }) => {
  name: 'signup',
  test: module => module.resource && module.resource.includes('/ui/components/SignUp'),
  },
+ checkout: {
+ minChunks: 1,
+ name: 'checkout',
+ test: module =>
+ module.resource &&
+ (module.resource.includes('/ui/components/Checkout') ||
+ // Include `@stripe/react-stripe-js` and `@stripe/stripe-js` in the checkout chunk
+ module.resource.includes('/node_modules/@stripe')),
+ },
  common: {
  minChunks: 1,
  name: 'ui-common',

packages/clerk-js/sandbox/app.ts

@@ -16,6 +16,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationProfile',
  'organizationSwitcher',
  'waitlist',
+ 'pricingTable',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -73,6 +74,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationProfile: buildComponentControls('organizationProfile'),
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
+ pricingTable: buildComponentControls('pricingTable'),
 };
 
 declare global {
@@ -95,7 +97,7 @@ const app = document.getElementById('app') as HTMLDivElement;
 function mountIndex(element: HTMLDivElement) {
  assertClerkIsLoaded(Clerk);
  const user = Clerk.user;
- element.innerHTML = `<pre><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
+ element.innerHTML = `<pre class="text-left whitespace-pre overflow-x-auto bg-white p-4 border border-gray-100 rounded-md text-sm"><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
 }
 
 function mountOpenSignInButton(element: HTMLDivElement, props) {
@@ -167,6 +169,9 @@ function addCurrentRouteIndicator(currentRoute: string) {
  },
  });
  },
+ '/pricing-table': () => {
+ Clerk.__experimental_mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },
@@ -183,6 +188,7 @@ function addCurrentRouteIndicator(currentRoute: string) {
  ...(componentControls.clerk.getProps() ?? {}),
  signInUrl: '/sign-in',
  signUpUrl: '/sign-up',
+ experimental: { commerce: true },
  });
  renderCurrentRoute();
  } else {

packages/clerk-js/sandbox/template.html

@@ -249,6 +249,14 @@
  Keyless
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/pricing-table"
+ >
+ PricingTable
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
@@ -274,7 +282,7 @@
  >
  <div
  id="app"
- class="max-w-full p-12"
+ class="container w-full p-12"
  ></div>
  </main>
 

packages/clerk-js/src/core/clerk.ts

@@ -13,6 +13,8 @@ import {
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
+ __experimental_CommerceNamespace,
+ __experimental_PricingTableProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
  AuthenticateWithGoogleOneTapParams,
@@ -119,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
  Client,
@@ -166,6 +169,7 @@ export class Clerk implements ClerkInterface {
  version: __PKG_VERSION__,
  environment: process.env.NODE_ENV || 'production',
  };
+ private static _commerce: __experimental_CommerceNamespace;
 
  public client: ClientResource | undefined;
  public session: SignedInSessionResource | null | undefined;
@@ -287,6 +291,19 @@ export class Clerk implements ClerkInterface {
  return this.#options.standardBrowser || false;
  }
 
+ get __experimental_commerce(): __experimental_CommerceNamespace {
+ if (!this.#options.experimental?.commerce) {
+ throw new Error(
+ 'Clerk: commerce functionality is currently in an experimental state. To enable, pass `experimental.commerce = true`.',
+ );
+ }
+
+ if (!Clerk._commerce) {
+ Clerk._commerce = new __experimental_Commerce();
+ }
+ return Clerk._commerce;
+ }
+
  public __internal_getOption<K extends keyof ClerkOptions>(key: K): ClerkOptions[K] {
  return this.#options[key];
  }
@@ -886,6 +903,29 @@ export class Clerk implements ClerkInterface {
  void this.#componentControls?.ensureMounted().then(controls => controls.unmountComponent({ node }));
  };
 
+ public __experimental_mountPricingTable = (node: HTMLDivElement, props?: __experimental_PricingTableProps): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'PricingTable' }).then(controls =>
+ controls.mountComponent({
+ name: 'PricingTable',
+ appearanceKey: 'pricingTable',
+ node,
+ props,
+ }),
+ );
+
+ this.telemetry?.record(eventPrebuiltComponentMounted('PricingTable', props));
+ };
+
+ public __experimental_unmountPricingTable = (node: HTMLDivElement): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls =>
+ controls.unmountComponent({
+ node,
+ }),
+ );
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

packages/clerk-js/src/core/modules/commerce/Commerce.ts

@@ -0,0 +1,46 @@
+import type {
+ __experimental_AddPaymentSourceParams,
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceNamespace,
+ __experimental_CommercePaymentSourceJSON,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { __experimental_CommercePaymentSource, BaseResource } from '../../resources/internal';
+import { __experimental_CommerceBilling } from './CommerceBilling';
+
+export class __experimental_Commerce implements __experimental_CommerceNamespace {
+ private static _billing: __experimental_CommerceBillingNamespace;
+
+ get __experimental_billing(): __experimental_CommerceBillingNamespace {
+ if (!__experimental_Commerce._billing) {
+ __experimental_Commerce._billing = new __experimental_CommerceBilling();
+ }
+ return __experimental_Commerce._billing;
+ }
+
+ addPaymentSource = async (params: __experimental_AddPaymentSourceParams) => {
+ const json = (
+ await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommercePaymentSourceJSON;
+ return new __experimental_CommercePaymentSource(json);
+ };
+
+ getPaymentSources = async () => {
+ return await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'GET',
+ }).then(res => {
+ const { data: paymentSources, total_count } =
+ res as unknown as ClerkPaginatedResponse<__experimental_CommercePaymentSourceJSON>;
+ return {
+ total_count,
+ data: paymentSources.map(paymentSource => new __experimental_CommercePaymentSource(paymentSource)),
+ };
+ });
+ };
+}

packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

@@ -0,0 +1,37 @@
+import type {
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommercePlanResource,
+ __experimental_CommerceProductJSON,
+ __experimental_CreateCheckoutParams,
+ __experimental_GetPlansParams,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams';
+import { __experimental_CommerceCheckout, __experimental_CommercePlan, BaseResource } from '../../resources/internal';
+
+export class __experimental_CommerceBilling implements __experimental_CommerceBillingNamespace {
+ getPlans = async (params?: __experimental_GetPlansParams): Promise<__experimental_CommercePlanResource[]> => {
+ const { data: products } = (await BaseResource._fetch({
+ path: `/commerce/products`,
+ method: 'GET',
+ search: convertPageToOffsetSearchParams(params),
+ })) as unknown as ClerkPaginatedResponse<__experimental_CommerceProductJSON>;
+
+ const defaultProduct = products.find(product => product.is_default);
+ return defaultProduct?.plans.map(plan => new __experimental_CommercePlan(plan)) || [];
+ };
+
+ startCheckout = async (params: __experimental_CreateCheckoutParams) => {
+ const json = (
+ await BaseResource._fetch<__experimental_CommerceCheckoutJSON>({
+ path: `/me/commerce/checkouts`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommerceCheckoutJSON;
+
+ return new __experimental_CommerceCheckout(json);
+ };
+}

packages/clerk-js/src/core/modules/commerce/index.ts

@@ -0,0 +1,2 @@
+export * from './Commerce';
+export * from './CommerceBilling';

packages/clerk-js/src/core/resources/Base.ts

@@ -62,7 +62,7 @@ export abstract class BaseResource {
  return !this.id;
  }
 
-protected static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
+ static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
  requestInit: FapiRequestInit,
  opts: BaseFetchOptions = {},
  ): Promise<FapiResponseJSON<J> | null> {

packages/clerk-js/src/core/resources/CommerceCheckout.ts

@@ -0,0 +1,63 @@
+import type {
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommerceCheckoutResource,
+ __experimental_CommerceTotals,
+ __experimental_ConfirmCheckoutParams,
+} from '@clerk/types';
+
+import { commerceTotalsFromJSON } from '../../utils';
+import {
+ __experimental_CommerceInvoice,
+ __experimental_CommercePaymentSource,
+ __experimental_CommercePlan,
+ __experimental_CommerceSubscription,
+ BaseResource,
+} from './internal';
+
+export class __experimental_CommerceCheckout extends BaseResource implements __experimental_CommerceCheckoutResource {
+ pathRoot = '/me/commerce/checkouts';
+
+ id!: string;
+ externalClientSecret!: string;
+ externalGatewayId!: string;
+ invoice?: __experimental_CommerceInvoice;
+ paymentSource?: __experimental_CommercePaymentSource;
+ plan!: __experimental_CommercePlan;
+ planPeriod!: string;
+ status!: string;
+ subscription?: __experimental_CommerceSubscription;
+ totals!: __experimental_CommerceTotals;
+
+ constructor(data: __experimental_CommerceCheckoutJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceCheckoutJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.externalClientSecret = data.external_client_secret;
+ this.externalGatewayId = data.external_gateway_id;
+ this.invoice = data.invoice ? new __experimental_CommerceInvoice(data.invoice) : undefined;
+ this.paymentSource = data.payment_source
+ ? new __experimental_CommercePaymentSource(data.payment_source)
+ : undefined;
+ this.plan = new __experimental_CommercePlan(data.plan);
+ this.planPeriod = data.plan_period;
+ this.status = data.status;
+ this.subscription = data.subscription ? new __experimental_CommerceSubscription(data.subscription) : undefined;
+ this.totals = commerceTotalsFromJSON(data.totals);
+
+ return this;
+ }
+
+ confirm = (params?: __experimental_ConfirmCheckoutParams): Promise<this> => {
+ return this._basePatch({
+ path: this.path('confirm'),
+ body: params as any,
+ });
+ };
+}

packages/clerk-js/src/core/resources/CommerceFeature.ts

@@ -0,0 +1,30 @@
+import type { __experimental_CommerceFeatureJSON, __experimental_CommerceFeatureResource } from '@clerk/types';
+
+import { BaseResource } from './internal';
+
+export class __experimental_CommerceFeature extends BaseResource implements __experimental_CommerceFeatureResource {
+ id!: string;
+ name!: string;
+ description!: string;
+ slug!: string;
+ avatarUrl!: string;
+
+ constructor(data: __experimental_CommerceFeatureJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceFeatureJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.name = data.name;
+ this.description = data.description;
+ this.slug = data.slug;
+ this.avatarUrl = data.avatar_url;
+
+ return this;
+ }
+}

.changeset/large-feet-hammer.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce experimental billing APIs and components

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "560kB" },
- { "path": "./dist/clerk.browser.js", "maxSize": "75kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "48.3KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "89KB" },
- { "path": "./dist/vendors*.js", "maxSize": "25.1KB" },
+ { "path": "./dist/clerk.js", "maxSize": "570kB" },
+ { "path": "./dist/clerk.browser.js", "maxSize": "76kB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "92KB" },
+ { "path": "./dist/vendors*.js", "maxSize": "26.5KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
  { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
@@ -18,6 +18,8 @@
  { "path": "./dist/userverification*.js", "maxSize": "5KB" },
  { "path": "./dist/onetap*.js", "maxSize": "1KB" },
  { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
- { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" }
+ { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" },
+ { "path": "./dist/pricingTable*.js", "maxSize": "3.5KB" },
+ { "path": "./dist/checkout*.js", "maxSize": "8.8KB" }
  ]
 }

packages/clerk-js/package.json

@@ -63,6 +63,8 @@
  "@floating-ui/react": "0.25.4",
  "@floating-ui/react-dom": "^2.0.2",
  "@formkit/auto-animate": "^0.8.1",
+ "@stripe/react-stripe-js": "3.1.1",
+ "@stripe/stripe-js": "5.6.0",
  "@swc/helpers": "^0.5.13",
  "@zxcvbn-ts/core": "3.0.4",
  "@zxcvbn-ts/language-common": "3.0.4",

packages/clerk-js/rspack.config.js

@@ -93,6 +93,15 @@ const common = ({ mode, disableRHC = false }) => {
  name: 'signup',
  test: module => module.resource && module.resource.includes('/ui/components/SignUp'),
  },
+ checkout: {
+ minChunks: 1,
+ name: 'checkout',
+ test: module =>
+ module.resource &&
+ (module.resource.includes('/ui/components/Checkout') ||
+ // Include `@stripe/react-stripe-js` and `@stripe/stripe-js` in the checkout chunk
+ module.resource.includes('/node_modules/@stripe')),
+ },
  common: {
  minChunks: 1,
  name: 'ui-common',

packages/clerk-js/sandbox/app.ts

@@ -16,6 +16,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationProfile',
  'organizationSwitcher',
  'waitlist',
+ 'pricingTable',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -73,6 +74,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationProfile: buildComponentControls('organizationProfile'),
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
+ pricingTable: buildComponentControls('pricingTable'),
 };
 
 declare global {
@@ -95,7 +97,7 @@ const app = document.getElementById('app') as HTMLDivElement;
 function mountIndex(element: HTMLDivElement) {
  assertClerkIsLoaded(Clerk);
  const user = Clerk.user;
- element.innerHTML = `<pre><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
+ element.innerHTML = `<pre class="text-left whitespace-pre overflow-x-auto bg-white p-4 border border-gray-100 rounded-md text-sm"><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
 }
 
 function mountOpenSignInButton(element: HTMLDivElement, props) {
@@ -167,6 +169,9 @@ function addCurrentRouteIndicator(currentRoute: string) {
  },
  });
  },
+ '/pricing-table': () => {
+ Clerk.__experimental_mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },
@@ -183,6 +188,7 @@ function addCurrentRouteIndicator(currentRoute: string) {
  ...(componentControls.clerk.getProps() ?? {}),
  signInUrl: '/sign-in',
  signUpUrl: '/sign-up',
+ experimental: { commerce: true },
  });
  renderCurrentRoute();
  } else {

packages/clerk-js/sandbox/template.html

@@ -249,6 +249,14 @@
  Keyless
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/pricing-table"
+ >
+ PricingTable
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
@@ -274,7 +282,7 @@
  >
  <div
  id="app"
- class="max-w-full p-12"
+ class="container w-full p-12"
  ></div>
  </main>
 

packages/clerk-js/src/core/clerk.ts

@@ -13,6 +13,8 @@ import {
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
+ __experimental_CommerceNamespace,
+ __experimental_PricingTableProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
  AuthenticateWithGoogleOneTapParams,
@@ -119,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
  Client,
@@ -166,6 +169,7 @@ export class Clerk implements ClerkInterface {
  version: __PKG_VERSION__,
  environment: process.env.NODE_ENV || 'production',
  };
+ private static _commerce: __experimental_CommerceNamespace;
 
  public client: ClientResource | undefined;
  public session: SignedInSessionResource | null | undefined;
@@ -287,6 +291,19 @@ export class Clerk implements ClerkInterface {
  return this.#options.standardBrowser || false;
  }
 
+ get __experimental_commerce(): __experimental_CommerceNamespace {
+ if (!this.#options.experimental?.commerce) {
+ throw new Error(
+ 'Clerk: commerce functionality is currently in an experimental state. To enable, pass `experimental.commerce = true`.',
+ );
+ }
+
+ if (!Clerk._commerce) {
+ Clerk._commerce = new __experimental_Commerce();
+ }
+ return Clerk._commerce;
+ }
+
  public __internal_getOption<K extends keyof ClerkOptions>(key: K): ClerkOptions[K] {
  return this.#options[key];
  }
@@ -886,6 +903,29 @@ export class Clerk implements ClerkInterface {
  void this.#componentControls?.ensureMounted().then(controls => controls.unmountComponent({ node }));
  };
 
+ public __experimental_mountPricingTable = (node: HTMLDivElement, props?: __experimental_PricingTableProps): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'PricingTable' }).then(controls =>
+ controls.mountComponent({
+ name: 'PricingTable',
+ appearanceKey: 'pricingTable',
+ node,
+ props,
+ }),
+ );
+
+ this.telemetry?.record(eventPrebuiltComponentMounted('PricingTable', props));
+ };
+
+ public __experimental_unmountPricingTable = (node: HTMLDivElement): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls =>
+ controls.unmountComponent({
+ node,
+ }),
+ );
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

packages/clerk-js/src/core/modules/commerce/Commerce.ts

@@ -0,0 +1,46 @@
+import type {
+ __experimental_AddPaymentSourceParams,
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceNamespace,
+ __experimental_CommercePaymentSourceJSON,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { __experimental_CommercePaymentSource, BaseResource } from '../../resources/internal';
+import { __experimental_CommerceBilling } from './CommerceBilling';
+
+export class __experimental_Commerce implements __experimental_CommerceNamespace {
+ private static _billing: __experimental_CommerceBillingNamespace;
+
+ get __experimental_billing(): __experimental_CommerceBillingNamespace {
+ if (!__experimental_Commerce._billing) {
+ __experimental_Commerce._billing = new __experimental_CommerceBilling();
+ }
+ return __experimental_Commerce._billing;
+ }
+
+ addPaymentSource = async (params: __experimental_AddPaymentSourceParams) => {
+ const json = (
+ await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommercePaymentSourceJSON;
+ return new __experimental_CommercePaymentSource(json);
+ };
+
+ getPaymentSources = async () => {
+ return await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'GET',
+ }).then(res => {
+ const { data: paymentSources, total_count } =
+ res as unknown as ClerkPaginatedResponse<__experimental_CommercePaymentSourceJSON>;
+ return {
+ total_count,
+ data: paymentSources.map(paymentSource => new __experimental_CommercePaymentSource(paymentSource)),
+ };
+ });
+ };
+}

packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

@@ -0,0 +1,37 @@
+import type {
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommercePlanResource,
+ __experimental_CommerceProductJSON,
+ __experimental_CreateCheckoutParams,
+ __experimental_GetPlansParams,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams';
+import { __experimental_CommerceCheckout, __experimental_CommercePlan, BaseResource } from '../../resources/internal';
+
+export class __experimental_CommerceBilling implements __experimental_CommerceBillingNamespace {
+ getPlans = async (params?: __experimental_GetPlansParams): Promise<__experimental_CommercePlanResource[]> => {
+ const { data: products } = (await BaseResource._fetch({
+ path: `/commerce/products`,
+ method: 'GET',
+ search: convertPageToOffsetSearchParams(params),
+ })) as unknown as ClerkPaginatedResponse<__experimental_CommerceProductJSON>;
+
+ const defaultProduct = products.find(product => product.is_default);
+ return defaultProduct?.plans.map(plan => new __experimental_CommercePlan(plan)) || [];
+ };
+
+ startCheckout = async (params: __experimental_CreateCheckoutParams) => {
+ const json = (
+ await BaseResource._fetch<__experimental_CommerceCheckoutJSON>({
+ path: `/me/commerce/checkouts`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommerceCheckoutJSON;
+
+ return new __experimental_CommerceCheckout(json);
+ };
+}

packages/clerk-js/src/core/modules/commerce/index.ts

@@ -0,0 +1,2 @@
+export * from './Commerce';
+export * from './CommerceBilling';

packages/clerk-js/src/core/resources/Base.ts

@@ -62,7 +62,7 @@ export abstract class BaseResource {
  return !this.id;
  }
 
-protected static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
+ static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
  requestInit: FapiRequestInit,
  opts: BaseFetchOptions = {},
  ): Promise<FapiResponseJSON<J> | null> {

packages/clerk-js/src/core/resources/CommerceCheckout.ts

@@ -0,0 +1,63 @@
+import type {
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommerceCheckoutResource,
+ __experimental_CommerceTotals,
+ __experimental_ConfirmCheckoutParams,
+} from '@clerk/types';
+
+import { commerceTotalsFromJSON } from '../../utils';
+import {
+ __experimental_CommerceInvoice,
+ __experimental_CommercePaymentSource,
+ __experimental_CommercePlan,
+ __experimental_CommerceSubscription,
+ BaseResource,
+} from './internal';
+
+export class __experimental_CommerceCheckout extends BaseResource implements __experimental_CommerceCheckoutResource {
+ pathRoot = '/me/commerce/checkouts';
+
+ id!: string;
+ externalClientSecret!: string;
+ externalGatewayId!: string;
+ invoice?: __experimental_CommerceInvoice;
+ paymentSource?: __experimental_CommercePaymentSource;
+ plan!: __experimental_CommercePlan;
+ planPeriod!: string;
+ status!: string;
+ subscription?: __experimental_CommerceSubscription;
+ totals!: __experimental_CommerceTotals;
+
+ constructor(data: __experimental_CommerceCheckoutJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceCheckoutJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.externalClientSecret = data.external_client_secret;
+ this.externalGatewayId = data.external_gateway_id;
+ this.invoice = data.invoice ? new __experimental_CommerceInvoice(data.invoice) : undefined;
+ this.paymentSource = data.payment_source
+ ? new __experimental_CommercePaymentSource(data.payment_source)
+ : undefined;
+ this.plan = new __experimental_CommercePlan(data.plan);
+ this.planPeriod = data.plan_period;
+ this.status = data.status;
+ this.subscription = data.subscription ? new __experimental_CommerceSubscription(data.subscription) : undefined;
+ this.totals = commerceTotalsFromJSON(data.totals);
+
+ return this;
+ }
+
+ confirm = (params?: __experimental_ConfirmCheckoutParams): Promise<this> => {
+ return this._basePatch({
+ path: this.path('confirm'),
+ body: params as any,
+ });
+ };
+}

packages/clerk-js/src/core/resources/CommerceFeature.ts

@@ -0,0 +1,30 @@
+import type { __experimental_CommerceFeatureJSON, __experimental_CommerceFeatureResource } from '@clerk/types';
+
+import { BaseResource } from './internal';
+
+export class __experimental_CommerceFeature extends BaseResource implements __experimental_CommerceFeatureResource {
+ id!: string;
+ name!: string;
+ description!: string;
+ slug!: string;
+ avatarUrl!: string;
+
+ constructor(data: __experimental_CommerceFeatureJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceFeatureJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.name = data.name;
+ this.description = data.description;
+ this.slug = data.slug;
+ this.avatarUrl = data.avatar_url;
+
+ return this;
+ }
+}

.changeset/large-feet-hammer.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce experimental billing APIs and components

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "560kB" },
- { "path": "./dist/clerk.browser.js", "maxSize": "75kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "48.3KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "89KB" },
- { "path": "./dist/vendors*.js", "maxSize": "25.1KB" },
+ { "path": "./dist/clerk.js", "maxSize": "570kB" },
+ { "path": "./dist/clerk.browser.js", "maxSize": "76kB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "92KB" },
+ { "path": "./dist/vendors*.js", "maxSize": "26.5KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
  { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
@@ -18,6 +18,8 @@
  { "path": "./dist/userverification*.js", "maxSize": "5KB" },
  { "path": "./dist/onetap*.js", "maxSize": "1KB" },
  { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
- { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" }
+ { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" },
+ { "path": "./dist/pricingTable*.js", "maxSize": "3.5KB" },
+ { "path": "./dist/checkout*.js", "maxSize": "8.8KB" }
  ]
 }

packages/clerk-js/package.json

@@ -63,6 +63,8 @@
  "@floating-ui/react": "0.25.4",
  "@floating-ui/react-dom": "^2.0.2",
  "@formkit/auto-animate": "^0.8.1",
+ "@stripe/react-stripe-js": "3.1.1",
+ "@stripe/stripe-js": "5.6.0",
  "@swc/helpers": "^0.5.13",
  "@zxcvbn-ts/core": "3.0.4",
  "@zxcvbn-ts/language-common": "3.0.4",

packages/clerk-js/rspack.config.js

@@ -93,6 +93,15 @@ const common = ({ mode, disableRHC = false }) => {
  name: 'signup',
  test: module => module.resource && module.resource.includes('/ui/components/SignUp'),
  },
+ checkout: {
+ minChunks: 1,
+ name: 'checkout',
+ test: module =>
+ module.resource &&
+ (module.resource.includes('/ui/components/Checkout') ||
+ // Include `@stripe/react-stripe-js` and `@stripe/stripe-js` in the checkout chunk
+ module.resource.includes('/node_modules/@stripe')),
+ },
  common: {
  minChunks: 1,
  name: 'ui-common',

packages/clerk-js/sandbox/app.ts

@@ -16,6 +16,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationProfile',
  'organizationSwitcher',
  'waitlist',
+ 'pricingTable',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -73,6 +74,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationProfile: buildComponentControls('organizationProfile'),
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
+ pricingTable: buildComponentControls('pricingTable'),
 };
 
 declare global {
@@ -95,7 +97,7 @@ const app = document.getElementById('app') as HTMLDivElement;
 function mountIndex(element: HTMLDivElement) {
  assertClerkIsLoaded(Clerk);
  const user = Clerk.user;
- element.innerHTML = `<pre><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
+ element.innerHTML = `<pre class="text-left whitespace-pre overflow-x-auto bg-white p-4 border border-gray-100 rounded-md text-sm"><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
 }
 
 function mountOpenSignInButton(element: HTMLDivElement, props) {
@@ -167,6 +169,9 @@ function addCurrentRouteIndicator(currentRoute: string) {
  },
  });
  },
+ '/pricing-table': () => {
+ Clerk.__experimental_mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },
@@ -183,6 +188,7 @@ function addCurrentRouteIndicator(currentRoute: string) {
  ...(componentControls.clerk.getProps() ?? {}),
  signInUrl: '/sign-in',
  signUpUrl: '/sign-up',
+ experimental: { commerce: true },
  });
  renderCurrentRoute();
  } else {

packages/clerk-js/sandbox/template.html

@@ -249,6 +249,14 @@
  Keyless
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/pricing-table"
+ >
+ PricingTable
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
@@ -274,7 +282,7 @@
  >
  <div
  id="app"
- class="max-w-full p-12"
+ class="container w-full p-12"
  ></div>
  </main>
 

packages/clerk-js/src/core/clerk.ts

@@ -13,6 +13,8 @@ import {
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
+ __experimental_CommerceNamespace,
+ __experimental_PricingTableProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
  AuthenticateWithGoogleOneTapParams,
@@ -119,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
  Client,
@@ -166,6 +169,7 @@ export class Clerk implements ClerkInterface {
  version: __PKG_VERSION__,
  environment: process.env.NODE_ENV || 'production',
  };
+ private static _commerce: __experimental_CommerceNamespace;
 
  public client: ClientResource | undefined;
  public session: SignedInSessionResource | null | undefined;
@@ -287,6 +291,19 @@ export class Clerk implements ClerkInterface {
  return this.#options.standardBrowser || false;
  }
 
+ get __experimental_commerce(): __experimental_CommerceNamespace {
+ if (!this.#options.experimental?.commerce) {
+ throw new Error(
+ 'Clerk: commerce functionality is currently in an experimental state. To enable, pass `experimental.commerce = true`.',
+ );
+ }
+
+ if (!Clerk._commerce) {
+ Clerk._commerce = new __experimental_Commerce();
+ }
+ return Clerk._commerce;
+ }
+
  public __internal_getOption<K extends keyof ClerkOptions>(key: K): ClerkOptions[K] {
  return this.#options[key];
  }
@@ -886,6 +903,29 @@ export class Clerk implements ClerkInterface {
  void this.#componentControls?.ensureMounted().then(controls => controls.unmountComponent({ node }));
  };
 
+ public __experimental_mountPricingTable = (node: HTMLDivElement, props?: __experimental_PricingTableProps): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'PricingTable' }).then(controls =>
+ controls.mountComponent({
+ name: 'PricingTable',
+ appearanceKey: 'pricingTable',
+ node,
+ props,
+ }),
+ );
+
+ this.telemetry?.record(eventPrebuiltComponentMounted('PricingTable', props));
+ };
+
+ public __experimental_unmountPricingTable = (node: HTMLDivElement): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls =>
+ controls.unmountComponent({
+ node,
+ }),
+ );
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

packages/clerk-js/src/core/modules/commerce/Commerce.ts

@@ -0,0 +1,46 @@
+import type {
+ __experimental_AddPaymentSourceParams,
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceNamespace,
+ __experimental_CommercePaymentSourceJSON,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { __experimental_CommercePaymentSource, BaseResource } from '../../resources/internal';
+import { __experimental_CommerceBilling } from './CommerceBilling';
+
+export class __experimental_Commerce implements __experimental_CommerceNamespace {
+ private static _billing: __experimental_CommerceBillingNamespace;
+
+ get __experimental_billing(): __experimental_CommerceBillingNamespace {
+ if (!__experimental_Commerce._billing) {
+ __experimental_Commerce._billing = new __experimental_CommerceBilling();
+ }
+ return __experimental_Commerce._billing;
+ }
+
+ addPaymentSource = async (params: __experimental_AddPaymentSourceParams) => {
+ const json = (
+ await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommercePaymentSourceJSON;
+ return new __experimental_CommercePaymentSource(json);
+ };
+
+ getPaymentSources = async () => {
+ return await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'GET',
+ }).then(res => {
+ const { data: paymentSources, total_count } =
+ res as unknown as ClerkPaginatedResponse<__experimental_CommercePaymentSourceJSON>;
+ return {
+ total_count,
+ data: paymentSources.map(paymentSource => new __experimental_CommercePaymentSource(paymentSource)),
+ };
+ });
+ };
+}

packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

@@ -0,0 +1,37 @@
+import type {
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommercePlanResource,
+ __experimental_CommerceProductJSON,
+ __experimental_CreateCheckoutParams,
+ __experimental_GetPlansParams,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams';
+import { __experimental_CommerceCheckout, __experimental_CommercePlan, BaseResource } from '../../resources/internal';
+
+export class __experimental_CommerceBilling implements __experimental_CommerceBillingNamespace {
+ getPlans = async (params?: __experimental_GetPlansParams): Promise<__experimental_CommercePlanResource[]> => {
+ const { data: products } = (await BaseResource._fetch({
+ path: `/commerce/products`,
+ method: 'GET',
+ search: convertPageToOffsetSearchParams(params),
+ })) as unknown as ClerkPaginatedResponse<__experimental_CommerceProductJSON>;
+
+ const defaultProduct = products.find(product => product.is_default);
+ return defaultProduct?.plans.map(plan => new __experimental_CommercePlan(plan)) || [];
+ };
+
+ startCheckout = async (params: __experimental_CreateCheckoutParams) => {
+ const json = (
+ await BaseResource._fetch<__experimental_CommerceCheckoutJSON>({
+ path: `/me/commerce/checkouts`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommerceCheckoutJSON;
+
+ return new __experimental_CommerceCheckout(json);
+ };
+}

packages/clerk-js/src/core/modules/commerce/index.ts

@@ -0,0 +1,2 @@
+export * from './Commerce';
+export * from './CommerceBilling';

packages/clerk-js/src/core/resources/Base.ts

@@ -62,7 +62,7 @@ export abstract class BaseResource {
  return !this.id;
  }
 
-protected static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
+ static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
  requestInit: FapiRequestInit,
  opts: BaseFetchOptions = {},
  ): Promise<FapiResponseJSON<J> | null> {

packages/clerk-js/src/core/resources/CommerceCheckout.ts

@@ -0,0 +1,63 @@
+import type {
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommerceCheckoutResource,
+ __experimental_CommerceTotals,
+ __experimental_ConfirmCheckoutParams,
+} from '@clerk/types';
+
+import { commerceTotalsFromJSON } from '../../utils';
+import {
+ __experimental_CommerceInvoice,
+ __experimental_CommercePaymentSource,
+ __experimental_CommercePlan,
+ __experimental_CommerceSubscription,
+ BaseResource,
+} from './internal';
+
+export class __experimental_CommerceCheckout extends BaseResource implements __experimental_CommerceCheckoutResource {
+ pathRoot = '/me/commerce/checkouts';
+
+ id!: string;
+ externalClientSecret!: string;
+ externalGatewayId!: string;
+ invoice?: __experimental_CommerceInvoice;
+ paymentSource?: __experimental_CommercePaymentSource;
+ plan!: __experimental_CommercePlan;
+ planPeriod!: string;
+ status!: string;
+ subscription?: __experimental_CommerceSubscription;
+ totals!: __experimental_CommerceTotals;
+
+ constructor(data: __experimental_CommerceCheckoutJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceCheckoutJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.externalClientSecret = data.external_client_secret;
+ this.externalGatewayId = data.external_gateway_id;
+ this.invoice = data.invoice ? new __experimental_CommerceInvoice(data.invoice) : undefined;
+ this.paymentSource = data.payment_source
+ ? new __experimental_CommercePaymentSource(data.payment_source)
+ : undefined;
+ this.plan = new __experimental_CommercePlan(data.plan);
+ this.planPeriod = data.plan_period;
+ this.status = data.status;
+ this.subscription = data.subscription ? new __experimental_CommerceSubscription(data.subscription) : undefined;
+ this.totals = commerceTotalsFromJSON(data.totals);
+
+ return this;
+ }
+
+ confirm = (params?: __experimental_ConfirmCheckoutParams): Promise<this> => {
+ return this._basePatch({
+ path: this.path('confirm'),
+ body: params as any,
+ });
+ };
+}

packages/clerk-js/src/core/resources/CommerceFeature.ts

@@ -0,0 +1,30 @@
+import type { __experimental_CommerceFeatureJSON, __experimental_CommerceFeatureResource } from '@clerk/types';
+
+import { BaseResource } from './internal';
+
+export class __experimental_CommerceFeature extends BaseResource implements __experimental_CommerceFeatureResource {
+ id!: string;
+ name!: string;
+ description!: string;
+ slug!: string;
+ avatarUrl!: string;
+
+ constructor(data: __experimental_CommerceFeatureJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceFeatureJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.name = data.name;
+ this.description = data.description;
+ this.slug = data.slug;
+ this.avatarUrl = data.avatar_url;
+
+ return this;
+ }
+}

.changeset/large-feet-hammer.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce experimental billing APIs and components

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "560kB" },
- { "path": "./dist/clerk.browser.js", "maxSize": "75kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "48.3KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "89KB" },
- { "path": "./dist/vendors*.js", "maxSize": "25.1KB" },
+ { "path": "./dist/clerk.js", "maxSize": "570kB" },
+ { "path": "./dist/clerk.browser.js", "maxSize": "76kB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "92KB" },
+ { "path": "./dist/vendors*.js", "maxSize": "26.5KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
  { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
@@ -18,6 +18,8 @@
  { "path": "./dist/userverification*.js", "maxSize": "5KB" },
  { "path": "./dist/onetap*.js", "maxSize": "1KB" },
  { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
- { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" }
+ { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" },
+ { "path": "./dist/pricingTable*.js", "maxSize": "3.5KB" },
+ { "path": "./dist/checkout*.js", "maxSize": "8.8KB" }
  ]
 }

packages/clerk-js/package.json

@@ -63,6 +63,8 @@
  "@floating-ui/react": "0.25.4",
  "@floating-ui/react-dom": "^2.0.2",
  "@formkit/auto-animate": "^0.8.1",
+ "@stripe/react-stripe-js": "3.1.1",
+ "@stripe/stripe-js": "5.6.0",
  "@swc/helpers": "^0.5.13",
  "@zxcvbn-ts/core": "3.0.4",
  "@zxcvbn-ts/language-common": "3.0.4",

packages/clerk-js/rspack.config.js

@@ -93,6 +93,15 @@ const common = ({ mode, disableRHC = false }) => {
  name: 'signup',
  test: module => module.resource && module.resource.includes('/ui/components/SignUp'),
  },
+ checkout: {
+ minChunks: 1,
+ name: 'checkout',
+ test: module =>
+ module.resource &&
+ (module.resource.includes('/ui/components/Checkout') ||
+ // Include `@stripe/react-stripe-js` and `@stripe/stripe-js` in the checkout chunk
+ module.resource.includes('/node_modules/@stripe')),
+ },
  common: {
  minChunks: 1,
  name: 'ui-common',

packages/clerk-js/sandbox/app.ts

@@ -16,6 +16,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationProfile',
  'organizationSwitcher',
  'waitlist',
+ 'pricingTable',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -73,6 +74,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationProfile: buildComponentControls('organizationProfile'),
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
+ pricingTable: buildComponentControls('pricingTable'),
 };
 
 declare global {
@@ -95,7 +97,7 @@ const app = document.getElementById('app') as HTMLDivElement;
 function mountIndex(element: HTMLDivElement) {
  assertClerkIsLoaded(Clerk);
  const user = Clerk.user;
- element.innerHTML = `<pre><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
+ element.innerHTML = `<pre class="text-left whitespace-pre overflow-x-auto bg-white p-4 border border-gray-100 rounded-md text-sm"><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
 }
 
 function mountOpenSignInButton(element: HTMLDivElement, props) {
@@ -167,6 +169,9 @@ function addCurrentRouteIndicator(currentRoute: string) {
  },
  });
  },
+ '/pricing-table': () => {
+ Clerk.__experimental_mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },
@@ -183,6 +188,7 @@ function addCurrentRouteIndicator(currentRoute: string) {
  ...(componentControls.clerk.getProps() ?? {}),
  signInUrl: '/sign-in',
  signUpUrl: '/sign-up',
+ experimental: { commerce: true },
  });
  renderCurrentRoute();
  } else {

packages/clerk-js/sandbox/template.html

@@ -249,6 +249,14 @@
  Keyless
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/pricing-table"
+ >
+ PricingTable
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
@@ -274,7 +282,7 @@
  >
  <div
  id="app"
- class="max-w-full p-12"
+ class="container w-full p-12"
  ></div>
  </main>
 

packages/clerk-js/src/core/clerk.ts

@@ -13,6 +13,8 @@ import {
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
+ __experimental_CommerceNamespace,
+ __experimental_PricingTableProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
  AuthenticateWithGoogleOneTapParams,
@@ -119,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
  Client,
@@ -166,6 +169,7 @@ export class Clerk implements ClerkInterface {
  version: __PKG_VERSION__,
  environment: process.env.NODE_ENV || 'production',
  };
+ private static _commerce: __experimental_CommerceNamespace;
 
  public client: ClientResource | undefined;
  public session: SignedInSessionResource | null | undefined;
@@ -287,6 +291,19 @@ export class Clerk implements ClerkInterface {
  return this.#options.standardBrowser || false;
  }
 
+ get __experimental_commerce(): __experimental_CommerceNamespace {
+ if (!this.#options.experimental?.commerce) {
+ throw new Error(
+ 'Clerk: commerce functionality is currently in an experimental state. To enable, pass `experimental.commerce = true`.',
+ );
+ }
+
+ if (!Clerk._commerce) {
+ Clerk._commerce = new __experimental_Commerce();
+ }
+ return Clerk._commerce;
+ }
+
  public __internal_getOption<K extends keyof ClerkOptions>(key: K): ClerkOptions[K] {
  return this.#options[key];
  }
@@ -886,6 +903,29 @@ export class Clerk implements ClerkInterface {
  void this.#componentControls?.ensureMounted().then(controls => controls.unmountComponent({ node }));
  };
 
+ public __experimental_mountPricingTable = (node: HTMLDivElement, props?: __experimental_PricingTableProps): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'PricingTable' }).then(controls =>
+ controls.mountComponent({
+ name: 'PricingTable',
+ appearanceKey: 'pricingTable',
+ node,
+ props,
+ }),
+ );
+
+ this.telemetry?.record(eventPrebuiltComponentMounted('PricingTable', props));
+ };
+
+ public __experimental_unmountPricingTable = (node: HTMLDivElement): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls =>
+ controls.unmountComponent({
+ node,
+ }),
+ );
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

packages/clerk-js/src/core/modules/commerce/Commerce.ts

@@ -0,0 +1,46 @@
+import type {
+ __experimental_AddPaymentSourceParams,
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceNamespace,
+ __experimental_CommercePaymentSourceJSON,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { __experimental_CommercePaymentSource, BaseResource } from '../../resources/internal';
+import { __experimental_CommerceBilling } from './CommerceBilling';
+
+export class __experimental_Commerce implements __experimental_CommerceNamespace {
+ private static _billing: __experimental_CommerceBillingNamespace;
+
+ get __experimental_billing(): __experimental_CommerceBillingNamespace {
+ if (!__experimental_Commerce._billing) {
+ __experimental_Commerce._billing = new __experimental_CommerceBilling();
+ }
+ return __experimental_Commerce._billing;
+ }
+
+ addPaymentSource = async (params: __experimental_AddPaymentSourceParams) => {
+ const json = (
+ await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommercePaymentSourceJSON;
+ return new __experimental_CommercePaymentSource(json);
+ };
+
+ getPaymentSources = async () => {
+ return await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'GET',
+ }).then(res => {
+ const { data: paymentSources, total_count } =
+ res as unknown as ClerkPaginatedResponse<__experimental_CommercePaymentSourceJSON>;
+ return {
+ total_count,
+ data: paymentSources.map(paymentSource => new __experimental_CommercePaymentSource(paymentSource)),
+ };
+ });
+ };
+}

packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

@@ -0,0 +1,37 @@
+import type {
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommercePlanResource,
+ __experimental_CommerceProductJSON,
+ __experimental_CreateCheckoutParams,
+ __experimental_GetPlansParams,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams';
+import { __experimental_CommerceCheckout, __experimental_CommercePlan, BaseResource } from '../../resources/internal';
+
+export class __experimental_CommerceBilling implements __experimental_CommerceBillingNamespace {
+ getPlans = async (params?: __experimental_GetPlansParams): Promise<__experimental_CommercePlanResource[]> => {
+ const { data: products } = (await BaseResource._fetch({
+ path: `/commerce/products`,
+ method: 'GET',
+ search: convertPageToOffsetSearchParams(params),
+ })) as unknown as ClerkPaginatedResponse<__experimental_CommerceProductJSON>;
+
+ const defaultProduct = products.find(product => product.is_default);
+ return defaultProduct?.plans.map(plan => new __experimental_CommercePlan(plan)) || [];
+ };
+
+ startCheckout = async (params: __experimental_CreateCheckoutParams) => {
+ const json = (
+ await BaseResource._fetch<__experimental_CommerceCheckoutJSON>({
+ path: `/me/commerce/checkouts`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommerceCheckoutJSON;
+
+ return new __experimental_CommerceCheckout(json);
+ };
+}

packages/clerk-js/src/core/modules/commerce/index.ts

@@ -0,0 +1,2 @@
+export * from './Commerce';
+export * from './CommerceBilling';

packages/clerk-js/src/core/resources/Base.ts

@@ -62,7 +62,7 @@ export abstract class BaseResource {
  return !this.id;
  }
 
-protected static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
+ static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
  requestInit: FapiRequestInit,
  opts: BaseFetchOptions = {},
  ): Promise<FapiResponseJSON<J> | null> {

packages/clerk-js/src/core/resources/CommerceCheckout.ts

@@ -0,0 +1,63 @@
+import type {
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommerceCheckoutResource,
+ __experimental_CommerceTotals,
+ __experimental_ConfirmCheckoutParams,
+} from '@clerk/types';
+
+import { commerceTotalsFromJSON } from '../../utils';
+import {
+ __experimental_CommerceInvoice,
+ __experimental_CommercePaymentSource,
+ __experimental_CommercePlan,
+ __experimental_CommerceSubscription,
+ BaseResource,
+} from './internal';
+
+export class __experimental_CommerceCheckout extends BaseResource implements __experimental_CommerceCheckoutResource {
+ pathRoot = '/me/commerce/checkouts';
+
+ id!: string;
+ externalClientSecret!: string;
+ externalGatewayId!: string;
+ invoice?: __experimental_CommerceInvoice;
+ paymentSource?: __experimental_CommercePaymentSource;
+ plan!: __experimental_CommercePlan;
+ planPeriod!: string;
+ status!: string;
+ subscription?: __experimental_CommerceSubscription;
+ totals!: __experimental_CommerceTotals;
+
+ constructor(data: __experimental_CommerceCheckoutJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceCheckoutJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.externalClientSecret = data.external_client_secret;
+ this.externalGatewayId = data.external_gateway_id;
+ this.invoice = data.invoice ? new __experimental_CommerceInvoice(data.invoice) : undefined;
+ this.paymentSource = data.payment_source
+ ? new __experimental_CommercePaymentSource(data.payment_source)
+ : undefined;
+ this.plan = new __experimental_CommercePlan(data.plan);
+ this.planPeriod = data.plan_period;
+ this.status = data.status;
+ this.subscription = data.subscription ? new __experimental_CommerceSubscription(data.subscription) : undefined;
+ this.totals = commerceTotalsFromJSON(data.totals);
+
+ return this;
+ }
+
+ confirm = (params?: __experimental_ConfirmCheckoutParams): Promise<this> => {
+ return this._basePatch({
+ path: this.path('confirm'),
+ body: params as any,
+ });
+ };
+}

packages/clerk-js/src/core/resources/CommerceFeature.ts

@@ -0,0 +1,30 @@
+import type { __experimental_CommerceFeatureJSON, __experimental_CommerceFeatureResource } from '@clerk/types';
+
+import { BaseResource } from './internal';
+
+export class __experimental_CommerceFeature extends BaseResource implements __experimental_CommerceFeatureResource {
+ id!: string;
+ name!: string;
+ description!: string;
+ slug!: string;
+ avatarUrl!: string;
+
+ constructor(data: __experimental_CommerceFeatureJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceFeatureJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.name = data.name;
+ this.description = data.description;
+ this.slug = data.slug;
+ this.avatarUrl = data.avatar_url;
+
+ return this;
+ }
+}

.changeset/large-feet-hammer.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce experimental billing APIs and components

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "560kB" },
- { "path": "./dist/clerk.browser.js", "maxSize": "75kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "48.3KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "89KB" },
- { "path": "./dist/vendors*.js", "maxSize": "25.1KB" },
+ { "path": "./dist/clerk.js", "maxSize": "570kB" },
+ { "path": "./dist/clerk.browser.js", "maxSize": "76kB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "92KB" },
+ { "path": "./dist/vendors*.js", "maxSize": "26.5KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
  { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
@@ -18,6 +18,8 @@
  { "path": "./dist/userverification*.js", "maxSize": "5KB" },
  { "path": "./dist/onetap*.js", "maxSize": "1KB" },
  { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
- { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" }
+ { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" },
+ { "path": "./dist/pricingTable*.js", "maxSize": "3.5KB" },
+ { "path": "./dist/checkout*.js", "maxSize": "8.8KB" }
  ]
 }

packages/clerk-js/package.json

@@ -63,6 +63,8 @@
  "@floating-ui/react": "0.25.4",
  "@floating-ui/react-dom": "^2.0.2",
  "@formkit/auto-animate": "^0.8.1",
+ "@stripe/react-stripe-js": "3.1.1",
+ "@stripe/stripe-js": "5.6.0",
  "@swc/helpers": "^0.5.13",
  "@zxcvbn-ts/core": "3.0.4",
  "@zxcvbn-ts/language-common": "3.0.4",

packages/clerk-js/rspack.config.js

@@ -93,6 +93,15 @@ const common = ({ mode, disableRHC = false }) => {
  name: 'signup',
  test: module => module.resource && module.resource.includes('/ui/components/SignUp'),
  },
+ checkout: {
+ minChunks: 1,
+ name: 'checkout',
+ test: module =>
+ module.resource &&
+ (module.resource.includes('/ui/components/Checkout') ||
+ // Include `@stripe/react-stripe-js` and `@stripe/stripe-js` in the checkout chunk
+ module.resource.includes('/node_modules/@stripe')),
+ },
  common: {
  minChunks: 1,
  name: 'ui-common',

packages/clerk-js/sandbox/app.ts

@@ -16,6 +16,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationProfile',
  'organizationSwitcher',
  'waitlist',
+ 'pricingTable',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -73,6 +74,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationProfile: buildComponentControls('organizationProfile'),
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
+ pricingTable: buildComponentControls('pricingTable'),
 };
 
 declare global {
@@ -95,7 +97,7 @@ const app = document.getElementById('app') as HTMLDivElement;
 function mountIndex(element: HTMLDivElement) {
  assertClerkIsLoaded(Clerk);
  const user = Clerk.user;
- element.innerHTML = `<pre><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
+ element.innerHTML = `<pre class="text-left whitespace-pre overflow-x-auto bg-white p-4 border border-gray-100 rounded-md text-sm"><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
 }
 
 function mountOpenSignInButton(element: HTMLDivElement, props) {
@@ -167,6 +169,9 @@ function addCurrentRouteIndicator(currentRoute: string) {
  },
  });
  },
+ '/pricing-table': () => {
+ Clerk.__experimental_mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },
@@ -183,6 +188,7 @@ function addCurrentRouteIndicator(currentRoute: string) {
  ...(componentControls.clerk.getProps() ?? {}),
  signInUrl: '/sign-in',
  signUpUrl: '/sign-up',
+ experimental: { commerce: true },
  });
  renderCurrentRoute();
  } else {

packages/clerk-js/sandbox/template.html

@@ -249,6 +249,14 @@
  Keyless
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/pricing-table"
+ >
+ PricingTable
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
@@ -274,7 +282,7 @@
  >
  <div
  id="app"
- class="max-w-full p-12"
+ class="container w-full p-12"
  ></div>
  </main>
 

packages/clerk-js/src/core/clerk.ts

@@ -13,6 +13,8 @@ import {
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
+ __experimental_CommerceNamespace,
+ __experimental_PricingTableProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
  AuthenticateWithGoogleOneTapParams,
@@ -119,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
  Client,
@@ -166,6 +169,7 @@ export class Clerk implements ClerkInterface {
  version: __PKG_VERSION__,
  environment: process.env.NODE_ENV || 'production',
  };
+ private static _commerce: __experimental_CommerceNamespace;
 
  public client: ClientResource | undefined;
  public session: SignedInSessionResource | null | undefined;
@@ -287,6 +291,19 @@ export class Clerk implements ClerkInterface {
  return this.#options.standardBrowser || false;
  }
 
+ get __experimental_commerce(): __experimental_CommerceNamespace {
+ if (!this.#options.experimental?.commerce) {
+ throw new Error(
+ 'Clerk: commerce functionality is currently in an experimental state. To enable, pass `experimental.commerce = true`.',
+ );
+ }
+
+ if (!Clerk._commerce) {
+ Clerk._commerce = new __experimental_Commerce();
+ }
+ return Clerk._commerce;
+ }
+
  public __internal_getOption<K extends keyof ClerkOptions>(key: K): ClerkOptions[K] {
  return this.#options[key];
  }
@@ -886,6 +903,29 @@ export class Clerk implements ClerkInterface {
  void this.#componentControls?.ensureMounted().then(controls => controls.unmountComponent({ node }));
  };
 
+ public __experimental_mountPricingTable = (node: HTMLDivElement, props?: __experimental_PricingTableProps): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'PricingTable' }).then(controls =>
+ controls.mountComponent({
+ name: 'PricingTable',
+ appearanceKey: 'pricingTable',
+ node,
+ props,
+ }),
+ );
+
+ this.telemetry?.record(eventPrebuiltComponentMounted('PricingTable', props));
+ };
+
+ public __experimental_unmountPricingTable = (node: HTMLDivElement): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls =>
+ controls.unmountComponent({
+ node,
+ }),
+ );
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

packages/clerk-js/src/core/modules/commerce/Commerce.ts

@@ -0,0 +1,46 @@
+import type {
+ __experimental_AddPaymentSourceParams,
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceNamespace,
+ __experimental_CommercePaymentSourceJSON,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { __experimental_CommercePaymentSource, BaseResource } from '../../resources/internal';
+import { __experimental_CommerceBilling } from './CommerceBilling';
+
+export class __experimental_Commerce implements __experimental_CommerceNamespace {
+ private static _billing: __experimental_CommerceBillingNamespace;
+
+ get __experimental_billing(): __experimental_CommerceBillingNamespace {
+ if (!__experimental_Commerce._billing) {
+ __experimental_Commerce._billing = new __experimental_CommerceBilling();
+ }
+ return __experimental_Commerce._billing;
+ }
+
+ addPaymentSource = async (params: __experimental_AddPaymentSourceParams) => {
+ const json = (
+ await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommercePaymentSourceJSON;
+ return new __experimental_CommercePaymentSource(json);
+ };
+
+ getPaymentSources = async () => {
+ return await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'GET',
+ }).then(res => {
+ const { data: paymentSources, total_count } =
+ res as unknown as ClerkPaginatedResponse<__experimental_CommercePaymentSourceJSON>;
+ return {
+ total_count,
+ data: paymentSources.map(paymentSource => new __experimental_CommercePaymentSource(paymentSource)),
+ };
+ });
+ };
+}

packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

@@ -0,0 +1,37 @@
+import type {
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommercePlanResource,
+ __experimental_CommerceProductJSON,
+ __experimental_CreateCheckoutParams,
+ __experimental_GetPlansParams,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams';
+import { __experimental_CommerceCheckout, __experimental_CommercePlan, BaseResource } from '../../resources/internal';
+
+export class __experimental_CommerceBilling implements __experimental_CommerceBillingNamespace {
+ getPlans = async (params?: __experimental_GetPlansParams): Promise<__experimental_CommercePlanResource[]> => {
+ const { data: products } = (await BaseResource._fetch({
+ path: `/commerce/products`,
+ method: 'GET',
+ search: convertPageToOffsetSearchParams(params),
+ })) as unknown as ClerkPaginatedResponse<__experimental_CommerceProductJSON>;
+
+ const defaultProduct = products.find(product => product.is_default);
+ return defaultProduct?.plans.map(plan => new __experimental_CommercePlan(plan)) || [];
+ };
+
+ startCheckout = async (params: __experimental_CreateCheckoutParams) => {
+ const json = (
+ await BaseResource._fetch<__experimental_CommerceCheckoutJSON>({
+ path: `/me/commerce/checkouts`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommerceCheckoutJSON;
+
+ return new __experimental_CommerceCheckout(json);
+ };
+}

packages/clerk-js/src/core/modules/commerce/index.ts

@@ -0,0 +1,2 @@
+export * from './Commerce';
+export * from './CommerceBilling';

packages/clerk-js/src/core/resources/Base.ts

@@ -62,7 +62,7 @@ export abstract class BaseResource {
  return !this.id;
  }
 
-protected static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
+ static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
  requestInit: FapiRequestInit,
  opts: BaseFetchOptions = {},
  ): Promise<FapiResponseJSON<J> | null> {

packages/clerk-js/src/core/resources/CommerceCheckout.ts

@@ -0,0 +1,63 @@
+import type {
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommerceCheckoutResource,
+ __experimental_CommerceTotals,
+ __experimental_ConfirmCheckoutParams,
+} from '@clerk/types';
+
+import { commerceTotalsFromJSON } from '../../utils';
+import {
+ __experimental_CommerceInvoice,
+ __experimental_CommercePaymentSource,
+ __experimental_CommercePlan,
+ __experimental_CommerceSubscription,
+ BaseResource,
+} from './internal';
+
+export class __experimental_CommerceCheckout extends BaseResource implements __experimental_CommerceCheckoutResource {
+ pathRoot = '/me/commerce/checkouts';
+
+ id!: string;
+ externalClientSecret!: string;
+ externalGatewayId!: string;
+ invoice?: __experimental_CommerceInvoice;
+ paymentSource?: __experimental_CommercePaymentSource;
+ plan!: __experimental_CommercePlan;
+ planPeriod!: string;
+ status!: string;
+ subscription?: __experimental_CommerceSubscription;
+ totals!: __experimental_CommerceTotals;
+
+ constructor(data: __experimental_CommerceCheckoutJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceCheckoutJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.externalClientSecret = data.external_client_secret;
+ this.externalGatewayId = data.external_gateway_id;
+ this.invoice = data.invoice ? new __experimental_CommerceInvoice(data.invoice) : undefined;
+ this.paymentSource = data.payment_source
+ ? new __experimental_CommercePaymentSource(data.payment_source)
+ : undefined;
+ this.plan = new __experimental_CommercePlan(data.plan);
+ this.planPeriod = data.plan_period;
+ this.status = data.status;
+ this.subscription = data.subscription ? new __experimental_CommerceSubscription(data.subscription) : undefined;
+ this.totals = commerceTotalsFromJSON(data.totals);
+
+ return this;
+ }
+
+ confirm = (params?: __experimental_ConfirmCheckoutParams): Promise<this> => {
+ return this._basePatch({
+ path: this.path('confirm'),
+ body: params as any,
+ });
+ };
+}

packages/clerk-js/src/core/resources/CommerceFeature.ts

@@ -0,0 +1,30 @@
+import type { __experimental_CommerceFeatureJSON, __experimental_CommerceFeatureResource } from '@clerk/types';
+
+import { BaseResource } from './internal';
+
+export class __experimental_CommerceFeature extends BaseResource implements __experimental_CommerceFeatureResource {
+ id!: string;
+ name!: string;
+ description!: string;
+ slug!: string;
+ avatarUrl!: string;
+
+ constructor(data: __experimental_CommerceFeatureJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceFeatureJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.name = data.name;
+ this.description = data.description;
+ this.slug = data.slug;
+ this.avatarUrl = data.avatar_url;
+
+ return this;
+ }
+}

.changeset/large-feet-hammer.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce experimental billing APIs and components

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "560kB" },
- { "path": "./dist/clerk.browser.js", "maxSize": "75kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "48.3KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "89KB" },
- { "path": "./dist/vendors*.js", "maxSize": "25.1KB" },
+ { "path": "./dist/clerk.js", "maxSize": "570kB" },
+ { "path": "./dist/clerk.browser.js", "maxSize": "76kB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "92KB" },
+ { "path": "./dist/vendors*.js", "maxSize": "26.5KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
  { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
@@ -18,6 +18,8 @@
  { "path": "./dist/userverification*.js", "maxSize": "5KB" },
  { "path": "./dist/onetap*.js", "maxSize": "1KB" },
  { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
- { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" }
+ { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" },
+ { "path": "./dist/pricingTable*.js", "maxSize": "3.5KB" },
+ { "path": "./dist/checkout*.js", "maxSize": "8.8KB" }
  ]
 }

packages/clerk-js/package.json

@@ -63,6 +63,8 @@
  "@floating-ui/react": "0.25.4",
  "@floating-ui/react-dom": "^2.0.2",
  "@formkit/auto-animate": "^0.8.1",
+ "@stripe/react-stripe-js": "3.1.1",
+ "@stripe/stripe-js": "5.6.0",
  "@swc/helpers": "^0.5.13",
  "@zxcvbn-ts/core": "3.0.4",
  "@zxcvbn-ts/language-common": "3.0.4",

packages/clerk-js/rspack.config.js

@@ -93,6 +93,15 @@ const common = ({ mode, disableRHC = false }) => {
  name: 'signup',
  test: module => module.resource && module.resource.includes('/ui/components/SignUp'),
  },
+ checkout: {
+ minChunks: 1,
+ name: 'checkout',
+ test: module =>
+ module.resource &&
+ (module.resource.includes('/ui/components/Checkout') ||
+ // Include `@stripe/react-stripe-js` and `@stripe/stripe-js` in the checkout chunk
+ module.resource.includes('/node_modules/@stripe')),
+ },
  common: {
  minChunks: 1,
  name: 'ui-common',

packages/clerk-js/sandbox/app.ts

@@ -16,6 +16,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationProfile',
  'organizationSwitcher',
  'waitlist',
+ 'pricingTable',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -73,6 +74,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationProfile: buildComponentControls('organizationProfile'),
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
+ pricingTable: buildComponentControls('pricingTable'),
 };
 
 declare global {
@@ -95,7 +97,7 @@ const app = document.getElementById('app') as HTMLDivElement;
 function mountIndex(element: HTMLDivElement) {
  assertClerkIsLoaded(Clerk);
  const user = Clerk.user;
- element.innerHTML = `<pre><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
+ element.innerHTML = `<pre class="text-left whitespace-pre overflow-x-auto bg-white p-4 border border-gray-100 rounded-md text-sm"><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
 }
 
 function mountOpenSignInButton(element: HTMLDivElement, props) {
@@ -167,6 +169,9 @@ function addCurrentRouteIndicator(currentRoute: string) {
  },
  });
  },
+ '/pricing-table': () => {
+ Clerk.__experimental_mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },
@@ -183,6 +188,7 @@ function addCurrentRouteIndicator(currentRoute: string) {
  ...(componentControls.clerk.getProps() ?? {}),
  signInUrl: '/sign-in',
  signUpUrl: '/sign-up',
+ experimental: { commerce: true },
  });
  renderCurrentRoute();
  } else {

packages/clerk-js/sandbox/template.html

@@ -249,6 +249,14 @@
  Keyless
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/pricing-table"
+ >
+ PricingTable
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
@@ -274,7 +282,7 @@
  >
  <div
  id="app"
- class="max-w-full p-12"
+ class="container w-full p-12"
  ></div>
  </main>
 

packages/clerk-js/src/core/clerk.ts

@@ -13,6 +13,8 @@ import {
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
+ __experimental_CommerceNamespace,
+ __experimental_PricingTableProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
  AuthenticateWithGoogleOneTapParams,
@@ -119,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
  Client,
@@ -166,6 +169,7 @@ export class Clerk implements ClerkInterface {
  version: __PKG_VERSION__,
  environment: process.env.NODE_ENV || 'production',
  };
+ private static _commerce: __experimental_CommerceNamespace;
 
  public client: ClientResource | undefined;
  public session: SignedInSessionResource | null | undefined;
@@ -287,6 +291,19 @@ export class Clerk implements ClerkInterface {
  return this.#options.standardBrowser || false;
  }
 
+ get __experimental_commerce(): __experimental_CommerceNamespace {
+ if (!this.#options.experimental?.commerce) {
+ throw new Error(
+ 'Clerk: commerce functionality is currently in an experimental state. To enable, pass `experimental.commerce = true`.',
+ );
+ }
+
+ if (!Clerk._commerce) {
+ Clerk._commerce = new __experimental_Commerce();
+ }
+ return Clerk._commerce;
+ }
+
  public __internal_getOption<K extends keyof ClerkOptions>(key: K): ClerkOptions[K] {
  return this.#options[key];
  }
@@ -886,6 +903,29 @@ export class Clerk implements ClerkInterface {
  void this.#componentControls?.ensureMounted().then(controls => controls.unmountComponent({ node }));
  };
 
+ public __experimental_mountPricingTable = (node: HTMLDivElement, props?: __experimental_PricingTableProps): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'PricingTable' }).then(controls =>
+ controls.mountComponent({
+ name: 'PricingTable',
+ appearanceKey: 'pricingTable',
+ node,
+ props,
+ }),
+ );
+
+ this.telemetry?.record(eventPrebuiltComponentMounted('PricingTable', props));
+ };
+
+ public __experimental_unmountPricingTable = (node: HTMLDivElement): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls =>
+ controls.unmountComponent({
+ node,
+ }),
+ );
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

packages/clerk-js/src/core/modules/commerce/Commerce.ts

@@ -0,0 +1,46 @@
+import type {
+ __experimental_AddPaymentSourceParams,
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceNamespace,
+ __experimental_CommercePaymentSourceJSON,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { __experimental_CommercePaymentSource, BaseResource } from '../../resources/internal';
+import { __experimental_CommerceBilling } from './CommerceBilling';
+
+export class __experimental_Commerce implements __experimental_CommerceNamespace {
+ private static _billing: __experimental_CommerceBillingNamespace;
+
+ get __experimental_billing(): __experimental_CommerceBillingNamespace {
+ if (!__experimental_Commerce._billing) {
+ __experimental_Commerce._billing = new __experimental_CommerceBilling();
+ }
+ return __experimental_Commerce._billing;
+ }
+
+ addPaymentSource = async (params: __experimental_AddPaymentSourceParams) => {
+ const json = (
+ await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommercePaymentSourceJSON;
+ return new __experimental_CommercePaymentSource(json);
+ };
+
+ getPaymentSources = async () => {
+ return await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'GET',
+ }).then(res => {
+ const { data: paymentSources, total_count } =
+ res as unknown as ClerkPaginatedResponse<__experimental_CommercePaymentSourceJSON>;
+ return {
+ total_count,
+ data: paymentSources.map(paymentSource => new __experimental_CommercePaymentSource(paymentSource)),
+ };
+ });
+ };
+}

packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

@@ -0,0 +1,37 @@
+import type {
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommercePlanResource,
+ __experimental_CommerceProductJSON,
+ __experimental_CreateCheckoutParams,
+ __experimental_GetPlansParams,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams';
+import { __experimental_CommerceCheckout, __experimental_CommercePlan, BaseResource } from '../../resources/internal';
+
+export class __experimental_CommerceBilling implements __experimental_CommerceBillingNamespace {
+ getPlans = async (params?: __experimental_GetPlansParams): Promise<__experimental_CommercePlanResource[]> => {
+ const { data: products } = (await BaseResource._fetch({
+ path: `/commerce/products`,
+ method: 'GET',
+ search: convertPageToOffsetSearchParams(params),
+ })) as unknown as ClerkPaginatedResponse<__experimental_CommerceProductJSON>;
+
+ const defaultProduct = products.find(product => product.is_default);
+ return defaultProduct?.plans.map(plan => new __experimental_CommercePlan(plan)) || [];
+ };
+
+ startCheckout = async (params: __experimental_CreateCheckoutParams) => {
+ const json = (
+ await BaseResource._fetch<__experimental_CommerceCheckoutJSON>({
+ path: `/me/commerce/checkouts`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommerceCheckoutJSON;
+
+ return new __experimental_CommerceCheckout(json);
+ };
+}

packages/clerk-js/src/core/modules/commerce/index.ts

@@ -0,0 +1,2 @@
+export * from './Commerce';
+export * from './CommerceBilling';

packages/clerk-js/src/core/resources/Base.ts

@@ -62,7 +62,7 @@ export abstract class BaseResource {
  return !this.id;
  }
 
-protected static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
+ static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
  requestInit: FapiRequestInit,
  opts: BaseFetchOptions = {},
  ): Promise<FapiResponseJSON<J> | null> {

packages/clerk-js/src/core/resources/CommerceCheckout.ts

@@ -0,0 +1,63 @@
+import type {
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommerceCheckoutResource,
+ __experimental_CommerceTotals,
+ __experimental_ConfirmCheckoutParams,
+} from '@clerk/types';
+
+import { commerceTotalsFromJSON } from '../../utils';
+import {
+ __experimental_CommerceInvoice,
+ __experimental_CommercePaymentSource,
+ __experimental_CommercePlan,
+ __experimental_CommerceSubscription,
+ BaseResource,
+} from './internal';
+
+export class __experimental_CommerceCheckout extends BaseResource implements __experimental_CommerceCheckoutResource {
+ pathRoot = '/me/commerce/checkouts';
+
+ id!: string;
+ externalClientSecret!: string;
+ externalGatewayId!: string;
+ invoice?: __experimental_CommerceInvoice;
+ paymentSource?: __experimental_CommercePaymentSource;
+ plan!: __experimental_CommercePlan;
+ planPeriod!: string;
+ status!: string;
+ subscription?: __experimental_CommerceSubscription;
+ totals!: __experimental_CommerceTotals;
+
+ constructor(data: __experimental_CommerceCheckoutJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceCheckoutJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.externalClientSecret = data.external_client_secret;
+ this.externalGatewayId = data.external_gateway_id;
+ this.invoice = data.invoice ? new __experimental_CommerceInvoice(data.invoice) : undefined;
+ this.paymentSource = data.payment_source
+ ? new __experimental_CommercePaymentSource(data.payment_source)
+ : undefined;
+ this.plan = new __experimental_CommercePlan(data.plan);
+ this.planPeriod = data.plan_period;
+ this.status = data.status;
+ this.subscription = data.subscription ? new __experimental_CommerceSubscription(data.subscription) : undefined;
+ this.totals = commerceTotalsFromJSON(data.totals);
+
+ return this;
+ }
+
+ confirm = (params?: __experimental_ConfirmCheckoutParams): Promise<this> => {
+ return this._basePatch({
+ path: this.path('confirm'),
+ body: params as any,
+ });
+ };
+}

packages/clerk-js/src/core/resources/CommerceFeature.ts

@@ -0,0 +1,30 @@
+import type { __experimental_CommerceFeatureJSON, __experimental_CommerceFeatureResource } from '@clerk/types';
+
+import { BaseResource } from './internal';
+
+export class __experimental_CommerceFeature extends BaseResource implements __experimental_CommerceFeatureResource {
+ id!: string;
+ name!: string;
+ description!: string;
+ slug!: string;
+ avatarUrl!: string;
+
+ constructor(data: __experimental_CommerceFeatureJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceFeatureJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.name = data.name;
+ this.description = data.description;
+ this.slug = data.slug;
+ this.avatarUrl = data.avatar_url;
+
+ return this;
+ }
+}

.changeset/large-feet-hammer.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce experimental billing APIs and components

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "560kB" },
- { "path": "./dist/clerk.browser.js", "maxSize": "75kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "48.3KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "89KB" },
- { "path": "./dist/vendors*.js", "maxSize": "25.1KB" },
+ { "path": "./dist/clerk.js", "maxSize": "570kB" },
+ { "path": "./dist/clerk.browser.js", "maxSize": "76kB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "92KB" },
+ { "path": "./dist/vendors*.js", "maxSize": "26.5KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
  { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
@@ -18,6 +18,8 @@
  { "path": "./dist/userverification*.js", "maxSize": "5KB" },
  { "path": "./dist/onetap*.js", "maxSize": "1KB" },
  { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
- { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" }
+ { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" },
+ { "path": "./dist/pricingTable*.js", "maxSize": "3.5KB" },
+ { "path": "./dist/checkout*.js", "maxSize": "8.8KB" }
  ]
 }

packages/clerk-js/package.json

@@ -63,6 +63,8 @@
  "@floating-ui/react": "0.25.4",
  "@floating-ui/react-dom": "^2.0.2",
  "@formkit/auto-animate": "^0.8.1",
+ "@stripe/react-stripe-js": "3.1.1",
+ "@stripe/stripe-js": "5.6.0",
  "@swc/helpers": "^0.5.13",
  "@zxcvbn-ts/core": "3.0.4",
  "@zxcvbn-ts/language-common": "3.0.4",

packages/clerk-js/rspack.config.js

@@ -93,6 +93,15 @@ const common = ({ mode, disableRHC = false }) => {
  name: 'signup',
  test: module => module.resource && module.resource.includes('/ui/components/SignUp'),
  },
+ checkout: {
+ minChunks: 1,
+ name: 'checkout',
+ test: module =>
+ module.resource &&
+ (module.resource.includes('/ui/components/Checkout') ||
+ // Include `@stripe/react-stripe-js` and `@stripe/stripe-js` in the checkout chunk
+ module.resource.includes('/node_modules/@stripe')),
+ },
  common: {
  minChunks: 1,
  name: 'ui-common',

packages/clerk-js/sandbox/app.ts

@@ -16,6 +16,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationProfile',
  'organizationSwitcher',
  'waitlist',
+ 'pricingTable',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -73,6 +74,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationProfile: buildComponentControls('organizationProfile'),
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
+ pricingTable: buildComponentControls('pricingTable'),
 };
 
 declare global {
@@ -95,7 +97,7 @@ const app = document.getElementById('app') as HTMLDivElement;
 function mountIndex(element: HTMLDivElement) {
  assertClerkIsLoaded(Clerk);
  const user = Clerk.user;
- element.innerHTML = `<pre><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
+ element.innerHTML = `<pre class="text-left whitespace-pre overflow-x-auto bg-white p-4 border border-gray-100 rounded-md text-sm"><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
 }
 
 function mountOpenSignInButton(element: HTMLDivElement, props) {
@@ -167,6 +169,9 @@ function addCurrentRouteIndicator(currentRoute: string) {
  },
  });
  },
+ '/pricing-table': () => {
+ Clerk.__experimental_mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },
@@ -183,6 +188,7 @@ function addCurrentRouteIndicator(currentRoute: string) {
  ...(componentControls.clerk.getProps() ?? {}),
  signInUrl: '/sign-in',
  signUpUrl: '/sign-up',
+ experimental: { commerce: true },
  });
  renderCurrentRoute();
  } else {

packages/clerk-js/sandbox/template.html

@@ -249,6 +249,14 @@
  Keyless
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/pricing-table"
+ >
+ PricingTable
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
@@ -274,7 +282,7 @@
  >
  <div
  id="app"
- class="max-w-full p-12"
+ class="container w-full p-12"
  ></div>
  </main>
 

packages/clerk-js/src/core/clerk.ts

@@ -13,6 +13,8 @@ import {
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
+ __experimental_CommerceNamespace,
+ __experimental_PricingTableProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
  AuthenticateWithGoogleOneTapParams,
@@ -119,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
  Client,
@@ -166,6 +169,7 @@ export class Clerk implements ClerkInterface {
  version: __PKG_VERSION__,
  environment: process.env.NODE_ENV || 'production',
  };
+ private static _commerce: __experimental_CommerceNamespace;
 
  public client: ClientResource | undefined;
  public session: SignedInSessionResource | null | undefined;
@@ -287,6 +291,19 @@ export class Clerk implements ClerkInterface {
  return this.#options.standardBrowser || false;
  }
 
+ get __experimental_commerce(): __experimental_CommerceNamespace {
+ if (!this.#options.experimental?.commerce) {
+ throw new Error(
+ 'Clerk: commerce functionality is currently in an experimental state. To enable, pass `experimental.commerce = true`.',
+ );
+ }
+
+ if (!Clerk._commerce) {
+ Clerk._commerce = new __experimental_Commerce();
+ }
+ return Clerk._commerce;
+ }
+
  public __internal_getOption<K extends keyof ClerkOptions>(key: K): ClerkOptions[K] {
  return this.#options[key];
  }
@@ -886,6 +903,29 @@ export class Clerk implements ClerkInterface {
  void this.#componentControls?.ensureMounted().then(controls => controls.unmountComponent({ node }));
  };
 
+ public __experimental_mountPricingTable = (node: HTMLDivElement, props?: __experimental_PricingTableProps): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'PricingTable' }).then(controls =>
+ controls.mountComponent({
+ name: 'PricingTable',
+ appearanceKey: 'pricingTable',
+ node,
+ props,
+ }),
+ );
+
+ this.telemetry?.record(eventPrebuiltComponentMounted('PricingTable', props));
+ };
+
+ public __experimental_unmountPricingTable = (node: HTMLDivElement): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls =>
+ controls.unmountComponent({
+ node,
+ }),
+ );
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

packages/clerk-js/src/core/modules/commerce/Commerce.ts

@@ -0,0 +1,46 @@
+import type {
+ __experimental_AddPaymentSourceParams,
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceNamespace,
+ __experimental_CommercePaymentSourceJSON,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { __experimental_CommercePaymentSource, BaseResource } from '../../resources/internal';
+import { __experimental_CommerceBilling } from './CommerceBilling';
+
+export class __experimental_Commerce implements __experimental_CommerceNamespace {
+ private static _billing: __experimental_CommerceBillingNamespace;
+
+ get __experimental_billing(): __experimental_CommerceBillingNamespace {
+ if (!__experimental_Commerce._billing) {
+ __experimental_Commerce._billing = new __experimental_CommerceBilling();
+ }
+ return __experimental_Commerce._billing;
+ }
+
+ addPaymentSource = async (params: __experimental_AddPaymentSourceParams) => {
+ const json = (
+ await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommercePaymentSourceJSON;
+ return new __experimental_CommercePaymentSource(json);
+ };
+
+ getPaymentSources = async () => {
+ return await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'GET',
+ }).then(res => {
+ const { data: paymentSources, total_count } =
+ res as unknown as ClerkPaginatedResponse<__experimental_CommercePaymentSourceJSON>;
+ return {
+ total_count,
+ data: paymentSources.map(paymentSource => new __experimental_CommercePaymentSource(paymentSource)),
+ };
+ });
+ };
+}

packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

@@ -0,0 +1,37 @@
+import type {
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommercePlanResource,
+ __experimental_CommerceProductJSON,
+ __experimental_CreateCheckoutParams,
+ __experimental_GetPlansParams,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams';
+import { __experimental_CommerceCheckout, __experimental_CommercePlan, BaseResource } from '../../resources/internal';
+
+export class __experimental_CommerceBilling implements __experimental_CommerceBillingNamespace {
+ getPlans = async (params?: __experimental_GetPlansParams): Promise<__experimental_CommercePlanResource[]> => {
+ const { data: products } = (await BaseResource._fetch({
+ path: `/commerce/products`,
+ method: 'GET',
+ search: convertPageToOffsetSearchParams(params),
+ })) as unknown as ClerkPaginatedResponse<__experimental_CommerceProductJSON>;
+
+ const defaultProduct = products.find(product => product.is_default);
+ return defaultProduct?.plans.map(plan => new __experimental_CommercePlan(plan)) || [];
+ };
+
+ startCheckout = async (params: __experimental_CreateCheckoutParams) => {
+ const json = (
+ await BaseResource._fetch<__experimental_CommerceCheckoutJSON>({
+ path: `/me/commerce/checkouts`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommerceCheckoutJSON;
+
+ return new __experimental_CommerceCheckout(json);
+ };
+}

packages/clerk-js/src/core/modules/commerce/index.ts

@@ -0,0 +1,2 @@
+export * from './Commerce';
+export * from './CommerceBilling';

packages/clerk-js/src/core/resources/Base.ts

@@ -62,7 +62,7 @@ export abstract class BaseResource {
  return !this.id;
  }
 
-protected static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
+ static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
  requestInit: FapiRequestInit,
  opts: BaseFetchOptions = {},
  ): Promise<FapiResponseJSON<J> | null> {

packages/clerk-js/src/core/resources/CommerceCheckout.ts

@@ -0,0 +1,63 @@
+import type {
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommerceCheckoutResource,
+ __experimental_CommerceTotals,
+ __experimental_ConfirmCheckoutParams,
+} from '@clerk/types';
+
+import { commerceTotalsFromJSON } from '../../utils';
+import {
+ __experimental_CommerceInvoice,
+ __experimental_CommercePaymentSource,
+ __experimental_CommercePlan,
+ __experimental_CommerceSubscription,
+ BaseResource,
+} from './internal';
+
+export class __experimental_CommerceCheckout extends BaseResource implements __experimental_CommerceCheckoutResource {
+ pathRoot = '/me/commerce/checkouts';
+
+ id!: string;
+ externalClientSecret!: string;
+ externalGatewayId!: string;
+ invoice?: __experimental_CommerceInvoice;
+ paymentSource?: __experimental_CommercePaymentSource;
+ plan!: __experimental_CommercePlan;
+ planPeriod!: string;
+ status!: string;
+ subscription?: __experimental_CommerceSubscription;
+ totals!: __experimental_CommerceTotals;
+
+ constructor(data: __experimental_CommerceCheckoutJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceCheckoutJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.externalClientSecret = data.external_client_secret;
+ this.externalGatewayId = data.external_gateway_id;
+ this.invoice = data.invoice ? new __experimental_CommerceInvoice(data.invoice) : undefined;
+ this.paymentSource = data.payment_source
+ ? new __experimental_CommercePaymentSource(data.payment_source)
+ : undefined;
+ this.plan = new __experimental_CommercePlan(data.plan);
+ this.planPeriod = data.plan_period;
+ this.status = data.status;
+ this.subscription = data.subscription ? new __experimental_CommerceSubscription(data.subscription) : undefined;
+ this.totals = commerceTotalsFromJSON(data.totals);
+
+ return this;
+ }
+
+ confirm = (params?: __experimental_ConfirmCheckoutParams): Promise<this> => {
+ return this._basePatch({
+ path: this.path('confirm'),
+ body: params as any,
+ });
+ };
+}

packages/clerk-js/src/core/resources/CommerceFeature.ts

@@ -0,0 +1,30 @@
+import type { __experimental_CommerceFeatureJSON, __experimental_CommerceFeatureResource } from '@clerk/types';
+
+import { BaseResource } from './internal';
+
+export class __experimental_CommerceFeature extends BaseResource implements __experimental_CommerceFeatureResource {
+ id!: string;
+ name!: string;
+ description!: string;
+ slug!: string;
+ avatarUrl!: string;
+
+ constructor(data: __experimental_CommerceFeatureJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceFeatureJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.name = data.name;
+ this.description = data.description;
+ this.slug = data.slug;
+ this.avatarUrl = data.avatar_url;
+
+ return this;
+ }
+}

.changeset/large-feet-hammer.md

@@ -0,0 +1,8 @@
+---
+'@clerk/localizations': patch
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+'@clerk/types': patch
+---
+
+Introduce experimental billing APIs and components

packages/clerk-js/bundlewatch.config.json

@@ -1,10 +1,10 @@
 {
  "files": [
- { "path": "./dist/clerk.js", "maxSize": "560kB" },
- { "path": "./dist/clerk.browser.js", "maxSize": "75kB" },
- { "path": "./dist/clerk.headless.js", "maxSize": "48.3KB" },
- { "path": "./dist/ui-common*.js", "maxSize": "89KB" },
- { "path": "./dist/vendors*.js", "maxSize": "25.1KB" },
+ { "path": "./dist/clerk.js", "maxSize": "570kB" },
+ { "path": "./dist/clerk.browser.js", "maxSize": "76kB" },
+ { "path": "./dist/clerk.headless.js", "maxSize": "50KB" },
+ { "path": "./dist/ui-common*.js", "maxSize": "92KB" },
+ { "path": "./dist/vendors*.js", "maxSize": "26.5KB" },
  { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
  { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
  { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
@@ -18,6 +18,8 @@
  { "path": "./dist/userverification*.js", "maxSize": "5KB" },
  { "path": "./dist/onetap*.js", "maxSize": "1KB" },
  { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
- { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" }
+ { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" },
+ { "path": "./dist/pricingTable*.js", "maxSize": "3.5KB" },
+ { "path": "./dist/checkout*.js", "maxSize": "8.8KB" }
  ]
 }

packages/clerk-js/package.json

@@ -63,6 +63,8 @@
  "@floating-ui/react": "0.25.4",
  "@floating-ui/react-dom": "^2.0.2",
  "@formkit/auto-animate": "^0.8.1",
+ "@stripe/react-stripe-js": "3.1.1",
+ "@stripe/stripe-js": "5.6.0",
  "@swc/helpers": "^0.5.13",
  "@zxcvbn-ts/core": "3.0.4",
  "@zxcvbn-ts/language-common": "3.0.4",

packages/clerk-js/rspack.config.js

@@ -93,6 +93,15 @@ const common = ({ mode, disableRHC = false }) => {
  name: 'signup',
  test: module => module.resource && module.resource.includes('/ui/components/SignUp'),
  },
+ checkout: {
+ minChunks: 1,
+ name: 'checkout',
+ test: module =>
+ module.resource &&
+ (module.resource.includes('/ui/components/Checkout') ||
+ // Include `@stripe/react-stripe-js` and `@stripe/stripe-js` in the checkout chunk
+ module.resource.includes('/node_modules/@stripe')),
+ },
  common: {
  minChunks: 1,
  name: 'ui-common',

packages/clerk-js/sandbox/app.ts

@@ -16,6 +16,7 @@ const AVAILABLE_COMPONENTS = [
  'organizationProfile',
  'organizationSwitcher',
  'waitlist',
+ 'pricingTable',
 ] as const;
 
 const COMPONENT_PROPS_NAMESPACE = 'clerk-js-sandbox';
@@ -73,6 +74,7 @@ const componentControls: Record<(typeof AVAILABLE_COMPONENTS)[number], Component
  organizationProfile: buildComponentControls('organizationProfile'),
  organizationSwitcher: buildComponentControls('organizationSwitcher'),
  waitlist: buildComponentControls('waitlist'),
+ pricingTable: buildComponentControls('pricingTable'),
 };
 
 declare global {
@@ -95,7 +97,7 @@ const app = document.getElementById('app') as HTMLDivElement;
 function mountIndex(element: HTMLDivElement) {
  assertClerkIsLoaded(Clerk);
  const user = Clerk.user;
- element.innerHTML = `<pre><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
+ element.innerHTML = `<pre class="text-left whitespace-pre overflow-x-auto bg-white p-4 border border-gray-100 rounded-md text-sm"><code>${JSON.stringify({ user }, null, 2)}</code></pre>`;
 }
 
 function mountOpenSignInButton(element: HTMLDivElement, props) {
@@ -167,6 +169,9 @@ function addCurrentRouteIndicator(currentRoute: string) {
  },
  });
  },
+ '/pricing-table': () => {
+ Clerk.__experimental_mountPricingTable(app, componentControls.pricingTable.getProps() ?? {});
+ },
  '/open-sign-in': () => {
  mountOpenSignInButton(app, componentControls.signIn.getProps() ?? {});
  },
@@ -183,6 +188,7 @@ function addCurrentRouteIndicator(currentRoute: string) {
  ...(componentControls.clerk.getProps() ?? {}),
  signInUrl: '/sign-in',
  signUpUrl: '/sign-up',
+ experimental: { commerce: true },
  });
  renderCurrentRoute();
  } else {

packages/clerk-js/sandbox/template.html

@@ -249,6 +249,14 @@
  Keyless
  </a>
  </li>
+ <li class="relative">
+ <a
+ class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
+ href="/pricing-table"
+ >
+ PricingTable
+ </a>
+ </li>
  <li class="relative">
  <a
  class="relative isolate flex w-full rounded-md border border-white px-2 py-[0.4375rem] text-sm hover:bg-gray-50 aria-[current]:bg-gray-50"
@@ -274,7 +282,7 @@
  >
  <div
  id="app"
- class="max-w-full p-12"
+ class="container w-full p-12"
  ></div>
  </main>
 

packages/clerk-js/src/core/clerk.ts

@@ -13,6 +13,8 @@ import {
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
+ __experimental_CommerceNamespace,
+ __experimental_PricingTableProps,
  __internal_UserVerificationModalProps,
  AuthenticateWithCoinbaseWalletParams,
  AuthenticateWithGoogleOneTapParams,
@@ -119,6 +121,7 @@ import {
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
+import { __experimental_Commerce } from './modules/commerce';
 import {
  BaseResource,
  Client,
@@ -166,6 +169,7 @@ export class Clerk implements ClerkInterface {
  version: __PKG_VERSION__,
  environment: process.env.NODE_ENV || 'production',
  };
+ private static _commerce: __experimental_CommerceNamespace;
 
  public client: ClientResource | undefined;
  public session: SignedInSessionResource | null | undefined;
@@ -287,6 +291,19 @@ export class Clerk implements ClerkInterface {
  return this.#options.standardBrowser || false;
  }
 
+ get __experimental_commerce(): __experimental_CommerceNamespace {
+ if (!this.#options.experimental?.commerce) {
+ throw new Error(
+ 'Clerk: commerce functionality is currently in an experimental state. To enable, pass `experimental.commerce = true`.',
+ );
+ }
+
+ if (!Clerk._commerce) {
+ Clerk._commerce = new __experimental_Commerce();
+ }
+ return Clerk._commerce;
+ }
+
  public __internal_getOption<K extends keyof ClerkOptions>(key: K): ClerkOptions[K] {
  return this.#options[key];
  }
@@ -886,6 +903,29 @@ export class Clerk implements ClerkInterface {
  void this.#componentControls?.ensureMounted().then(controls => controls.unmountComponent({ node }));
  };
 
+ public __experimental_mountPricingTable = (node: HTMLDivElement, props?: __experimental_PricingTableProps): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted({ preloadHint: 'PricingTable' }).then(controls =>
+ controls.mountComponent({
+ name: 'PricingTable',
+ appearanceKey: 'pricingTable',
+ node,
+ props,
+ }),
+ );
+
+ this.telemetry?.record(eventPrebuiltComponentMounted('PricingTable', props));
+ };
+
+ public __experimental_unmountPricingTable = (node: HTMLDivElement): void => {
+ this.assertComponentsReady(this.#componentControls);
+ void this.#componentControls.ensureMounted().then(controls =>
+ controls.unmountComponent({
+ node,
+ }),
+ );
+ };
+
  /**
  * `setActive` can be used to set the active session and/or organization.
  */

packages/clerk-js/src/core/modules/commerce/Commerce.ts

@@ -0,0 +1,46 @@
+import type {
+ __experimental_AddPaymentSourceParams,
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceNamespace,
+ __experimental_CommercePaymentSourceJSON,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { __experimental_CommercePaymentSource, BaseResource } from '../../resources/internal';
+import { __experimental_CommerceBilling } from './CommerceBilling';
+
+export class __experimental_Commerce implements __experimental_CommerceNamespace {
+ private static _billing: __experimental_CommerceBillingNamespace;
+
+ get __experimental_billing(): __experimental_CommerceBillingNamespace {
+ if (!__experimental_Commerce._billing) {
+ __experimental_Commerce._billing = new __experimental_CommerceBilling();
+ }
+ return __experimental_Commerce._billing;
+ }
+
+ addPaymentSource = async (params: __experimental_AddPaymentSourceParams) => {
+ const json = (
+ await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommercePaymentSourceJSON;
+ return new __experimental_CommercePaymentSource(json);
+ };
+
+ getPaymentSources = async () => {
+ return await BaseResource._fetch({
+ path: `/me/commerce/payment_sources`,
+ method: 'GET',
+ }).then(res => {
+ const { data: paymentSources, total_count } =
+ res as unknown as ClerkPaginatedResponse<__experimental_CommercePaymentSourceJSON>;
+ return {
+ total_count,
+ data: paymentSources.map(paymentSource => new __experimental_CommercePaymentSource(paymentSource)),
+ };
+ });
+ };
+}

packages/clerk-js/src/core/modules/commerce/CommerceBilling.ts

@@ -0,0 +1,37 @@
+import type {
+ __experimental_CommerceBillingNamespace,
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommercePlanResource,
+ __experimental_CommerceProductJSON,
+ __experimental_CreateCheckoutParams,
+ __experimental_GetPlansParams,
+ ClerkPaginatedResponse,
+} from '@clerk/types';
+
+import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams';
+import { __experimental_CommerceCheckout, __experimental_CommercePlan, BaseResource } from '../../resources/internal';
+
+export class __experimental_CommerceBilling implements __experimental_CommerceBillingNamespace {
+ getPlans = async (params?: __experimental_GetPlansParams): Promise<__experimental_CommercePlanResource[]> => {
+ const { data: products } = (await BaseResource._fetch({
+ path: `/commerce/products`,
+ method: 'GET',
+ search: convertPageToOffsetSearchParams(params),
+ })) as unknown as ClerkPaginatedResponse<__experimental_CommerceProductJSON>;
+
+ const defaultProduct = products.find(product => product.is_default);
+ return defaultProduct?.plans.map(plan => new __experimental_CommercePlan(plan)) || [];
+ };
+
+ startCheckout = async (params: __experimental_CreateCheckoutParams) => {
+ const json = (
+ await BaseResource._fetch<__experimental_CommerceCheckoutJSON>({
+ path: `/me/commerce/checkouts`,
+ method: 'POST',
+ body: params as any,
+ })
+ )?.response as unknown as __experimental_CommerceCheckoutJSON;
+
+ return new __experimental_CommerceCheckout(json);
+ };
+}

packages/clerk-js/src/core/modules/commerce/index.ts

@@ -0,0 +1,2 @@
+export * from './Commerce';
+export * from './CommerceBilling';

packages/clerk-js/src/core/resources/Base.ts

@@ -62,7 +62,7 @@ export abstract class BaseResource {
  return !this.id;
  }
 
-protected static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
+ static async _fetch<J extends ClerkResourceJSON | DeletedObjectJSON | null>(
  requestInit: FapiRequestInit,
  opts: BaseFetchOptions = {},
  ): Promise<FapiResponseJSON<J> | null> {

packages/clerk-js/src/core/resources/CommerceCheckout.ts

@@ -0,0 +1,63 @@
+import type {
+ __experimental_CommerceCheckoutJSON,
+ __experimental_CommerceCheckoutResource,
+ __experimental_CommerceTotals,
+ __experimental_ConfirmCheckoutParams,
+} from '@clerk/types';
+
+import { commerceTotalsFromJSON } from '../../utils';
+import {
+ __experimental_CommerceInvoice,
+ __experimental_CommercePaymentSource,
+ __experimental_CommercePlan,
+ __experimental_CommerceSubscription,
+ BaseResource,
+} from './internal';
+
+export class __experimental_CommerceCheckout extends BaseResource implements __experimental_CommerceCheckoutResource {
+ pathRoot = '/me/commerce/checkouts';
+
+ id!: string;
+ externalClientSecret!: string;
+ externalGatewayId!: string;
+ invoice?: __experimental_CommerceInvoice;
+ paymentSource?: __experimental_CommercePaymentSource;
+ plan!: __experimental_CommercePlan;
+ planPeriod!: string;
+ status!: string;
+ subscription?: __experimental_CommerceSubscription;
+ totals!: __experimental_CommerceTotals;
+
+ constructor(data: __experimental_CommerceCheckoutJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceCheckoutJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.externalClientSecret = data.external_client_secret;
+ this.externalGatewayId = data.external_gateway_id;
+ this.invoice = data.invoice ? new __experimental_CommerceInvoice(data.invoice) : undefined;
+ this.paymentSource = data.payment_source
+ ? new __experimental_CommercePaymentSource(data.payment_source)
+ : undefined;
+ this.plan = new __experimental_CommercePlan(data.plan);
+ this.planPeriod = data.plan_period;
+ this.status = data.status;
+ this.subscription = data.subscription ? new __experimental_CommerceSubscription(data.subscription) : undefined;
+ this.totals = commerceTotalsFromJSON(data.totals);
+
+ return this;
+ }
+
+ confirm = (params?: __experimental_ConfirmCheckoutParams): Promise<this> => {
+ return this._basePatch({
+ path: this.path('confirm'),
+ body: params as any,
+ });
+ };
+}

packages/clerk-js/src/core/resources/CommerceFeature.ts

@@ -0,0 +1,30 @@
+import type { __experimental_CommerceFeatureJSON, __experimental_CommerceFeatureResource } from '@clerk/types';
+
+import { BaseResource } from './internal';
+
+export class __experimental_CommerceFeature extends BaseResource implements __experimental_CommerceFeatureResource {
+ id!: string;
+ name!: string;
+ description!: string;
+ slug!: string;
+ avatarUrl!: string;
+
+ constructor(data: __experimental_CommerceFeatureJSON) {
+ super();
+ this.fromJSON(data);
+ }
+
+ protected fromJSON(data: __experimental_CommerceFeatureJSON | null): this {
+ if (!data) {
+ return this;
+ }
+
+ this.id = data.id;
+ this.name = data.name;
+ this.description = data.description;
+ this.slug = data.slug;
+ this.avatarUrl = data.avatar_url;
+
+ return this;
+ }
+}