chore(clerk-js, shared): Expose useCheckout as experimental (#6195)

Author: panteliselef

.changeset/every-buttons-travel.md

@@ -0,0 +1,10 @@
+---
+'@clerk/tanstack-react-start': minor
+'@clerk/react-router': minor
+'@clerk/nextjs': minor
+'@clerk/shared': minor
+'@clerk/clerk-react': minor
+'@clerk/remix': minor
+---
+
+[Billing Beta]: Introduce experimental `useCheckout()` hook and `<CheckoutProvider/>`.

.changeset/great-roses-punch.md

@@ -0,0 +1,7 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+[Billing Beta]: Introduce experimental `Clerk.__experimental_checkout()` for managing the state of a checkout session.

.changeset/stale-pillows-sneeze.md

@@ -0,0 +1,9 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/nextjs': minor
+'@clerk/shared': minor
+'@clerk/clerk-react': minor
+'@clerk/types': minor
+---
+
+wip

packages/clerk-js/bundlewatch.config.json

@@ -1,11 +1,11 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "612kB" },
+    { "path": "./dist/clerk.js", "maxSize": "612.37kB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "72.2KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "111.9KB" },
-    { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "113.67KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "110KB" },
+    { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "113.72KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },

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

@@ -15,6 +15,8 @@ import {
 import { addClerkPrefix, isAbsoluteUrl, stripScheme } from '@clerk/shared/url';
 import { allSettled, handleValueOrFn, noop } from '@clerk/shared/utils';
 import type {
+  __experimental_CheckoutInstance,
+  __experimental_CheckoutOptions,
   __internal_CheckoutProps,
   __internal_ComponentNavigationContext,
   __internal_OAuthConsentProps,
@@ -137,6 +139,7 @@ import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
 import { createClientFromJwt } from './jwt-client';
 import { APIKeys } from './modules/apiKeys';
+import { createCheckoutInstance } from './modules/checkout/instance';
 import { CommerceBilling } from './modules/commerce';
 import {
   BaseResource,
@@ -197,6 +200,7 @@ export class Clerk implements ClerkInterface {
   };
   private static _billing: CommerceBillingNamespace;
   private static _apiKeys: APIKeysNamespace;
+  private _checkout: ClerkInterface['__experimental_checkout'] | undefined;
 
   public client: ClientResource | undefined;
   public session: SignedInSessionResource | null | undefined;
@@ -339,6 +343,13 @@ export class Clerk implements ClerkInterface {
     return Clerk._apiKeys;
   }
 
+  __experimental_checkout(options: __experimental_CheckoutOptions): __experimental_CheckoutInstance {
+    if (!this._checkout) {
+      this._checkout = params => createCheckoutInstance(this, params);
+    }
+    return this._checkout(options);
+  }
+
   public __internal_getOption<K extends keyof ClerkOptions>(key: K): ClerkOptions[K] {
     return this.#options[key];
   }