chore(clerk-js): Remove Clerk.commerce

.changeset/proud-donuts-shop.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Remove `Clerk.commerce` and any usages. Hoist `Clerk.commerce.billing` to `Clerk.billing`. Payment source related methods have been moved to `Clerk.user` and `Clerk.organization`.

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

@@ -1,4 +1,4 @@
 import { inBrowser as inClientSide, isValidBrowserOnline } from '@clerk/shared/browser';
 import { clerkEvents, createClerkEventBus } from '@clerk/shared/clerkEventBus';
 import { deprecated } from '@clerk/shared/deprecated';
 import { ClerkRuntimeError, EmailLinkErrorCodeStatus, is4xxError, isClerkAPIResponseError } from '@clerk/shared/error';
@@ -29,7 +29,6 @@
   ClerkOptions,
   ClientJSONSnapshot,
   ClientResource,
-  CommerceNamespace,
   CreateOrganizationParams,
   CreateOrganizationProps,
   CredentialReturn,
@@ -77,6 +76,7 @@
   WaitlistProps,
   WaitlistResource,
   Web3Provider,
+  CommerceBillingNamespace,
 } from '@clerk/types';
 
 import type { MountComponentRenderer } from '../ui/Components';
@@ -131,7 +131,7 @@
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
 import { createClientFromJwt } from './jwt-client';
-import { Commerce } from './modules/commerce';
+import { CommerceBilling } from './modules/commerce';
 import {
   BaseResource,
   Client,
@@ -187,7 +187,7 @@
     version: __PKG_VERSION__,
     environment: process.env.NODE_ENV || 'production',
   };
-  private static _commerce: CommerceNamespace;
+  private static _billing: CommerceBillingNamespace;
 
   public client: ClientResource | undefined;
   public session: SignedInSessionResource | null | undefined;
@@ -316,11 +316,11 @@
     return this.#options.standardBrowser || false;
   }
 
