chore(clerk-js): Nest existing commerce settings under billing

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

@@ -84,7 +84,7 @@ import {
   createAllowedRedirectOrigins,
   createBeforeUnloadTracker,
   createPageLifecycle,
-  disabledCommerceFeature,
+  disabledBillingFeature,
   disabledOrganizationsFeature,
   errorThrower,
   generateSignatureWithCoinbaseWallet,
@@ -955,7 +955,7 @@ export class Clerk implements ClerkInterface {
 
   public __experimental_mountPricingTable = (node: HTMLDivElement, props?: __experimental_PricingTableProps): void => {
     this.assertComponentsReady(this.#componentControls);
-    if (disabledCommerceFeature(this, this.environment)) {
+    if (disabledBillingFeature(this, this.environment)) {
       if (this.#instanceType === 'development') {
         throw new ClerkRuntimeError(warnings.cannotRenderAnyCommerceComponent('PricingTable'), {
           code: 'cannot_render_commerce_disabled',

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

@@ -10,8 +10,10 @@ import { BaseResource } from './internal';
  * @internal
  */
 export class __experimental_CommerceSettings extends BaseResource implements __experimental_CommerceSettingsResource {
-  stripePublishableKey: string = '';
-  enabled: boolean = false;
+  billing = {
+    stripePublishableKey: '',
+    enabled: false,
+  };
 
   public constructor(
     data: __experimental_CommerceSettingsJSON | __experimental_CommerceSettingsJSONSnapshot | null = null,
@@ -23,18 +25,22 @@ export class __experimental_CommerceSettings extends BaseResource implements __e
   protected fromJSON(
     data: __experimental_CommerceSettingsJSON | __experimental_CommerceSettingsJSONSnapshot | null,
   ): this {
-    if (!data) {
+    if (!data?.billing) {
       return this;
     }
-    this.stripePublishableKey = data.stripe_publishable_key;
-    this.enabled = data.enabled;
+
+    this.billing.stripePublishableKey = data.billing.stripe_publishable_key || '';
+    this.billing.enabled = data.billing.enabled || false;
+
     return this;
   }
 
   public __internal_toSnapshot(): __experimental_CommerceSettingsJSONSnapshot {
     return {
-      stripe_publishable_key: this.stripePublishableKey,
-      enabled: this.enabled,
+      billing: {
+        stripe_publishable_key: this.billing.stripePublishableKey,
+        enabled: this.billing.enabled,
+      },
     } as unknown as __experimental_CommerceSettingsJSONSnapshot;
   }
 }

packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileRoutes.tsx

@@ -59,7 +59,7 @@ export const OrganizationProfileRoutes = () => {
             </Route>
           </Switch>
         </Route>
-        {experimental?.commerce && __experimental_commerceSettings.enabled && (
+        {experimental?.commerce && __experimental_commerceSettings.billing.enabled && (
           <Route path={isBillingPageRoot ? undefined : 'organization-billing'}>
             <Switch>
               <Route index>

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

@@ -73,14 +73,16 @@ export const AddPaymentSource = (props: AddPaymentSourceProps) => {
   const externalGatewayId = checkout?.externalGatewayId ?? initializedPaymentSource?.externalGatewayId;
   const externalClientSecret = checkout?.externalClientSecret ?? initializedPaymentSource?.externalClientSecret;
 
+  const stripePublishableKey = __experimental_commerceSettings.billing.stripePublishableKey;
+
   useEffect(() => {
-    if (!stripePromiseRef.current && externalGatewayId && __experimental_commerceSettings.stripePublishableKey) {
+    if (!stripePromiseRef.current && externalGatewayId && stripePublishableKey) {
       if (__BUILD_DISABLE_RHC__) {
         clerkUnsupportedEnvironmentWarning('Stripe');
         return;
       }
 
-      stripePromiseRef.current = loadStripe(__experimental_commerceSettings.stripePublishableKey, {
+      stripePromiseRef.current = loadStripe(stripePublishableKey, {
         stripeAccount: externalGatewayId,
       });
 

packages/clerk-js/src/ui/components/UserProfile/UserProfileRoutes.tsx

@@ -56,7 +56,7 @@ export const UserProfileRoutes = () => {
             </Route>
           </Switch>
         </Route>
-        {experimental?.commerce && __experimental_commerceSettings.enabled && (
+        {experimental?.commerce && __experimental_commerceSettings.billing.enabled && (
           <Route path={isBillingPageRoot ? undefined : 'billing'}>
             <Switch>
               <Route index>

packages/clerk-js/src/ui/utils/createCustomPages.tsx

@@ -91,7 +91,8 @@ const createCustomPages = (
     commerce:
       clerk.sdkMetadata?.environment === 'test'
         ? false
-        : clerk.__internal_getOption('experimental')?.commerce && environment?.__experimental_commerceSettings.enabled,
+        : clerk.__internal_getOption('experimental')?.commerce &&
+          environment?.__experimental_commerceSettings?.billing.enabled,
   });
 
   if (isDevelopmentSDK(clerk)) {

packages/clerk-js/src/utils/componentGuards.ts

@@ -22,6 +22,6 @@ export const disabledOrganizationsFeature: ComponentGuard = (_, environment) =>
   return !environment?.organizationSettings.enabled;
 };
 
-export const disabledCommerceFeature: ComponentGuard = (_, environment) => {
-  return !environment?.__experimental_commerceSettings.enabled;
+export const disabledBillingFeature: ComponentGuard = (_, environment) => {
+  return !environment?.__experimental_commerceSettings.billing.enabled;
 };

packages/types/src/commerceSettings.ts

@@ -4,12 +4,17 @@ import type { ClerkResourceJSON } from './json';
 import type { ClerkResource } from './resource';
 
 export interface __experimental_CommerceSettingsJSON extends ClerkResourceJSON {
-  enabled: boolean;
-  stripe_publishable_key: string;
+  billing: {
+    enabled: boolean;
+    stripe_publishable_key: string;
+  };
 }
 
 export interface __experimental_CommerceSettingsResource extends ClerkResource {
-  enabled: boolean;
-  stripePublishableKey: string;
+  billing: {
+    enabled: boolean;
+    stripePublishableKey: string;
+  };
+
   __internal_toSnapshot: () => __experimental_CommerceSettingsJSONSnapshot;
 }