feat(clerk-js): Add payment sources to OrgProfile, org-specific commerce endpoints (#5554)

Author: aeliox

.changeset/great-moons-occur.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+'@clerk/types': patch
+---
+
+Add Payment Sources to `<OrgProfile />`, hook up all org-related payment source and checkout methods to the org-specific endpoints

packages/clerk-js/bundlewatch.config.json

@@ -1,9 +1,9 @@
 {
   "files": [
     { "path": "./dist/clerk.js", "maxSize": "590kB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "72.5KB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "72.65KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "98KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "98.1KB" },
     { "path": "./dist/vendors*.js", "maxSize": "36KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "35.5KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
@@ -21,7 +21,7 @@
     { "path": "./dist/keylessPrompt*.js", "maxSize": "5.9KB" },
     { "path": "./dist/pricingTable*.js", "maxSize": "5KB" },
     { "path": "./dist/checkout*.js", "maxSize": "3KB" },
-    { "path": "./dist/paymentSources*.js", "maxSize": "8KB" },
+    { "path": "./dist/paymentSources*.js", "maxSize": "8.1KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "1KB" },
     { "path": "./dist/op-billing-page*.js", "maxSize": "1KB" },
     { "path": "./dist/sessionTasks*.js", "maxSize": "1KB" }

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

@@ -9,6 +9,7 @@ import type {
   ClerkPaginatedResponse,
 } from '@clerk/types';
 
+import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams';
 import {
   __experimental_CommerceInitializedPaymentSource,
   __experimental_CommercePaymentSource,
@@ -27,35 +28,42 @@ export class __experimental_Commerce implements __experimental_CommerceNamespace
   }
 
   initializePaymentSource = async (params: __experimental_InitializePaymentSourceParams) => {
+    const { orgId, ...rest } = params;
     const json = (
       await BaseResource._fetch({
-        path: `/me/commerce/payment_sources/initialize`,
+        path: orgId
+          ? `/organizations/${orgId}/commerce/payment_sources/initialize`
+          : `/me/commerce/payment_sources/initialize`,
         method: 'POST',
-        body: params as any,
+        body: rest as any,
       })
     )?.response as unknown as __experimental_CommerceInitializedPaymentSourceJSON;
     return new __experimental_CommerceInitializedPaymentSource(json);
   };
 
   addPaymentSource = async (params: __experimental_AddPaymentSourceParams) => {
+    const { orgId, ...rest } = params;
+
     const json = (
       await BaseResource._fetch({
-        path: `/me/commerce/payment_sources`,
+        path: orgId ? `/organizations/${orgId}/commerce/payment_sources` : `/me/commerce/payment_sources`,
         method: 'POST',
-        body: params as any,
+        body: rest as any,
       })
     )?.response as unknown as __experimental_CommercePaymentSourceJSON;
     return new __experimental_CommercePaymentSource(json);
   };
 
   getPaymentSources = async (params: __experimental_GetPaymentSourcesParams) => {
+    const { orgId, ...rest } = params;
+
     return await BaseResource._fetch({
-      path: `/me/commerce/payment_sources`,
+      path: orgId ? `/organizations/${orgId}/commerce/payment_sources` : `/me/commerce/payment_sources`,
       method: 'GET',
-      search: { orgId: params.orgId || '' },
+      search: convertPageToOffsetSearchParams(rest),
     }).then(res => {
       const { data: paymentSources, total_count } =
-        res as unknown as ClerkPaginatedResponse<__experimental_CommercePaymentSourceJSON>;
+        res?.response 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

@@ -7,9 +7,11 @@ import type {
   __experimental_CommerceSubscriptionResource,
   __experimental_CreateCheckoutParams,
   __experimental_GetPlansParams,
+  __experimental_GetSubscriptionsParams,
   ClerkPaginatedResponse,
 } from '@clerk/types';
 
+import { convertPageToOffsetSearchParams } from '../../../utils/convertPageToOffsetSearchParams';
 import {
   __experimental_CommerceCheckout,
   __experimental_CommercePlan,
@@ -29,10 +31,15 @@ export class __experimental_CommerceBilling implements __experimental_CommerceBi
     return defaultProduct?.plans.map(plan => new __experimental_CommercePlan(plan)) || [];
   };
 
-  getSubscriptions = async (): Promise<ClerkPaginatedResponse<__experimental_CommerceSubscriptionResource>> => {
+  getSubscriptions = async (
+    params: __experimental_GetSubscriptionsParams,
+  ): Promise<ClerkPaginatedResponse<__experimental_CommerceSubscriptionResource>> => {
+    const { orgId, ...rest } = params;
+
     return await BaseResource._fetch({
-      path: `/me/subscriptions`,
+      path: orgId ? `/organizations/${orgId}/subscriptions` : `/me/commerce/subscriptions`,
       method: 'GET',
+      search: convertPageToOffsetSearchParams(rest),
     }).then(res => {
       const { data: subscriptions, total_count } =
         res?.response as unknown as ClerkPaginatedResponse<__experimental_CommerceSubscriptionJSON>;
@@ -45,11 +52,12 @@ export class __experimental_CommerceBilling implements __experimental_CommerceBi
   };
 
   startCheckout = async (params: __experimental_CreateCheckoutParams) => {
+    const { orgId, ...rest } = params;
     const json = (
       await BaseResource._fetch<__experimental_CommerceCheckoutJSON>({
-        path: `/me/commerce/checkouts`,
+        path: orgId ? `/organizations/${orgId}/commerce/checkouts` : `/me/commerce/checkouts`,
         method: 'POST',
-        body: params as any,
+        body: rest as any,
       })
     )?.response as unknown as __experimental_CommerceCheckoutJSON;
 

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

@@ -16,8 +16,6 @@ import {
 } from './internal';
 
 export class __experimental_CommerceCheckout extends BaseResource implements __experimental_CommerceCheckoutResource {
-  pathRoot = '/me/commerce/checkouts';
-
   id!: string;
   externalClientSecret!: string;
   externalGatewayId!: string;
@@ -55,10 +53,13 @@ export class __experimental_CommerceCheckout extends BaseResource implements __e
     return this;
   }
 
-  confirm = (params?: __experimental_ConfirmCheckoutParams): Promise<this> => {
+  confirm = (params: __experimental_ConfirmCheckoutParams): Promise<this> => {
+    const { orgId, ...rest } = params;
     return this._basePatch({
-      path: this.path('confirm'),
-      body: params as any,
+      path: orgId
+        ? `/organizations/${orgId}/commerce/checkouts/${this.id}/confirm`
+        : `/me/commerce/checkouts/${this.id}/confirm`,
+      body: rest as any,
     });
   };
 }

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

@@ -4,6 +4,8 @@ import type {
   __experimental_CommercePaymentSourceJSON,
   __experimental_CommercePaymentSourceResource,
   __experimental_CommercePaymentSourceStatus,
+  __experimental_MakeDefaultPaymentSourceParams,
+  __experimental_RemovePaymentSourceParams,
   DeletedObjectJSON,
 } from '@clerk/types';
 
@@ -19,6 +21,7 @@ export class __experimental_CommercePaymentSource
   cardType!: string;
   isDefault!: boolean;
   status!: __experimental_CommercePaymentSourceStatus;
+  walletType: string | undefined;
 
   constructor(data: __experimental_CommercePaymentSourceJSON) {
     super();
@@ -34,21 +37,39 @@ export class __experimental_CommercePaymentSource
     this.last4 = data.last4;
     this.paymentMethod = data.payment_method;
     this.cardType = data.card_type;
-    this.isDefault = false;
+    this.isDefault = data.is_default;
     this.status = data.status;
+    this.walletType = data.wallet_type ?? undefined;
+
     return this;
   }
 
-  public async remove() {
+  public async remove(params?: __experimental_RemovePaymentSourceParams) {
+    const { orgId } = params ?? {};
     const json = (
       await BaseResource._fetch({
-        path: `/me/commerce/payment_sources/${this.id}`,
+        path: orgId
+          ? `/organizations/${orgId}/commerce/payment_sources/${this.id}`
+          : `/me/commerce/payment_sources/${this.id}`,
         method: 'DELETE',
       })
     )?.response as unknown as DeletedObjectJSON;
 
     return new DeletedObject(json);
   }
+
+  public async makeDefault(params?: __experimental_MakeDefaultPaymentSourceParams) {
+    const { orgId } = params ?? {};
+    await BaseResource._fetch({
+      path: orgId
+        ? `/organizations/${orgId}/commerce/payers/default_payment_source`
+        : `/me/commerce/payers/default_payment_source`,
+      method: 'PUT',
+      body: { payment_source_id: this.id } as any,
+    });
+
+    return null;
+  }
 }
 
 export class __experimental_CommerceInitializedPaymentSource

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

@@ -1,4 +1,5 @@
 import type {
+  __experimental_CancelSubscriptionParams,
   __experimental_CommerceSubscriptionJSON,
   __experimental_CommerceSubscriptionPlanPeriod,
   __experimental_CommerceSubscriptionResource,
@@ -37,10 +38,13 @@ export class __experimental_CommerceSubscription
     return this;
   }
 
-  public async cancel() {
+  public async cancel(params: __experimental_CancelSubscriptionParams) {
+    const { orgId } = params;
     const json = (
       await BaseResource._fetch({
-        path: `/me/commerce/subscriptions/${this.id}`,
+        path: orgId
+          ? `/organizations/${orgId}/commerce/subscriptions/${this.id}`
+          : `/me/commerce/subscriptions/${this.id}`,
         method: 'DELETE',
       })
     )?.response as unknown as DeletedObjectJSON;

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

@@ -240,16 +240,11 @@ export class Organization extends BaseResource implements OrganizationResource {
   __experimental_getSubscriptions = async (
     getSubscriptionsParams?: __experimental_GetSubscriptionsParams,
   ): Promise<ClerkPaginatedResponse<__experimental_CommerceSubscriptionResource>> => {
-    return await BaseResource._fetch(
-      {
-        path: `/organizations/${this.id}/subscriptions`,
-        method: 'GET',
-        search: convertPageToOffsetSearchParams(getSubscriptionsParams),
-      },
-      {
-        forceUpdateClient: true,
-      },
-    ).then(res => {
+    return await BaseResource._fetch({
+      path: `/organizations/${this.id}/subscriptions`,
+      method: 'GET',
+      search: convertPageToOffsetSearchParams(getSubscriptionsParams),
+    }).then(res => {
       const { data: subscriptions, total_count } =
         res?.response as unknown as ClerkPaginatedResponse<__experimental_CommerceSubscriptionJSON>;
 

packages/clerk-js/src/ui/Components.tsx

@@ -541,7 +541,7 @@ const Components = (props: ComponentsProps) => {
       <Checkout
         planId={checkoutDrawer.props.planId}
         planPeriod={checkoutDrawer.props.planPeriod}
-        orgId={checkoutDrawer.props.orgId}
+        subscriberType={checkoutDrawer.props.subscriberType}
         onSubscriptionComplete={checkoutDrawer.props.onSubscriptionComplete}
       />
     </LazyDrawerRenderer>

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

@@ -12,6 +12,7 @@ export const __experimental_Checkout = (props: __experimental_CheckoutProps) =>
         <__experimental_CheckoutContext.Provider
           value={{
             componentName: 'Checkout',
+            ...props,
           }}
         >
           <Drawer.Content>