-  get commerce(): CommerceNamespace {
-    if (!Clerk._commerce) {
-      Clerk._commerce = new Commerce();
+  get billing(): CommerceBillingNamespace {
+    if (!Clerk._billing) {
+      Clerk._billing = new CommerceBilling();
     }
-    return Clerk._commerce;
+    return Clerk._billing;
   }
 
   public __internal_getOption<K extends keyof ClerkOptions>(key: K): ClerkOptions[K] {

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

@@ -1,2 +1,2 @@
-export * from './Commerce';
 export * from './CommerceBilling';
+export * from './payment-source-methods';

packages/clerk-js/src/core/modules/commerce/payment-source-methods.ts

@@ -0,0 +1,55 @@
+import type {
+  AddPaymentSourceParams,
+  ClerkPaginatedResponse,
+  CommerceInitializedPaymentSourceJSON,
+  CommercePaymentSourceJSON,
+  GetPaymentSourcesParams,
+  InitializePaymentSourceParams,
+} from '@clerk/types';
+
+import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams';
+import { BaseResource, CommerceInitializedPaymentSource, CommercePaymentSource } from '../../resources/internal';
+
+export const initializePaymentSource = async (params: InitializePaymentSourceParams) => {
+  const { orgId, ...rest } = params;
+  const json = (
+    await BaseResource._fetch({
+      path: orgId
+        ? `/organizations/${orgId}/commerce/payment_sources/initialize`
+        : `/me/commerce/payment_sources/initialize`,
+      method: 'POST',
+      body: rest as any,
+    })
+  )?.response as unknown as CommerceInitializedPaymentSourceJSON;
+  return new CommerceInitializedPaymentSource(json);
+};
+
+export const addPaymentSource = async (params: AddPaymentSourceParams) => {
+  const { orgId, ...rest } = params;
+
+  const json = (
+    await BaseResource._fetch({
+      path: orgId ? `/organizations/${orgId}/commerce/payment_sources` : `/me/commerce/payment_sources`,
+      method: 'POST',
+      body: rest as any,
+    })
+  )?.response as unknown as CommercePaymentSourceJSON;
+  return new CommercePaymentSource(json);
+};
+
+export const getPaymentSources = async (params: GetPaymentSourcesParams) => {
+  const { orgId, ...rest } = params;
+
+  return await BaseResource._fetch({
+    path: orgId ? `/organizations/${orgId}/commerce/payment_sources` : `/me/commerce/payment_sources`,
+    method: 'GET',
+    search: convertPageToOffsetSearchParams(rest),
+  }).then(res => {
+    const { data: paymentSources, total_count } =
+      res?.response as unknown as ClerkPaginatedResponse<CommercePaymentSourceJSON>;
+    return {
+      total_count,
+      data: paymentSources.map(paymentSource => new CommercePaymentSource(paymentSource)),
+    };
+  });
+};

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

@@ -1,4 +1,4 @@
 import type {
   AddMemberParams,
   ClerkPaginatedResponse,
   ClerkResourceReloadParams,
@@ -35,6 +35,7 @@
 import { OrganizationDomain } from './OrganizationDomain';
 import { OrganizationMembershipRequest } from './OrganizationMembershipRequest';
 import { Role } from './Role';
+import { addPaymentSource, getPaymentSources, initializePaymentSource } from '../modules/commerce';
 
 export class Organization extends BaseResource implements OrganizationResource {
   pathRoot = '/organizations';
@@ -282,6 +283,27 @@
     }).then(res => new Organization(res?.response as OrganizationJSON));
   };
 
+  initializePaymentSource: typeof initializePaymentSource = params => {
+    return initializePaymentSource({
+      ...params,
+      orgId: this.id,
+    });
+  };
+
+  addPaymentSource: typeof addPaymentSource = params => {
+    return addPaymentSource({
+      ...params,
+      orgId: this.id,
+    });
+  };
+
+  getPaymentSources: typeof getPaymentSources = params => {
+    return getPaymentSources({
+      ...params,
+      orgId: this.id,
+    });
+  };
+
   protected fromJSON(data: OrganizationJSON | OrganizationJSONSnapshot | null): this {
     if (!data) {
       return this;

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

@@ -36,6 +36,7 @@ import { unixEpochToDate } from '../../utils/date';
 import { normalizeUnsafeMetadata } from '../../utils/resourceParams';
 import { getFullName } from '../../utils/user';
 import { eventBus, events } from '../events';
+import { addPaymentSource, getPaymentSources, initializePaymentSource } from '../modules/commerce';
 import { BackupCode } from './BackupCode';
 import {
   BaseResource,
@@ -290,6 +291,18 @@ export class User extends BaseResource implements UserResource {
     return new DeletedObject(json);
   };
 
+  initializePaymentSource: typeof initializePaymentSource = params => {
+    return initializePaymentSource(params);
+  };
+
+  addPaymentSource: typeof addPaymentSource = params => {
+    return addPaymentSource(params);
+  };
+
+  getPaymentSources: typeof getPaymentSources = params => {
+    return getPaymentSources(params);
+  };
+
   get verifiedExternalAccounts() {
     return this.externalAccounts.filter(externalAccount => externalAccount.verification?.status == 'verified');
   }

packages/clerk-js/src/core/resources/__tests__/__snapshots__/Organization.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`Organization has the same initial properties 1`] = `
 Organization {
   "addMember": [Function],
+  "addPaymentSource": [Function],
   "adminDeleteEnabled": true,
   "createDomain": [Function],
   "createdAt": 1970-01-01T00:00:12.345Z,
@@ -12,11 +13,13 @@ Organization {
   "getInvitations": [Function],
   "getMembershipRequests": [Function],
   "getMemberships": [Function],
+  "getPaymentSources": [Function],
   "getRoles": [Function],
   "getSubscriptions": [Function],
   "hasImage": true,
   "id": "test_id",
   "imageUrl": "https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18xbHlXRFppb2JyNjAwQUtVZVFEb1NsckVtb00iLCJyaWQiOiJ1c2VyXzJKbElJQTN2VXNjWXh1N2VUMnhINmFrTGgxOCIsImluaXRpYWxzIjoiREsifQ?width=160",
+  "initializePaymentSource": [Function],
   "inviteMember": [Function],
   "inviteMembers": [Function],
   "maxAllowedMemberships": 3,

packages/clerk-js/src/core/resources/__tests__/__snapshots__/OrganizationMembership.test.ts.snap

@@ -7,6 +7,7 @@ OrganizationMembership {
   "id": "test_id",
   "organization": Organization {
     "addMember": [Function],
+    "addPaymentSource": [Function],
     "adminDeleteEnabled": true,
     "createDomain": [Function],
     "createdAt": 1970-01-01T00:00:12.345Z,
@@ -16,11 +17,13 @@ OrganizationMembership {
     "getInvitations": [Function],
     "getMembershipRequests": [Function],
     "getMemberships": [Function],
+    "getPaymentSources": [Function],
     "getRoles": [Function],
     "getSubscriptions": [Function],
     "hasImage": true,
     "id": "test_org_id",
     "imageUrl": "https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18xbHlXRFppb2JyNjAwQUtVZVFEb1NsckVtb00iLCJyaWQiOiJ1c2VyXzJKbElJQTN2VXNjWXh1N2VUMnhINmFrTGgxOCIsImluaXRpYWxzIjoiREsifQ?width=160",
+    "initializePaymentSource": [Function],
     "inviteMember": [Function],
     "inviteMembers": [Function],
     "maxAllowedMemberships": 3,

packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx

@@ -1,4 +1,4 @@
-import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
+import { useOrganization } from '@clerk/shared/react';
 import type {
   ClerkAPIError,
   ClerkRuntimeError,
@@ -114,22 +114,18 @@ const CheckoutFormElements = ({
   checkout: CommerceCheckoutResource;
   onCheckoutComplete: (checkout: CommerceCheckoutResource) => void;
 }) => {
-  const { commerce } = useClerk();
-  const { user } = useUser();
   const { organization } = useOrganization();
-  const { subscriberType } = useCheckoutContext();
+  const { subscriber, subscriberType } = useCheckoutContext();
 
   const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>('existing');
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [submitError, setSubmitError] = useState<ClerkRuntimeError | ClerkAPIError | string | undefined>();
 
   const { data, revalidate: revalidatePaymentSources } = useFetch(
-    commerce?.getPaymentSources,
-    {
-      ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
-    },
+    subscriber().getPaymentSources,
+    {},
     undefined,
-    `commerce-payment-sources-${user?.id}`,
+    `commerce-payment-sources-${subscriber().id}`,
   );
   const { data: paymentSources } = data || { data: [] };
 

packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx

@@ -37,12 +37,13 @@ export const AddPaymentSource = (props: AddPaymentSourceProps) => {
     onPayWithTestPaymentSourceSuccess,
     showPayWithTestCardSection,
   } = props;
-  const { commerce } = useClerk();
   const { commerceSettings } = useEnvironment();
   const { organization } = useOrganization();
   const { user } = useUser();
   const subscriberType = useSubscriberTypeContext();
 
+  const resource = subscriberType === 'org' ? organization : user;
+
   const stripePromiseRef = useRef<Promise<Stripe | null> | null>(null);
   const [stripe, setStripe] = useState<Stripe | null>(null);
 
@@ -73,13 +74,12 @@ export const AddPaymentSource = (props: AddPaymentSourceProps) => {
     invalidate,
     revalidate: revalidateInitializedPaymentSource,
   } = useFetch(
-    commerce.initializePaymentSource,
+    resource?.initializePaymentSource,
     {
       gateway: 'stripe',
-      ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
     },
     undefined,
-    `commerce-payment-source-initialize-${user?.id}`,
+    `commerce-payment-source-initialize-${resource?.id}`,
   );
 
   const externalGatewayId = initializedPaymentSource?.externalGatewayId;