diff --git a/.changeset/every-buttons-travel.md b/.changeset/every-buttons-travel.md
new file mode 100644
index 00000000000..4b89a19b70b
--- /dev/null
+++ b/.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/>`.
diff --git a/.changeset/great-roses-punch.md b/.changeset/great-roses-punch.md
new file mode 100644
index 00000000000..2943a8420c5
--- /dev/null
+++ b/.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.
diff --git a/.changeset/stale-pillows-sneeze.md b/.changeset/stale-pillows-sneeze.md
new file mode 100644
index 00000000000..7640b43579e
--- /dev/null
+++ b/.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
diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index 3a0c7d1afee..6ef84ec3abc 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/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" },
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 763f1f78ec5..80a87e2a838 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/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];
   }
diff --git a/packages/clerk-js/src/core/modules/checkout/__tests__/manager.spec.ts b/packages/clerk-js/src/core/modules/checkout/__tests__/manager.spec.ts
new file mode 100644
index 00000000000..d9b2bd13aa9
--- /dev/null
+++ b/packages/clerk-js/src/core/modules/checkout/__tests__/manager.spec.ts
@@ -0,0 +1,695 @@
+import type { ClerkAPIResponseError, CommerceCheckoutResource } from '@clerk/types';
+import type { MockedFunction } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { type CheckoutCacheState, type CheckoutKey, createCheckoutManager, FETCH_STATUS } from '../manager';
+
+// Type-safe mock for CommerceCheckoutResource
+const createMockCheckoutResource = (overrides: Partial<CommerceCheckoutResource> = {}): CommerceCheckoutResource => ({
+  id: 'checkout_123',
+  status: 'pending',
+  externalClientSecret: 'cs_test_123',
+  externalGatewayId: 'gateway_123',
+  statement_id: 'stmt_123',
+  totals: {
+    totalDueNow: { amount: 1000, currency: 'USD', currencySymbol: '$', amountFormatted: '10.00' },
+    credit: { amount: 0, currency: 'USD', currencySymbol: '$', amountFormatted: '0.00' },
+    pastDue: { amount: 0, currency: 'USD', currencySymbol: '$', amountFormatted: '0.00' },
+    subtotal: { amount: 1000, currency: 'USD', currencySymbol: '$', amountFormatted: '10.00' },
+    grandTotal: { amount: 1000, currency: 'USD', currencySymbol: '$', amountFormatted: '10.00' },
+    taxTotal: { amount: 0, currency: 'USD', currencySymbol: '$', amountFormatted: '0.00' },
+  },
+  isImmediatePlanChange: false,
+  planPeriod: 'month',
+  plan: {
+    id: 'plan_123',
+    name: 'Pro Plan',
+    description: 'Professional plan',
+    features: [],
+    amount: 1000,
+    amountFormatted: '10.00',
+    annualAmount: 12000,
+    annualAmountFormatted: '120.00',
+    currency: 'USD',
+    currencySymbol: '$',
+    slug: 'pro-plan',
+  },
+  paymentSource: undefined,
+  confirm: vi.fn(),
+  reload: vi.fn(),
+  pathRoot: '/checkout',
+  ...overrides,
+});
+
+// Type-safe mock for ClerkAPIResponseError
+const createMockError = (message = 'Test error'): ClerkAPIResponseError => {
+  const error = new Error(message) as ClerkAPIResponseError;
+  error.status = 400;
+  error.clerkTraceId = 'trace_123';
+  error.clerkError = true;
+  return error;
+};
+
+// Helper to create a typed cache key
+const createCacheKey = (key: string): CheckoutKey => key as CheckoutKey;
+
+describe('createCheckoutManager', () => {
+  const testCacheKey = createCacheKey('user-123-plan-456-monthly');
+  let manager: ReturnType<typeof createCheckoutManager>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    manager = createCheckoutManager(testCacheKey);
+  });
+
+  describe('getCacheState', () => {
+    it('should return default state when cache is empty', () => {
+      const state = manager.getCacheState();
+
+      expect(state).toEqual({
+        isStarting: false,
+        isConfirming: false,
+        error: null,
+        checkout: null,
+        fetchStatus: 'idle',
+        status: 'awaiting_initialization',
+      });
+    });
+
+    it('should return immutable state object', () => {
+      const state = manager.getCacheState();
+
+      // State should be frozen
+      expect(Object.isFrozen(state)).toBe(true);
+    });
+  });
+
+  describe('subscribe', () => {
+    it('should add listener and return unsubscribe function', () => {
+      const listener: MockedFunction<(state: CheckoutCacheState) => void> = vi.fn();
+
+      const unsubscribe = manager.subscribe(listener);
+
+      expect(typeof unsubscribe).toBe('function');
+      expect(listener).not.toHaveBeenCalled();
+    });
+
+    it('should remove listener when unsubscribe is called', async () => {
+      const listener: MockedFunction<(state: CheckoutCacheState) => void> = vi.fn();
+
+      const unsubscribe = manager.subscribe(listener);
+
+      // Trigger a state change
+      const mockCheckout = createMockCheckoutResource();
+      const mockOperation = vi.fn().mockResolvedValue(mockCheckout);
+      await manager.executeOperation('start', mockOperation);
+
+      expect(listener).toHaveBeenCalled();
+
+      // Clear the mock and unsubscribe
+      listener.mockClear();
+      unsubscribe();
+
+      // Trigger another state change
+      const anotherMockOperation = vi.fn().mockResolvedValue(mockCheckout);
+      await manager.executeOperation('confirm', anotherMockOperation);
+
+      // Listener should not be called after unsubscribing
+      expect(listener).not.toHaveBeenCalled();
+    });
+
+    it('should notify all listeners when state changes', async () => {
+      const listener1: MockedFunction<(state: CheckoutCacheState) => void> = vi.fn();
+      const listener2: MockedFunction<(state: CheckoutCacheState) => void> = vi.fn();
+      const mockCheckout = createMockCheckoutResource();
+
+      manager.subscribe(listener1);
+      manager.subscribe(listener2);
+
+      const mockOperation = vi.fn().mockResolvedValue(mockCheckout);
+      await manager.executeOperation('start', mockOperation);
+
+      expect(listener1).toHaveBeenCalled();
+      expect(listener2).toHaveBeenCalled();
+
+      // Verify they were called with the updated state
+      const expectedState = expect.objectContaining({
+        checkout: mockCheckout,
+        isStarting: false,
+        error: null,
+        fetchStatus: 'idle',
+        status: 'awaiting_confirmation',
+      });
+
+      expect(listener1).toHaveBeenCalledWith(expectedState);
+      expect(listener2).toHaveBeenCalledWith(expectedState);
+    });
+
+    it('should handle multiple subscribe/unsubscribe cycles', () => {
+      const listener: MockedFunction<(state: CheckoutCacheState) => void> = vi.fn();
+
+      // Subscribe and unsubscribe multiple times
+      const unsubscribe1 = manager.subscribe(listener);
+      unsubscribe1();
+
+      const unsubscribe2 = manager.subscribe(listener);
+      const unsubscribe3 = manager.subscribe(listener);
+
+      unsubscribe2();
+      unsubscribe3();
+
+      // Should not throw errors
+      expect(() => unsubscribe1()).not.toThrow();
+      expect(() => unsubscribe2()).not.toThrow();
+    });
+  });
+
+  describe('executeOperation - start operations', () => {
+    it('should execute start operation successfully', async () => {
+      const mockCheckout = createMockCheckoutResource();
+      const mockOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockResolvedValue(mockCheckout);
+
+      const result = await manager.executeOperation('start', mockOperation);
+
+      expect(mockOperation).toHaveBeenCalledOnce();
+      expect(result).toEqual({
+        data: mockCheckout,
+        error: null,
+      });
+
+      const finalState = manager.getCacheState();
+      expect(finalState).toEqual(
+        expect.objectContaining({
+          isStarting: false,
+          checkout: mockCheckout,
+          error: null,
+          fetchStatus: 'idle',
+          status: 'awaiting_confirmation',
+        }),
+      );
+    });
+
+    it('should set isStarting to true during operation', async () => {
+      let capturedState: CheckoutCacheState | null = null;
+      const mockOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockImplementation(async () => {
+          // Capture state while operation is running
+          capturedState = manager.getCacheState();
+          return createMockCheckoutResource();
+        });
+
+      await manager.executeOperation('start', mockOperation);
+
+      expect(capturedState).toEqual(
+        expect.objectContaining({
+          isStarting: true,
+          fetchStatus: 'fetching',
+        }),
+      );
+    });
+
+    it('should handle operation errors correctly', async () => {
+      const mockError = createMockError('Operation failed');
+      const mockOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockRejectedValue(mockError);
+
+      const result = await manager.executeOperation('start', mockOperation);
+
+      expect(result).toEqual({
+        data: null,
+        error: mockError,
+      });
+
+      const finalState = manager.getCacheState();
+      expect(finalState).toEqual(
+        expect.objectContaining({
+          isStarting: false,
+          error: mockError,
+          fetchStatus: 'error',
+          status: 'awaiting_initialization',
+        }),
+      );
+    });
+
+    it('should clear previous errors when starting new operation', async () => {
+      // First, create an error state
+      const mockError = createMockError('Previous error');
+      const failingOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockRejectedValue(mockError);
+
+      const result = await manager.executeOperation('start', failingOperation);
+      expect(result).toEqual({
+        data: null,
+        error: mockError,
+      });
+
+      const errorState = manager.getCacheState();
+      expect(errorState.error).toBe(mockError);
+
+      // Now start a successful operation
+      const mockCheckout = createMockCheckoutResource();
+      const successfulOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockResolvedValue(mockCheckout);
+
+      const successResult = await manager.executeOperation('start', successfulOperation);
+      expect(successResult).toEqual({
+        data: mockCheckout,
+        error: null,
+      });
+
+      const finalState = manager.getCacheState();
+      expect(finalState.error).toBeNull();
+      expect(finalState.checkout).toBe(mockCheckout);
+    });
+  });
+
+  describe('executeOperation - confirm operations', () => {
+    it('should execute confirm operation successfully', async () => {
+      const mockCheckout = createMockCheckoutResource({ status: 'completed' });
+      const mockOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockResolvedValue(mockCheckout);
+
+      const result = await manager.executeOperation('confirm', mockOperation);
+
+      expect(result).toEqual({
+        data: mockCheckout,
+        error: null,
+      });
+
+      const finalState = manager.getCacheState();
+      expect(finalState).toEqual(
+        expect.objectContaining({
+          isConfirming: false,
+          checkout: mockCheckout,
+          error: null,
+          fetchStatus: 'idle',
+          status: 'completed',
+        }),
+      );
+    });
+
+    it('should set isConfirming to true during operation', async () => {
+      let capturedState: CheckoutCacheState | null = null;
+      const mockOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockImplementation(async () => {
+          capturedState = manager.getCacheState();
+          return createMockCheckoutResource();
+        });
+
+      await manager.executeOperation('confirm', mockOperation);
+
+      expect(capturedState).toEqual(
+        expect.objectContaining({
+          isConfirming: true,
+          fetchStatus: 'fetching',
+        }),
+      );
+    });
+
+    it('should handle confirm operation errors', async () => {
+      const mockError = createMockError('Confirm failed');
+      const mockOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockRejectedValue(mockError);
+
+      const result = await manager.executeOperation('confirm', mockOperation);
+      expect(result).toEqual({
+        data: null,
+        error: mockError,
+      });
+
+      const finalState = manager.getCacheState();
+      expect(finalState).toEqual(
+        expect.objectContaining({
+          isConfirming: false,
+          error: mockError,
+          fetchStatus: 'error',
+        }),
+      );
+    });
+  });
+
+  describe('operation deduplication', () => {
+    it('should deduplicate concurrent start operations', async () => {
+      const mockCheckout = createMockCheckoutResource();
+      const mockOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockImplementation(() => new Promise(resolve => setTimeout(() => resolve(mockCheckout), 50)));
+
+      // Start multiple operations concurrently
+      const [result1, result2, result3] = await Promise.all([
+        manager.executeOperation('start', mockOperation),
+        manager.executeOperation('start', mockOperation),
+        manager.executeOperation('start', mockOperation),
+      ]);
+
+      // Operation should only be called once
+      expect(mockOperation).toHaveBeenCalledOnce();
+
+      // All results should be the same
+      expect(result1).toEqual({
+        data: mockCheckout,
+        error: null,
+      });
+      expect(result2).toEqual({
+        data: mockCheckout,
+        error: null,
+      });
+      expect(result3).toEqual({
+        data: mockCheckout,
+        error: null,
+      });
+    });
+
+    it('should deduplicate concurrent confirm operations', async () => {
+      const mockCheckout = createMockCheckoutResource();
+      const mockOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockImplementation(() => new Promise(resolve => setTimeout(() => resolve(mockCheckout), 50)));
+
+      const [result1, result2] = await Promise.all([
+        manager.executeOperation('confirm', mockOperation),
+        manager.executeOperation('confirm', mockOperation),
+      ]);
+
+      expect(mockOperation).toHaveBeenCalledOnce();
+      expect(result1).toBe(result2);
+    });
+
+    it('should allow different operation types to run concurrently', async () => {
+      const startCheckout = createMockCheckoutResource({ id: 'start_checkout' });
+      const confirmCheckout = createMockCheckoutResource({ id: 'confirm_checkout' });
+
+      const startOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockImplementation(() => new Promise(resolve => setTimeout(() => resolve(startCheckout), 50)));
+      const confirmOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockImplementation(() => new Promise(resolve => setTimeout(() => resolve(confirmCheckout), 50)));
+
+      const [startResult, confirmResult] = await Promise.all([
+        manager.executeOperation('start', startOperation),
+        manager.executeOperation('confirm', confirmOperation),
+      ]);
+
+      expect(startOperation).toHaveBeenCalledOnce();
+      expect(confirmOperation).toHaveBeenCalledOnce();
+      expect(startResult).toEqual({
+        data: startCheckout,
+        error: null,
+      });
+      expect(confirmResult).toEqual({
+        data: confirmCheckout,
+        error: null,
+      });
+    });
+
+    it('should propagate errors to all concurrent callers', async () => {
+      const mockError = createMockError('Concurrent operation failed');
+      const mockOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockImplementation(() => new Promise((_, reject) => setTimeout(() => reject(mockError), 50)));
+
+      const promises = [
+        manager.executeOperation('start', mockOperation),
+        manager.executeOperation('start', mockOperation),
+        manager.executeOperation('start', mockOperation),
+      ];
+
+      const results = await Promise.all(promises);
+
+      // All promises should resolve with the same error
+      results.forEach(result => {
+        expect(result).toEqual({
+          data: null,
+          error: mockError,
+        });
+      });
+      expect(mockOperation).toHaveBeenCalledOnce();
+    });
+
+    it('should allow sequential operations of the same type', async () => {
+      const checkout1 = createMockCheckoutResource({ id: 'checkout1' });
+      const checkout2 = createMockCheckoutResource({ id: 'checkout2' });
+
+      const operation1: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi.fn().mockResolvedValue(checkout1);
+      const operation2: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi.fn().mockResolvedValue(checkout2);
+
+      const result1 = await manager.executeOperation('start', operation1);
+      const result2 = await manager.executeOperation('start', operation2);
+
+      expect(operation1).toHaveBeenCalledOnce();
+      expect(operation2).toHaveBeenCalledOnce();
+      expect(result1).toEqual({
+        data: checkout1,
+        error: null,
+      });
+      expect(result2).toEqual({
+        data: checkout2,
+        error: null,
+      });
+    });
+  });
+
+  describe('clearCheckout', () => {
+    it('should clear checkout state when no operations are pending', () => {
+      const listener: MockedFunction<(state: CheckoutCacheState) => void> = vi.fn();
+      manager.subscribe(listener);
+
+      manager.clearCheckout();
+
+      const state = manager.getCacheState();
+      expect(state).toEqual({
+        isStarting: false,
+        isConfirming: false,
+        error: null,
+        checkout: null,
+        fetchStatus: 'idle',
+        status: 'awaiting_initialization',
+      });
+
+      // Should notify listeners
+      expect(listener).toHaveBeenCalledWith(state);
+    });
+
+    it('should not clear checkout state when operations are pending', async () => {
+      const mockCheckout = createMockCheckoutResource();
+      let resolveOperation: ((value: CommerceCheckoutResource) => void) | undefined;
+
+      const mockOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi.fn().mockImplementation(
+        () =>
+          new Promise<CommerceCheckoutResource>(resolve => {
+            resolveOperation = resolve;
+          }),
+      );
+
+      // Start an operation but don't resolve it yet
+      const operationPromise = manager.executeOperation('start', mockOperation);
+
+      // Verify operation is in progress
+      let state = manager.getCacheState();
+      expect(state.isStarting).toBe(true);
+      expect(state.fetchStatus).toBe('fetching');
+
+      // Try to clear while operation is pending
+      manager.clearCheckout();
+
+      // State should not be cleared
+      state = manager.getCacheState();
+      expect(state.isStarting).toBe(true);
+      expect(state.fetchStatus).toBe('fetching');
+
+      // Resolve the operation
+      resolveOperation?.(mockCheckout);
+      await operationPromise;
+
+      // Now clearing should work
+      manager.clearCheckout();
+      state = manager.getCacheState();
+      expect(state.checkout).toBeNull();
+      expect(state.status).toBe('awaiting_initialization');
+    });
+  });
+
+  describe('state derivation', () => {
+    it('should derive fetchStatus correctly based on operation state', async () => {
+      // Initially idle
+      expect(manager.getCacheState().fetchStatus).toBe(FETCH_STATUS.IDLE);
+
+      // During operation - fetching
+      let capturedState: CheckoutCacheState | null = null;
+      const mockOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockImplementation(async () => {
+          capturedState = manager.getCacheState();
+          return createMockCheckoutResource();
+        });
+
+      await manager.executeOperation('start', mockOperation);
+      expect(capturedState?.fetchStatus).toBe(FETCH_STATUS.FETCHING);
+
+      // After successful operation - idle
+      expect(manager.getCacheState().fetchStatus).toBe(FETCH_STATUS.IDLE);
+
+      // After error - error
+      const mockError = createMockError();
+      const failingOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockRejectedValue(mockError);
+
+      const result = await manager.executeOperation('start', failingOperation);
+      expect(result).toEqual({
+        data: null,
+        error: mockError,
+      });
+      expect(manager.getCacheState().fetchStatus).toBe(FETCH_STATUS.ERROR);
+    });
+
+    it('should derive status based on checkout state', async () => {
+      // Initially awaiting initialization
+      expect(manager.getCacheState().status).toBe('awaiting_initialization');
+
+      // After starting checkout - awaiting confirmation
+      const pendingCheckout = createMockCheckoutResource({ status: 'pending' });
+      const startOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockResolvedValue(pendingCheckout);
+
+      await manager.executeOperation('start', startOperation);
+      expect(manager.getCacheState().status).toBe('awaiting_confirmation');
+
+      // After completing checkout - completed
+      const completedCheckout = createMockCheckoutResource({ status: 'completed' });
+      const confirmOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockResolvedValue(completedCheckout);
+
+      await manager.executeOperation('confirm', confirmOperation);
+      expect(manager.getCacheState().status).toBe('completed');
+    });
+
+    it('should handle both operations running simultaneously', async () => {
+      let startCapturedState: CheckoutCacheState | null = null;
+      let confirmCapturedState: CheckoutCacheState | null = null;
+
+      const startOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockImplementation(async () => {
+          await new Promise(resolve => setTimeout(resolve, 30));
+          startCapturedState = manager.getCacheState();
+          return createMockCheckoutResource({ id: 'start' });
+        });
+
+      const confirmOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockImplementation(async () => {
+          await new Promise(resolve => setTimeout(resolve, 20));
+          confirmCapturedState = manager.getCacheState();
+          return createMockCheckoutResource({ id: 'confirm' });
+        });
+
+      await Promise.all([
+        manager.executeOperation('start', startOperation),
+        manager.executeOperation('confirm', confirmOperation),
+      ]);
+
+      // Both should have seen fetching status
+      expect(startCapturedState?.fetchStatus).toBe(FETCH_STATUS.FETCHING);
+      expect(confirmCapturedState?.fetchStatus).toBe(FETCH_STATUS.FETCHING);
+
+      // At least one should have seen both operations running
+      expect(
+        (startCapturedState?.isStarting && startCapturedState?.isConfirming) ||
+          (confirmCapturedState?.isStarting && confirmCapturedState?.isConfirming),
+      ).toBe(true);
+    });
+  });
+
+  describe('cache isolation', () => {
+    it('should isolate state between different cache keys', async () => {
+      const manager1 = createCheckoutManager(createCacheKey('key1'));
+      const manager2 = createCheckoutManager(createCacheKey('key2'));
+
+      const checkout1 = createMockCheckoutResource({ id: 'checkout1' });
+      const checkout2 = createMockCheckoutResource({ id: 'checkout2' });
+
+      const operation1: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi.fn().mockResolvedValue(checkout1);
+      const operation2: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi.fn().mockResolvedValue(checkout2);
+
+      await manager1.executeOperation('start', operation1);
+      await manager2.executeOperation('confirm', operation2);
+
+      const state1 = manager1.getCacheState();
+      const state2 = manager2.getCacheState();
+
+      expect(state1.checkout?.id).toBe('checkout1');
+      expect(state1.status).toBe('awaiting_confirmation');
+
+      expect(state2.checkout?.id).toBe('checkout2');
+      expect(state2.isStarting).toBe(false);
+      expect(state2.isConfirming).toBe(false);
+    });
+
+    it('should isolate listeners between different cache keys', async () => {
+      const manager1 = createCheckoutManager(createCacheKey('key1'));
+      const manager2 = createCheckoutManager(createCacheKey('key2'));
+
+      const listener1: MockedFunction<(state: CheckoutCacheState) => void> = vi.fn();
+      const listener2: MockedFunction<(state: CheckoutCacheState) => void> = vi.fn();
+
+      manager1.subscribe(listener1);
+      manager2.subscribe(listener2);
+
+      // Trigger operation on manager1
+      const mockOperation: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockResolvedValue(createMockCheckoutResource());
+      await manager1.executeOperation('start', mockOperation);
+
+      // Only listener1 should be called
+      expect(listener1).toHaveBeenCalled();
+      expect(listener2).not.toHaveBeenCalled();
+    });
+
+    it('should isolate pending operations between different cache keys', async () => {
+      const manager1 = createCheckoutManager(createCacheKey('key1'));
+      const manager2 = createCheckoutManager(createCacheKey('key2'));
+
+      const checkout1 = createMockCheckoutResource({ id: 'checkout1' });
+      const checkout2 = createMockCheckoutResource({ id: 'checkout2' });
+
+      const operation1: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockImplementation(() => new Promise(resolve => setTimeout(() => resolve(checkout1), 50)));
+      const operation2: MockedFunction<() => Promise<CommerceCheckoutResource>> = vi
+        .fn()
+        .mockImplementation(() => new Promise(resolve => setTimeout(() => resolve(checkout2), 50)));
+
+      // Start concurrent operations on both managers
+      const [result1, result2] = await Promise.all([
+        manager1.executeOperation('start', operation1),
+        manager2.executeOperation('start', operation2),
+      ]);
+
+      // Both operations should execute (not deduplicated across managers)
+      expect(operation1).toHaveBeenCalledOnce();
+      expect(operation2).toHaveBeenCalledOnce();
+      expect(result1).toEqual({
+        data: checkout1,
+        error: null,
+      });
+      expect(result2).toEqual({
+        data: checkout2,
+        error: null,
+      });
+    });
+  });
+});
diff --git a/packages/clerk-js/src/core/modules/checkout/instance.ts b/packages/clerk-js/src/core/modules/checkout/instance.ts
new file mode 100644
index 00000000000..7ada04d355b
--- /dev/null
+++ b/packages/clerk-js/src/core/modules/checkout/instance.ts
@@ -0,0 +1,86 @@
+import type {
+  __experimental_CheckoutCacheState,
+  __experimental_CheckoutInstance,
+  __experimental_CheckoutOptions,
+} from '@clerk/types';
+
+import type { Clerk } from '../../clerk';
+import { type CheckoutKey, createCheckoutManager } from './manager';
+
+/**
+ * Generate cache key for checkout instance
+ */
+function cacheKey(options: { userId: string; orgId?: string; planId: string; planPeriod: string }): CheckoutKey {
+  const { userId, orgId, planId, planPeriod } = options;
+  return `${userId}-${orgId || 'user'}-${planId}-${planPeriod}` as CheckoutKey;
+}
+
+/**
+ * Create a checkout instance with the given options
+ */
+function createCheckoutInstance(
+  clerk: Clerk,
+  options: __experimental_CheckoutOptions,
+): __experimental_CheckoutInstance {
+  const { for: forOrganization, planId, planPeriod } = options;
+
+  if (!clerk.user) {
+    throw new Error('Clerk: User is not authenticated');
+  }
+
+  if (forOrganization === 'organization' && !clerk.organization) {
+    throw new Error('Clerk: Use `setActive` to set the organization');
+  }
+
+  const checkoutKey = cacheKey({
+    userId: clerk.user.id,
+    orgId: forOrganization === 'organization' ? clerk.organization?.id : undefined,
+    planId,
+    planPeriod,
+  });
+
+  const manager = createCheckoutManager(checkoutKey);
+
+  const start: __experimental_CheckoutInstance['start'] = async () => {
+    return manager.executeOperation('start', async () => {
+      const result = await clerk.billing?.startCheckout({
+        ...(forOrganization === 'organization' ? { orgId: clerk.organization?.id } : {}),
+        planId,
+        planPeriod,
+      });
+      return result;
+    });
+  };
+
+  const confirm: __experimental_CheckoutInstance['confirm'] = async params => {
+    return manager.executeOperation('confirm', async () => {
+      const checkout = manager.getCacheState().checkout;
+      if (!checkout) {
+        throw new Error('Clerk: Call `start` before `confirm`');
+      }
+      return checkout.confirm(params);
+    });
+  };
+
+  const finalize = (params?: { redirectUrl: string }) => {
+    const { redirectUrl } = params || {};
+    void clerk.setActive({ session: clerk.session?.id, redirectUrl });
+  };
+
+  const clear = () => manager.clearCheckout();
+
+  const subscribe = (listener: (state: __experimental_CheckoutCacheState) => void) => {
+    return manager.subscribe(listener);
+  };
+
+  return {
+    start,
+    confirm,
+    finalize,
+    clear,
+    subscribe,
+    getState: manager.getCacheState,
+  };
+}
+
+export { createCheckoutInstance };
diff --git a/packages/clerk-js/src/core/modules/checkout/manager.ts b/packages/clerk-js/src/core/modules/checkout/manager.ts
new file mode 100644
index 00000000000..c49a504567a
--- /dev/null
+++ b/packages/clerk-js/src/core/modules/checkout/manager.ts
@@ -0,0 +1,187 @@
+import type {
+  __experimental_CheckoutCacheState,
+  __experimental_CheckoutInstance,
+  ClerkAPIResponseError,
+  CommerceCheckoutResource,
+} from '@clerk/types';
+
+type CheckoutKey = string & { readonly __tag: 'CheckoutKey' };
+
+type CheckoutResult = Awaited<ReturnType<__experimental_CheckoutInstance['start']>>;
+
+const createManagerCache = <CacheKey, CacheState>() => {
+  const cache = new Map<CacheKey, CacheState>();
+  const listeners = new Map<CacheKey, Set<(newState: CacheState) => void>>();
+  const pendingOperations = new Map<CacheKey, Map<string, Promise<CheckoutResult>>>();
+
+  return {
+    cache,
+    listeners,
+    pendingOperations,
+    safeGet<K extends CacheKey, V extends Set<any>>(key: K, map: Map<K, V>): NonNullable<V> {
+      if (!map.has(key)) {
+        map.set(key, new Set() as V);
+      }
+      return map.get(key) as NonNullable<V>;
+    },
+    safeGetOperations<K extends CacheKey>(key: K): Map<string, Promise<CheckoutResult>> {
+      if (!this.pendingOperations.has(key)) {
+        this.pendingOperations.set(key, new Map<string, Promise<CheckoutResult>>());
+      }
+      return this.pendingOperations.get(key) as Map<string, Promise<CheckoutResult>>;
+    },
+  };
+};
+
+const managerCache = createManagerCache<CheckoutKey, __experimental_CheckoutCacheState>();
+
+const CHECKOUT_STATUS = {
+  AWAITING_INITIALIZATION: 'awaiting_initialization',
+  AWAITING_CONFIRMATION: 'awaiting_confirmation',
+  COMPLETED: 'completed',
+} as const;
+
+export const FETCH_STATUS = {
+  IDLE: 'idle',
+  FETCHING: 'fetching',
+  ERROR: 'error',
+} as const;
+
+/**
+ * Derives the checkout state from the base state.
+ */
+function deriveCheckoutState(
+  baseState: Omit<__experimental_CheckoutCacheState, 'fetchStatus' | 'status'>,
+): __experimental_CheckoutCacheState {
+  const fetchStatus = (() => {
+    if (baseState.isStarting || baseState.isConfirming) return FETCH_STATUS.FETCHING;
+    if (baseState.error) return FETCH_STATUS.ERROR;
+    return FETCH_STATUS.IDLE;
+  })();
+
+  const status = (() => {
+    if (baseState.checkout?.status === CHECKOUT_STATUS.COMPLETED) return CHECKOUT_STATUS.COMPLETED;
+    if (baseState.checkout) return CHECKOUT_STATUS.AWAITING_CONFIRMATION;
+    return CHECKOUT_STATUS.AWAITING_INITIALIZATION;
+  })();
+
+  return {
+    ...baseState,
+    fetchStatus,
+    status,
+  };
+}
+
+const defaultCacheState: __experimental_CheckoutCacheState = Object.freeze(
+  deriveCheckoutState({
+    isStarting: false,
+    isConfirming: false,
+    error: null,
+    checkout: null,
+  }),
+);
+
+/**
+ * Creates a checkout manager for handling checkout operations and state management.
+ *
+ * @param cacheKey - Unique identifier for the checkout instance
+ * @returns Manager with methods for checkout operations and state subscription
+ *
+ * @example
+ * ```typescript
+ * const manager = createCheckoutManager('user-123-plan-456-monthly');
+ * const unsubscribe = manager.subscribe(state => console.log(state));
+ * ```
+ */
+function createCheckoutManager(cacheKey: CheckoutKey) {
+  const listeners = managerCache.safeGet(cacheKey, managerCache.listeners);
+  const pendingOperations = managerCache.safeGetOperations(cacheKey);
+
+  const notifyListeners = () => {
+    listeners.forEach(listener => listener(getCacheState()));
+  };
+
+  const getCacheState = (): __experimental_CheckoutCacheState => {
+    return managerCache.cache.get(cacheKey) || defaultCacheState;
+  };
+
+  const updateCacheState = (
+    updates: Partial<Omit<__experimental_CheckoutCacheState, 'fetchStatus' | 'status'>>,
+  ): void => {
+    const currentState = getCacheState();
+    const baseState = { ...currentState, ...updates };
+    const newState = deriveCheckoutState(baseState);
+    managerCache.cache.set(cacheKey, Object.freeze(newState));
+    notifyListeners();
+  };
+
+  return {
+    subscribe(listener: (newState: __experimental_CheckoutCacheState) => void): () => void {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+
+    getCacheState,
+
+    // Shared operation handler to eliminate duplication
+    async executeOperation(
+      operationType: 'start' | 'confirm',
+      operationFn: () => Promise<CommerceCheckoutResource>,
+    ): Promise<CheckoutResult> {
+      const operationId = `${cacheKey}-${operationType}`;
+      const isRunningField = operationType === 'start' ? 'isStarting' : 'isConfirming';
+
+      // Check if there's already a pending operation
+      const existingOperation = pendingOperations.get(operationId);
+      if (existingOperation) {
+        // Wait for the existing operation to complete and return its result
+        // If it fails, all callers should receive the same error
+        return await existingOperation;
+      }
+
+      // Create and store the operation promise
+      const operationPromise = (async () => {
+        let data: CommerceCheckoutResource | null = null;
+        let error: ClerkAPIResponseError | null = null;
+        try {
+          // Mark operation as in progress and clear any previous errors
+          updateCacheState({
+            [isRunningField]: true,
+            error: null,
+            ...(operationType === 'start' ? { checkout: null } : {}),
+          });
+
+          // Execute the checkout operation
+          const result = await operationFn();
+
+          // Update state with successful result
+          updateCacheState({ [isRunningField]: false, error: null, checkout: result });
+          data = result;
+        } catch (e) {
+          // Cast error to expected type and update state
+          const clerkError = e as ClerkAPIResponseError;
+          error = clerkError;
+          updateCacheState({ [isRunningField]: false, error: clerkError });
+        } finally {
+          // Always clean up pending operation tracker
+          pendingOperations.delete(operationId);
+        }
+        return { data, error } as CheckoutResult;
+      })();
+
+      pendingOperations.set(operationId, operationPromise);
+      return operationPromise;
+    },
+
+    clearCheckout(): void {
+      // Only reset the state if there are no pending operations
+      if (pendingOperations.size === 0) {
+        updateCacheState(defaultCacheState);
+      }
+    },
+  };
+}
+
+export { createCheckoutManager, type CheckoutKey };
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
index 6b5dad5fd62..4240e528ca5 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
@@ -1,3 +1,4 @@
+import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';
 import { useEffect, useId, useRef, useState } from 'react';
 
 import { Drawer, useDrawerContext } from '@/ui/elements/Drawer';
@@ -9,7 +10,6 @@ import { Box, Button, descriptors, Heading, localizationKeys, Span, Text, useApp
 import { transitionDurationValues, transitionTiming } from '../../foundations/transitions';
 import { usePrefersReducedMotion } from '../../hooks';
 import { useRouter } from '../../router';
-import { useCheckoutContextRoot } from './CheckoutPage';
 
 const capitalize = (name: string) => name[0].toUpperCase() + name.slice(1);
 const lerp = (start: number, end: number, amt: number) => start + (end - start) * amt;
@@ -18,7 +18,8 @@ export const CheckoutComplete = () => {
   const router = useRouter();
   const { setIsOpen } = useDrawerContext();
   const { newSubscriptionRedirectUrl } = useCheckoutContext();
-  const { checkout } = useCheckoutContextRoot();
+  const { checkout } = useCheckout();
+  const { totals, paymentSource, planPeriodStart } = checkout;
   const [mousePosition, setMousePosition] = useState({ x: 256, y: 256 });
   const [currentPosition, setCurrentPosition] = useState({ x: 256, y: 256 });
 
@@ -82,7 +83,7 @@ export const CheckoutComplete = () => {
     }
   };
 
-  if (!checkout) {
+  if (!totals) {
     return null;
   }
 
@@ -309,7 +310,7 @@ export const CheckoutComplete = () => {
               as='h2'
               textVariant='h2'
               localizationKey={
-                checkout.totals.totalDueNow.amount > 0
+                totals.totalDueNow.amount > 0
                   ? localizationKeys('commerce.checkout.title__paymentSuccessful')
                   : localizationKeys('commerce.checkout.title__subscriptionSuccessful')
               }
@@ -364,7 +365,7 @@ export const CheckoutComplete = () => {
                 }),
               })}
               localizationKey={
-                checkout.totals.totalDueNow.amount > 0
+                totals.totalDueNow.amount > 0
                   ? localizationKeys('commerce.checkout.description__paymentSuccessful')
                   : localizationKeys('commerce.checkout.description__subscriptionSuccessful')
               }
@@ -396,28 +397,26 @@ export const CheckoutComplete = () => {
         <LineItems.Root>
           <LineItems.Group variant='secondary'>
             <LineItems.Title title={localizationKeys('commerce.checkout.lineItems.title__totalPaid')} />
-            <LineItems.Description
-              text={`${checkout.totals.totalDueNow.currencySymbol}${checkout.totals.totalDueNow.amountFormatted}`}
-            />
+            <LineItems.Description text={`${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`} />
           </LineItems.Group>
           <LineItems.Group variant='secondary'>
             <LineItems.Title
               title={
-                checkout.totals.totalDueNow.amount > 0
+                totals.totalDueNow.amount > 0
                   ? localizationKeys('commerce.checkout.lineItems.title__paymentMethod')
                   : localizationKeys('commerce.checkout.lineItems.title__subscriptionBegins')
               }
             />
             <LineItems.Description
               text={
-                checkout.totals.totalDueNow.amount > 0
-                  ? checkout.paymentSource
-                    ? checkout.paymentSource.paymentMethod !== 'card'
-                      ? `${capitalize(checkout.paymentSource.paymentMethod)}`
-                      : `${capitalize(checkout.paymentSource.cardType)} ⋯ ${checkout.paymentSource.last4}`
+                totals.totalDueNow.amount > 0
+                  ? paymentSource
+                    ? paymentSource.paymentMethod !== 'card'
+                      ? `${capitalize(paymentSource.paymentMethod)}`
+                      : `${capitalize(paymentSource.cardType)} ⋯ ${paymentSource.last4}`
                     : '–'
-                  : checkout.planPeriodStart
-                    ? formatDate(new Date(checkout.planPeriodStart))
+                  : planPeriodStart
+                    ? formatDate(new Date(planPeriodStart))
                     : '–'
               }
             />
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
index 5e605dcb55c..31a987c7195 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -1,10 +1,5 @@
-import { useOrganization } from '@clerk/shared/react';
-import type {
-  CommerceCheckoutResource,
-  CommerceMoney,
-  CommercePaymentSourceResource,
-  ConfirmCheckoutParams,
-} from '@clerk/types';
+import { __experimental_useCheckout as useCheckout, useOrganization } from '@clerk/shared/react';
+import type { CommerceMoney, CommercePaymentSourceResource, ConfirmCheckoutParams } from '@clerk/types';
 import { useMemo, useState } from 'react';
 
 import { Card } from '@/ui/elements/Card';
@@ -22,21 +17,20 @@ import { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Text } fro
 import { ChevronUpDown, InformationCircle } from '../../icons';
 import * as AddPaymentSource from '../PaymentSources/AddPaymentSource';
 import { PaymentSourceRow } from '../PaymentSources/PaymentSourceRow';
-import { useCheckoutContextRoot } from './CheckoutPage';
 
 type PaymentMethodSource = 'existing' | 'new';
 
 const capitalize = (name: string) => name[0].toUpperCase() + name.slice(1);
 
 export const CheckoutForm = withCardStateProvider(() => {
-  const ctx = useCheckoutContextRoot();
-  const { checkout } = ctx;
+  const { checkout } = useCheckout();
 
-  if (!checkout) {
+  const { id, plan, totals, isImmediatePlanChange, planPeriod } = checkout;
+
+  if (!id) {
     return null;
   }
 
-  const { plan, planPeriod, totals, isImmediatePlanChange } = checkout;
   const showCredits = !!totals.credit?.amount && totals.credit.amount > 0;
   const showPastDue = !!totals.pastDue?.amount && totals.pastDue.amount > 0;
   const showDowngradeInfo = !isImmediatePlanChange;
@@ -114,35 +108,37 @@ export const CheckoutForm = withCardStateProvider(() => {
         </Box>
       )}
 
-      <CheckoutFormElements checkout={checkout} />
+      <CheckoutFormElements />
     </Drawer.Body>
   );
 });
 
 const useCheckoutMutations = () => {
   const { organization } = useOrganization();
-  const { subscriberType } = useCheckoutContext();
-  const { updateCheckout, checkout } = useCheckoutContextRoot();
+  const { subscriberType, onSubscriptionComplete } = useCheckoutContext();
+  const { checkout } = useCheckout();
+  const { id, confirm } = checkout;
   const card = useCardState();
 
-  if (!checkout) {
+  if (!id) {
     throw new Error('Checkout not found');
   }
 
   const confirmCheckout = async (params: ConfirmCheckoutParams) => {
     card.setLoading();
     card.setError(undefined);
-    try {
-      const newCheckout = await checkout.confirm({
-        ...params,
-        ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
-      });
-      updateCheckout(newCheckout);
-    } catch (error) {
+
+    const { data, error } = await confirm({
+      ...params,
+      ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
+    });
+
+    if (error) {
       handleError(error, [], card.setError);
-    } finally {
-      card.setIdle();
+    } else if (data) {
+      onSubscriptionComplete?.();
     }
+    card.setIdle();
   };
 
   const payWithExistingPaymentSource = (e: React.FormEvent<HTMLFormElement>) => {
@@ -158,22 +154,11 @@ const useCheckoutMutations = () => {
 
   const addPaymentSourceAndPay = (ctx: { gateway: 'stripe'; paymentToken: string }) => confirmCheckout(ctx);
 
-  const payWithTestCard = async () => {
-    card.setLoading();
-    card.setError(undefined);
-    try {
-      const newCheckout = await checkout.confirm({
-        gateway: 'stripe',
-        useTestCard: true,
-        ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
-      });
-      updateCheckout(newCheckout);
-    } catch (error) {
-      handleError(error, [], card.setError);
-    } finally {
-      card.setIdle();
-    }
-  };
+  const payWithTestCard = () =>
+    confirmCheckout({
+      gateway: 'stripe',
+      useTestCard: true,
+    });
 
   return {
     payWithExistingPaymentSource,
@@ -182,13 +167,19 @@ const useCheckoutMutations = () => {
   };
 };
 
-const CheckoutFormElements = ({ checkout }: { checkout: CommerceCheckoutResource }) => {
+const CheckoutFormElements = () => {
+  const { checkout } = useCheckout();
+  const { id, totals } = checkout;
   const { data: paymentSources } = usePaymentMethods();
 
   const [paymentMethodSource, setPaymentMethodSource] = useState<PaymentMethodSource>(() =>
     paymentSources.length > 0 ? 'existing' : 'new',
   );
 
+  if (!id) {
+    return null;
+  }
+
   return (
     <Col
       elementDescriptor={descriptors.checkoutFormElementsRoot}
@@ -196,7 +187,7 @@ const CheckoutFormElements = ({ checkout }: { checkout: CommerceCheckoutResource
       sx={t => ({ padding: t.space.$4 })}
     >
       {/* only show if there are payment sources and there is a total due now */}
-      {paymentSources.length > 0 && checkout.totals.totalDueNow.amount > 0 && (
+      {paymentSources.length > 0 && totals.totalDueNow.amount > 0 && (
         <SegmentedControl.Root
           aria-label='Payment method source'
           value={paymentMethodSource}
@@ -217,9 +208,8 @@ const CheckoutFormElements = ({ checkout }: { checkout: CommerceCheckoutResource
 
       {paymentMethodSource === 'existing' && (
         <ExistingPaymentSourceForm
-          checkout={checkout}
           paymentSources={paymentSources}
-          totalDueNow={checkout.totals.totalDueNow}
+          totalDueNow={totals.totalDueNow}
         />
       )}
 
@@ -287,9 +277,10 @@ export const PayWithTestPaymentSource = () => {
 
 const AddPaymentSourceForCheckout = withCardStateProvider(() => {
   const { addPaymentSourceAndPay } = useCheckoutMutations();
-  const { checkout } = useCheckoutContextRoot();
+  const { checkout } = useCheckout();
+  const { id, totals } = checkout;
 
-  if (!checkout) {
+  if (!id) {
     return null;
   }
 
@@ -302,10 +293,10 @@ const AddPaymentSourceForCheckout = withCardStateProvider(() => {
         <PayWithTestPaymentSource />
       </DevOnly>
 
-      {checkout.totals.totalDueNow.amount > 0 ? (
+      {totals.totalDueNow.amount > 0 ? (
         <AddPaymentSource.FormButton
           text={localizationKeys('commerce.pay', {
-            amount: `${checkout.totals.totalDueNow.currencySymbol}${checkout.totals.totalDueNow.amountFormatted}`,
+            amount: `${totals.totalDueNow.currencySymbol}${totals.totalDueNow.amountFormatted}`,
           })}
         />
       ) : (
@@ -317,18 +308,19 @@ const AddPaymentSourceForCheckout = withCardStateProvider(() => {
 
 const ExistingPaymentSourceForm = withCardStateProvider(
   ({
-    checkout,
     totalDueNow,
     paymentSources,
   }: {
-    checkout: CommerceCheckoutResource;
     totalDueNow: CommerceMoney;
     paymentSources: CommercePaymentSourceResource[];
   }) => {
+    const { checkout } = useCheckout();
+    const { paymentSource } = checkout;
+
     const { payWithExistingPaymentSource } = useCheckoutMutations();
     const card = useCardState();
     const [selectedPaymentSource, setSelectedPaymentSource] = useState<CommercePaymentSourceResource | undefined>(
-      checkout.paymentSource || paymentSources.find(p => p.isDefault),
+      paymentSource || paymentSources.find(p => p.isDefault),
     );
 
     const options = useMemo(() => {
@@ -354,7 +346,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
           rowGap: t.space.$4,
         })}
       >
-        {checkout.totals.totalDueNow.amount > 0 ? (
+        {totalDueNow.amount > 0 ? (
           <Select
             elementId='paymentSource'
             options={options}
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx
index 6d8f2747ee2..6ed9b0e034e 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutPage.tsx
@@ -1,130 +1,86 @@
-import { useClerk, useOrganization, useUser } from '@clerk/shared/react';
-import type { ClerkAPIError, CommerceCheckoutResource } from '@clerk/types';
-import { createContext, useContext, useEffect, useMemo } from 'react';
-import useSWR from 'swr';
-import useSWRMutation from 'swr/mutation';
+import {
+  __experimental_CheckoutProvider as CheckoutProvider,
+  __experimental_useCheckout as useCheckout,
+} from '@clerk/shared/react';
+import { useEffect, useMemo } from 'react';
 
-import { useCheckoutContext } from '../../contexts';
+import { useCheckoutContext } from '@/ui/contexts/components';
 
-type CheckoutStatus = 'pending' | 'ready' | 'completed' | 'missing_payer_email' | 'invalid_plan_change' | 'error';
-
-const CheckoutContextRoot = createContext<{
-  checkout: CommerceCheckoutResource | undefined;
-  isLoading: boolean;
-  updateCheckout: (checkout: CommerceCheckoutResource) => void;
-  errors: ClerkAPIError[];
-  startCheckout: () => void;
-  status: CheckoutStatus;
-} | null>(null);
-
-export const useCheckoutContextRoot = () => {
-  const ctx = useContext(CheckoutContextRoot);
-  if (!ctx) {
-    throw new Error('CheckoutContextRoot not found');
-  }
-  return ctx;
-};
-
-const useCheckoutCreator = () => {
-  const { planId, planPeriod, subscriberType = 'user', onSubscriptionComplete } = useCheckoutContext();
-  const clerk = useClerk();
-  const { organization } = useOrganization();
-
-  const { user } = useUser();
-
-  const cacheKey = {
-    key: `commerce-checkout`,
-    userId: user?.id,
-    arguments: {
-      ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
-      planId,
-      planPeriod,
-    },
-  };
-
-  // Manually handle the cache
-  const { data, mutate } = useSWR<CommerceCheckoutResource | undefined>(cacheKey);
-
-  // Use `useSWRMutation` to avoid revalidations on stale-data/focus etc.
-  const {
-    trigger: startCheckout,
-    isMutating,
-    error,
-  } = useSWRMutation(
-    cacheKey,
-    key =>
-      clerk.billing?.startCheckout(
-        // @ts-expect-error things are typed as optional
-        key.arguments,
-      ),
-    {
-      // Never throw on error, we want to handle it during rendering
-      throwOnError: false,
-      onSuccess: data => {
-        mutate(data, false);
-      },
-    },
-  );
+const Initiator = () => {
+  const { checkout } = useCheckout();
 
   useEffect(() => {
-    void startCheckout();
-    return () => {
-      // Clear the cache on unmount
-      mutate(undefined, false);
-    };
+    checkout.start().catch(() => null);
+    return checkout.clear;
   }, []);
-
-  return {
-    checkout: data,
-    startCheckout,
-    updateCheckout: (checkout: CommerceCheckoutResource) => {
-      void mutate(checkout, false);
-      onSubscriptionComplete?.();
-    },
-    isMutating,
-    errors: error?.errors,
-  };
+  return null;
 };
 
 const Root = ({ children }: { children: React.ReactNode }) => {
-  const { checkout, isMutating, updateCheckout, errors, startCheckout } = useCheckoutCreator();
-
-  const status = useMemo(() => {
-    if (isMutating) return 'pending';
-    const completedCode = 'completed';
-    if (checkout?.status === completedCode) return completedCode;
-    if (checkout) return 'ready';
-
-    const missingCode = 'missing_payer_email';
-    const isMissingPayerEmail = !!errors?.some((e: ClerkAPIError) => e.code === missingCode);
-    if (isMissingPayerEmail) return missingCode;
-    const invalidChangeCode = 'invalid_plan_change';
-    if (errors?.[0]?.code === invalidChangeCode) return invalidChangeCode;
-    return 'error';
-  }, [isMutating, errors, checkout, checkout?.status]);
+  const { planId, planPeriod, subscriberType } = useCheckoutContext();
 
   return (
-    <CheckoutContextRoot.Provider
-      value={{
-        checkout,
-        isLoading: isMutating,
-        updateCheckout,
-        errors,
-        startCheckout,
-        status,
-      }}
+    <CheckoutProvider
+      for={subscriberType === 'org' ? 'organization' : undefined}
+      planId={
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        planId!
+      }
+      planPeriod={
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        planPeriod!
+      }
     >
+      <Initiator />
       {children}
-    </CheckoutContextRoot.Provider>
+    </CheckoutProvider>
   );
 };
 
-const Stage = ({ children, name }: { children: React.ReactNode; name: CheckoutStatus }) => {
-  const ctx = useCheckoutContextRoot();
-  if (ctx.status !== name) {
+const Stage = ({
+  children,
+  name,
+}: {
+  children: React.ReactNode;
+  name: ReturnType<typeof useCheckout>['checkout']['status'];
+}) => {
+  const { checkout } = useCheckout();
+  if (checkout.status !== name) {
+    return null;
+  }
+  return children;
+};
+
+const FetchStatus = ({
+  children,
+  status,
+}: {
+  children: React.ReactNode;
+  status: 'idle' | 'fetching' | 'error' | 'invalid_plan_change' | 'missing_payer_email';
+}) => {
+  const { checkout } = useCheckout();
+  const { fetchStatus, error } = checkout;
+
+  const internalFetchStatus = useMemo(() => {
+    if (fetchStatus === 'error' && error?.errors) {
+      const errorCodes = error.errors.map(e => e.code);
+
+      if (errorCodes.includes('missing_payer_email')) {
+        return 'missing_payer_email';
+      }
+
+      if (errorCodes.includes('invalid_plan_change')) {
+        return 'invalid_plan_change';
+      }
+    }
+
+    return fetchStatus;
+  }, [fetchStatus, error]);
+
+  if (internalFetchStatus !== status) {
     return null;
   }
   return children;
 };
 
-export { Root, Stage };
+export { Root, Stage, FetchStatus };
diff --git a/packages/clerk-js/src/ui/components/Checkout/index.tsx b/packages/clerk-js/src/ui/components/Checkout/index.tsx
index 67c37daecc4..251510e75b4 100644
--- a/packages/clerk-js/src/ui/components/Checkout/index.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/index.tsx
@@ -23,31 +23,33 @@ export const Checkout = (props: __internal_CheckoutProps) => {
             <Drawer.Content>
               <Drawer.Header title={localizationKeys('commerce.checkout.title')} />
               <CheckoutPage.Root>
-                <CheckoutPage.Stage name='pending'>
-                  <Spinner
-                    sx={{
-                      margin: 'auto',
-                    }}
-                  />
+                <CheckoutPage.Stage name='awaiting_initialization'>
+                  <CheckoutPage.FetchStatus status='fetching'>
+                    <Spinner
+                      sx={{
+                        margin: 'auto',
+                      }}
+                    />
+                  </CheckoutPage.FetchStatus>
+
+                  <CheckoutPage.FetchStatus status='invalid_plan_change'>
+                    <InvalidPlanScreen />
+                  </CheckoutPage.FetchStatus>
+
+                  <CheckoutPage.FetchStatus status='missing_payer_email'>
+                    <AddEmailForm />
+                  </CheckoutPage.FetchStatus>
+
+                  <CheckoutPage.FetchStatus status='error'>
+                    <GenericError />
+                  </CheckoutPage.FetchStatus>
                 </CheckoutPage.Stage>
 
                 <CheckoutPage.Stage name='completed'>
                   <CheckoutComplete />
                 </CheckoutPage.Stage>
 
-                <CheckoutPage.Stage name='error'>
-                  <GenericError />
-                </CheckoutPage.Stage>
-
-                <CheckoutPage.Stage name='invalid_plan_change'>
-                  <InvalidPlanScreen />
-                </CheckoutPage.Stage>
-
-                <CheckoutPage.Stage name='missing_payer_email'>
-                  <AddEmailForm />
-                </CheckoutPage.Stage>
-
-                <CheckoutPage.Stage name='ready'>
+                <CheckoutPage.Stage name='awaiting_confirmation'>
                   <CheckoutForm />
                 </CheckoutPage.Stage>
               </CheckoutPage.Root>
diff --git a/packages/clerk-js/src/ui/components/Checkout/parts.tsx b/packages/clerk-js/src/ui/components/Checkout/parts.tsx
index 235200f0469..f8db48b2019 100644
--- a/packages/clerk-js/src/ui/components/Checkout/parts.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/parts.tsx
@@ -1,3 +1,4 @@
+import { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';
 import { useMemo } from 'react';
 
 import { Alert } from '@/ui/elements/Alert';
@@ -7,10 +8,10 @@ import { LineItems } from '@/ui/elements/LineItems';
 import { useCheckoutContext } from '../../contexts';
 import { Box, descriptors, Flex, localizationKeys, useLocalizations } from '../../customizables';
 import { EmailForm } from '../UserProfile/EmailForm';
-import { useCheckoutContextRoot } from './CheckoutPage';
 
 export const GenericError = () => {
-  const { errors } = useCheckoutContextRoot();
+  const { checkout } = useCheckout();
+
   const { translateError } = useLocalizations();
   const { t } = useLocalizations();
   return (
@@ -28,7 +29,9 @@ export const GenericError = () => {
           variant='danger'
           colorScheme='danger'
         >
-          {errors ? translateError(errors[0]) : t(localizationKeys('unstable__errors.form_param_value_invalid'))}
+          {checkout.error
+            ? translateError(checkout.error.errors[0])
+            : t(localizationKeys('unstable__errors.form_param_value_invalid'))}
         </Alert>
       </Flex>
     </Drawer.Body>
@@ -36,14 +39,14 @@ export const GenericError = () => {
 };
 
 export const InvalidPlanScreen = () => {
-  const { errors } = useCheckoutContextRoot();
+  const { planPeriod } = useCheckoutContext();
+  const { checkout } = useCheckout();
+  const error = checkout.error;
 
   const planFromError = useMemo(() => {
-    const error = errors?.find(e => e.code === 'invalid_plan_change');
-    return error?.meta?.plan;
-  }, [errors]);
-
-  const { planPeriod } = useCheckoutContext();
+    const _error = error?.errors.find(e => e.code === 'invalid_plan_change');
+    return _error?.meta?.plan;
+  }, [error]);
 
   if (!planFromError) {
     return null;
@@ -91,7 +94,7 @@ export const InvalidPlanScreen = () => {
 };
 
 export const AddEmailForm = () => {
-  const { startCheckout } = useCheckoutContextRoot();
+  const { checkout } = useCheckout();
   const { setIsOpen } = useDrawerContext();
   return (
     <Drawer.Body>
@@ -103,7 +106,7 @@ export const AddEmailForm = () => {
         <EmailForm
           title={localizationKeys('commerce.checkout.emailForm.title')}
           subtitle={localizationKeys('commerce.checkout.emailForm.subtitle')}
-          onSuccess={startCheckout}
+          onSuccess={() => void checkout.start()}
           onReset={() => setIsOpen(false)}
           disableAutoFocus
         />
diff --git a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx
index af2bee8f80b..d9222209a1b 100644
--- a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx
@@ -1,10 +1,10 @@
+import type { __experimental_useCheckout as useCheckout } from '@clerk/shared/react';
 import {
   __experimental_PaymentElement as PaymentElement,
   __experimental_PaymentElementProvider as PaymentElementProvider,
   __experimental_usePaymentElement as usePaymentElement,
   createContextAndHook,
 } from '@clerk/shared/react';
-import type { CommerceCheckoutResource } from '@clerk/types';
 import type { PropsWithChildren } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
@@ -51,7 +51,7 @@ const useStripeAppearance = (node: HTMLElement | null) => {
 
 type AddPaymentSourceProps = {
   onSuccess: (context: { gateway: 'stripe'; paymentToken: string }) => Promise<void>;
-  checkout?: CommerceCheckoutResource;
+  checkout?: ReturnType<typeof useCheckout>['checkout'];
   cancelAction?: () => void;
 };
 
diff --git a/packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx b/packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx
index 78b186bba95..b4389dc9363 100644
--- a/packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx
+++ b/packages/clerk-js/src/ui/contexts/CoreClerkContextWrapper.tsx
@@ -1,4 +1,5 @@
 import {
+  __experimental_CheckoutProvider as CheckoutProvider,
   ClerkInstanceContext,
   ClientContext,
   OrganizationProvider,
@@ -54,7 +55,14 @@ export function CoreClerkContextWrapper(props: CoreClerkContextWrapperProps): JS
             {...organizationCtx.value}
             swrConfig={props.swrConfig}
           >
-            <UserContext.Provider value={userCtx}>{props.children}</UserContext.Provider>
+            <UserContext.Provider value={userCtx}>
+              <CheckoutProvider
+                // @ts-expect-error - value is not used
+                value={undefined}
+              >
+                {props.children}
+              </CheckoutProvider>
+            </UserContext.Provider>
           </OrganizationProvider>
         </SessionContext.Provider>
       </ClientContext.Provider>
diff --git a/packages/nextjs/src/client-boundary/hooks.ts b/packages/nextjs/src/client-boundary/hooks.ts
index f3ba00b0012..c14cec9523e 100644
--- a/packages/nextjs/src/client-boundary/hooks.ts
+++ b/packages/nextjs/src/client-boundary/hooks.ts
@@ -11,6 +11,8 @@ export {
   useSignUp,
   useUser,
   useReverification,
+  __experimental_useCheckout,
+  __experimental_CheckoutProvider,
   __experimental_usePaymentElement,
   __experimental_PaymentElementProvider,
   __experimental_PaymentElement,
diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts
index 194dc916d54..6ef0f44e710 100644
--- a/packages/nextjs/src/index.ts
+++ b/packages/nextjs/src/index.ts
@@ -57,6 +57,8 @@ export {
   __experimental_usePaymentElement,
   __experimental_PaymentElementProvider,
   __experimental_PaymentElement,
+  __experimental_useCheckout,
+  __experimental_CheckoutProvider,
 } from './client-boundary/hooks';
 
 /**
diff --git a/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap
index d257ba26175..8ad881f8b90 100644
--- a/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/react-router/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -32,8 +32,10 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "UserButton",
   "UserProfile",
   "Waitlist",
+  "__experimental_CheckoutProvider",
   "__experimental_PaymentElement",
   "__experimental_PaymentElementProvider",
+  "__experimental_useCheckout",
   "__experimental_usePaymentElement",
   "useAuth",
   "useClerk",
diff --git a/packages/react/src/contexts/ClerkContextProvider.tsx b/packages/react/src/contexts/ClerkContextProvider.tsx
index a86a84a47e1..f38f9f785f5 100644
--- a/packages/react/src/contexts/ClerkContextProvider.tsx
+++ b/packages/react/src/contexts/ClerkContextProvider.tsx
@@ -1,5 +1,11 @@
 import { deriveState } from '@clerk/shared/deriveState';
-import { ClientContext, OrganizationProvider, SessionContext, UserContext } from '@clerk/shared/react';
+import {
+  __experimental_CheckoutProvider as CheckoutProvider,
+  ClientContext,
+  OrganizationProvider,
+  SessionContext,
+  UserContext,
+} from '@clerk/shared/react';
 import type { ClientResource, InitialState, Resources } from '@clerk/types';
 import React from 'react';
 
@@ -89,7 +95,14 @@ export function ClerkContextProvider(props: ClerkContextProvider) {
         <SessionContext.Provider value={sessionCtx}>
           <OrganizationProvider {...organizationCtx.value}>
             <AuthContext.Provider value={authCtx}>
-              <UserContext.Provider value={userCtx}>{children}</UserContext.Provider>
+              <UserContext.Provider value={userCtx}>
+                <CheckoutProvider
+                  // @ts-expect-error - value is not used
+                  value={undefined}
+                >
+                  {children}
+                </CheckoutProvider>
+              </UserContext.Provider>
             </AuthContext.Provider>
           </OrganizationProvider>
         </SessionContext.Provider>
diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts
index bb52d3e0f93..824dedaade5 100644
--- a/packages/react/src/hooks/index.ts
+++ b/packages/react/src/hooks/index.ts
@@ -10,6 +10,8 @@ export {
   useUser,
   useSession,
   useReverification,
+  __experimental_useCheckout,
+  __experimental_CheckoutProvider,
   __experimental_usePaymentElement,
   __experimental_PaymentElementProvider,
   __experimental_PaymentElement,
diff --git a/packages/react/src/isomorphicClerk.ts b/packages/react/src/isomorphicClerk.ts
index 52dcb289b10..37b7b93d24f 100644
--- a/packages/react/src/isomorphicClerk.ts
+++ b/packages/react/src/isomorphicClerk.ts
@@ -705,6 +705,10 @@ export class IsomorphicClerk implements IsomorphicLoadedClerk {
     return this.clerkjs?.apiKeys;
   }
 
+  __experimental_checkout = (...args: Parameters<Clerk['__experimental_checkout']>) => {
+    return this.clerkjs?.__experimental_checkout(...args);
+  };
+
   __unstable__setEnvironment(...args: any): void {
     if (this.clerkjs && '__unstable__setEnvironment' in this.clerkjs) {
       (this.clerkjs as any).__unstable__setEnvironment(args);
diff --git a/packages/remix/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/remix/src/__tests__/__snapshots__/exports.test.ts.snap
index 98821467884..c642b325a6e 100644
--- a/packages/remix/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/remix/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -34,8 +34,10 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "UserProfile",
   "Waitlist",
   "WithClerkState",
+  "__experimental_CheckoutProvider",
   "__experimental_PaymentElement",
   "__experimental_PaymentElementProvider",
+  "__experimental_useCheckout",
   "__experimental_usePaymentElement",
   "useAuth",
   "useClerk",
diff --git a/packages/shared/jest.config.js b/packages/shared/jest.config.js
index a2b8724aeaa..ccd6fafeba2 100644
--- a/packages/shared/jest.config.js
+++ b/packages/shared/jest.config.js
@@ -9,6 +9,7 @@ const config = {
   testEnvironment: './customJSDOMEnvironment.ts',
   roots: ['<rootDir>/src'],
   setupFiles: ['./jest.setup.ts'],
+  testRegex: ['/src/.*.test.[jt]sx?$'],
 
   collectCoverage: false,
   coverageProvider: 'v8',
diff --git a/packages/shared/package.json b/packages/shared/package.json
index ffc8bc7681e..612c655d6c8 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -136,7 +136,7 @@
     "lint:attw": "attw --pack . --profile node16",
     "lint:publint": "publint",
     "publish:local": "pnpm yalc push --replace  --sig",
-    "test": "jest",
+    "test": "jest && vitest",
     "test:cache:clear": "jest --clearCache --useStderr",
     "test:ci": "jest --maxWorkers=70%",
     "test:coverage": "jest --collectCoverage && open coverage/lcov-report/index.html"
diff --git a/packages/shared/src/error.ts b/packages/shared/src/error.ts
index 45bc7e3c498..a0447d1184d 100644
--- a/packages/shared/src/error.ts
+++ b/packages/shared/src/error.ts
@@ -51,8 +51,8 @@ export function isClerkAPIResponseError(err: any): err is ClerkAPIResponseError
 /**
  * Checks if the provided error object is an instance of ClerkRuntimeError.
  *
- * @param {any} err - The error object to check.
- * @returns {boolean} True if the error is a ClerkRuntimeError, false otherwise.
+ * @param err - The error object to check.
+ * @returns True if the error is a ClerkRuntimeError, false otherwise.
  *
  * @example
  * const error = new ClerkRuntimeError('An error occurred');
@@ -160,6 +160,7 @@ export class ClerkAPIResponseError extends Error implements ClerkAPIResponseErro
  * Custom error class for representing Clerk runtime errors.
  *
  * @class ClerkRuntimeError
+ *
  * @example
  *   throw new ClerkRuntimeError('An error occurred', { code: 'password_invalid' });
  */
@@ -198,7 +199,7 @@ export class ClerkRuntimeError extends Error {
   /**
    * Returns a string representation of the error.
    *
-   * @returns {string} A formatted string with the error name and message.
+   * @returns A formatted string with the error name and message.
    */
   public toString = () => {
     return `[${this.name}]\nMessage:${this.message}`;
@@ -277,11 +278,6 @@ export interface ErrorThrower {
 export function buildErrorThrower({ packageName, customMessages }: ErrorThrowerOptions): ErrorThrower {
   let pkg = packageName;
 
-  const messages = {
-    ...DefaultMessages,
-    ...customMessages,
-  };
-
   function buildMessage(rawMessage: string, replacements?: Record<string, string | number>) {
     if (!replacements) {
       return `${pkg}: ${rawMessage}`;
@@ -298,6 +294,11 @@ export function buildErrorThrower({ packageName, customMessages }: ErrorThrowerO
     return `${pkg}: ${msg}`;
   }
 
+  const messages = {
+    ...DefaultMessages,
+    ...customMessages,
+  };
+
   return {
     setPackageName({ packageName }: ErrorThrowerOptions): ErrorThrower {
       if (typeof packageName === 'string') {
diff --git a/packages/shared/src/react/commerce.tsx b/packages/shared/src/react/commerce.tsx
index 3a3ab81d7d8..4239585d108 100644
--- a/packages/shared/src/react/commerce.tsx
+++ b/packages/shared/src/react/commerce.tsx
@@ -7,6 +7,7 @@ import useSWR from 'swr';
 import useSWRMutation from 'swr/mutation';
 
 import { createContextAndHook } from './hooks/createContextAndHook';
+import type { useCheckout } from './hooks/useCheckout';
 import { useClerk } from './hooks/useClerk';
 import { useOrganization } from './hooks/useOrganization';
 import { useUser } from './hooks/useUser';
@@ -135,7 +136,7 @@ type internalStripeAppearance = {
 };
 
 type PaymentElementProviderProps = {
-  checkout?: CommerceCheckoutResource;
+  checkout?: CommerceCheckoutResource | ReturnType<typeof useCheckout>['checkout'];
   stripeAppearance?: internalStripeAppearance;
   // TODO(@COMMERCE): What can we do to remove this ?
   for: 'org' | 'user';
@@ -232,7 +233,7 @@ const PaymentElement = ({ fallback }: { fallback?: ReactNode }) => {
   const environment = useInternalEnvironment();
 
   const applePay = useMemo(() => {
-    if (!checkout) {
+    if (!checkout || !checkout.totals || !checkout.plan) {
       return undefined;
     }
 
diff --git a/packages/shared/src/react/contexts.tsx b/packages/shared/src/react/contexts.tsx
index e3170145c09..33b5e231c9f 100644
--- a/packages/shared/src/react/contexts.tsx
+++ b/packages/shared/src/react/contexts.tsx
@@ -3,6 +3,7 @@
 import type {
   ClerkOptions,
   ClientResource,
+  CommerceSubscriptionPlanPeriod,
   LoadedClerk,
   OrganizationResource,
   SignedInSessionResource,
@@ -23,6 +24,21 @@ const [SessionContext, useSessionContext] = createContextAndHook<SignedInSession
 
 const OptionsContext = React.createContext<ClerkOptions>({});
 
+type UseCheckoutOptions = {
+  for?: 'organization';
+  planPeriod: CommerceSubscriptionPlanPeriod;
+  planId: string;
+};
+
+const [CheckoutContext, useCheckoutContext] = createContextAndHook<UseCheckoutOptions>('CheckoutContext');
+
+const __experimental_CheckoutProvider = ({ children, ...rest }: PropsWithChildren<UseCheckoutOptions>) => {
+  return <CheckoutContext.Provider value={{ value: rest }}>{children}</CheckoutContext.Provider>;
+};
+
+/**
+ * @internal
+ */
 function useOptionsContext(): ClerkOptions {
   const context = React.useContext(OptionsContext);
   if (context === undefined) {
@@ -61,6 +77,9 @@ const OrganizationProvider = ({
   );
 };
 
+/**
+ * @internal
+ */
 function useAssertWrappedByClerkProvider(displayNameOrFn: string | (() => void)): void {
   const ctx = React.useContext(ClerkInstanceContext);
 
@@ -95,5 +114,7 @@ export {
   useSessionContext,
   ClerkInstanceContext,
   useClerkInstanceContext,
+  useCheckoutContext,
+  __experimental_CheckoutProvider,
   useAssertWrappedByClerkProvider,
 };
diff --git a/packages/shared/src/react/hooks/__tests__/useCheckout.type.spec.ts b/packages/shared/src/react/hooks/__tests__/useCheckout.type.spec.ts
new file mode 100644
index 00000000000..d1a5c9b6053
--- /dev/null
+++ b/packages/shared/src/react/hooks/__tests__/useCheckout.type.spec.ts
@@ -0,0 +1,164 @@
+import type {
+  __experimental_CheckoutCacheState,
+  ClerkAPIResponseError,
+  CommerceCheckoutResource,
+  CommerceSubscriptionPlanPeriod,
+  ConfirmCheckoutParams,
+} from '@clerk/types';
+import { describe, expectTypeOf, it } from 'vitest';
+
+import type { useCheckout } from '../useCheckout';
+
+type UseCheckoutParameters = Parameters<typeof useCheckout>[0];
+type UseCheckoutReturn = ReturnType<typeof useCheckout>;
+
+describe('useCheckout type tests', () => {
+  describe('parameters', () => {
+    it('allows undefined parameters', () => {
+      expectTypeOf<UseCheckoutParameters>().extract<undefined>().toBeUndefined();
+    });
+
+    it('allows valid options object', () => {
+      type ValidOptions = {
+        for: 'organization';
+        planId: string;
+        planPeriod: CommerceSubscriptionPlanPeriod;
+      };
+      expectTypeOf<ValidOptions>().toMatchTypeOf<UseCheckoutParameters>();
+    });
+
+    it('does not allow invalid "for" value', () => {
+      type InvalidOptions = {
+        for: 'invalid';
+        planId: string;
+        planPeriod: CommerceSubscriptionPlanPeriod;
+      };
+      expectTypeOf<UseCheckoutParameters>().not.toEqualTypeOf<InvalidOptions>();
+    });
+
+    it('does not allow invalid planPeriod value', () => {
+      type InvalidOptions = {
+        for: 'organization';
+        planId: string;
+        planPeriod: 'invalid';
+      };
+      expectTypeOf<UseCheckoutParameters>().not.toEqualTypeOf<InvalidOptions>();
+    });
+
+    it('does not allow additional properties', () => {
+      type InvalidOptions = {
+        for: 'organization';
+        planId: string;
+        planPeriod: CommerceSubscriptionPlanPeriod;
+        invalidProp: boolean;
+      };
+      expectTypeOf<UseCheckoutParameters>().not.toEqualTypeOf<InvalidOptions>();
+    });
+  });
+
+  describe('return value', () => {
+    type CheckoutObject = UseCheckoutReturn['checkout'];
+    describe('methods', () => {
+      it('has required methods', () => {
+        type Methods = Pick<CheckoutObject, 'confirm' | 'start' | 'clear' | 'finalize' | 'getState'>;
+
+        type MethodNames = keyof Methods;
+        expectTypeOf<MethodNames>().toEqualTypeOf<'confirm' | 'start' | 'clear' | 'finalize' | 'getState'>();
+      });
+
+      it('has correct method signatures', () => {
+        type Methods = Pick<CheckoutObject, 'confirm' | 'start' | 'clear' | 'finalize' | 'getState'>;
+        type ConfirmMethod = Methods['confirm'];
+        type StartMethod = Methods['start'];
+        type ClearMethod = Methods['clear'];
+        type FinalizeMethod = Methods['finalize'];
+        type GetStateMethod = Methods['getState'];
+
+        type CheckoutResult =
+          | {
+              data: CommerceCheckoutResource;
+              error: null;
+            }
+          | {
+              data: null;
+              error: ClerkAPIResponseError;
+            };
+
+        expectTypeOf<ConfirmMethod>().parameter(0).toEqualTypeOf<ConfirmCheckoutParams>();
+        expectTypeOf<ConfirmMethod>().returns.resolves.toEqualTypeOf<CheckoutResult>();
+        expectTypeOf<StartMethod>().returns.resolves.toEqualTypeOf<CheckoutResult>();
+        expectTypeOf<ClearMethod>().returns.toBeVoid();
+        expectTypeOf<FinalizeMethod>().parameter(0).toEqualTypeOf<{ redirectUrl: string } | undefined>();
+        expectTypeOf<GetStateMethod>().returns.toEqualTypeOf<__experimental_CheckoutCacheState>();
+      });
+
+      it('has correct return types for start and confirm', () => {
+        type Methods = Pick<CheckoutObject, 'confirm' | 'start'>;
+        type ConfirmMethod = Methods['confirm'];
+        type StartMethod = Methods['start'];
+
+        type CheckoutResult =
+          | {
+              data: CommerceCheckoutResource;
+              error: null;
+            }
+          | {
+              data: null;
+              error: ClerkAPIResponseError;
+            };
+
+        // Test that start returns a Promise of CheckoutResult
+        expectTypeOf<StartMethod>().parameters.toEqualTypeOf<[]>();
+        expectTypeOf<StartMethod>().returns.resolves.toEqualTypeOf<CheckoutResult>();
+
+        // Test that confirm returns a Promise of CheckoutResult and accepts correct parameters
+        expectTypeOf<ConfirmMethod>().parameters.toEqualTypeOf<[ConfirmCheckoutParams]>();
+        expectTypeOf<ConfirmMethod>().returns.resolves.toEqualTypeOf<CheckoutResult>();
+      });
+    });
+
+    describe('properties', () => {
+      it('has required status properties with correct types', () => {
+        type StatusProps = Pick<CheckoutObject, 'isStarting' | 'isConfirming' | 'error' | 'status' | 'fetchStatus'>;
+        type PropNames = keyof StatusProps;
+        expectTypeOf<PropNames>().toEqualTypeOf<'isStarting' | 'isConfirming' | 'error' | 'status' | 'fetchStatus'>();
+
+        type IsStarting = StatusProps['isStarting'];
+        type IsConfirming = StatusProps['isConfirming'];
+        type FetchStatus = StatusProps['fetchStatus'];
+
+        expectTypeOf<IsStarting>().toBeBoolean();
+        expectTypeOf<IsConfirming>().toBeBoolean();
+        expectTypeOf<FetchStatus>().toEqualTypeOf<'idle' | 'fetching' | 'error'>();
+      });
+
+      it('has nullable checkout properties', () => {
+        type CheckoutProps = Pick<
+          CheckoutObject,
+          | 'id'
+          | 'externalClientSecret'
+          | 'externalGatewayId'
+          | 'statement_id'
+          | 'totals'
+          | 'isImmediatePlanChange'
+          | 'planPeriod'
+          | 'plan'
+          | 'paymentSource'
+        >;
+
+        type PropNames = keyof CheckoutProps;
+        expectTypeOf<PropNames>().toEqualTypeOf<
+          | 'id'
+          | 'externalClientSecret'
+          | 'externalGatewayId'
+          | 'statement_id'
+          | 'totals'
+          | 'isImmediatePlanChange'
+          | 'planPeriod'
+          | 'plan'
+          | 'paymentSource'
+        >();
+      });
+    });
+  });
+});
diff --git a/packages/shared/src/react/hooks/index.ts b/packages/shared/src/react/hooks/index.ts
index e801745a0b7..666b60a2f57 100644
--- a/packages/shared/src/react/hooks/index.ts
+++ b/packages/shared/src/react/hooks/index.ts
@@ -12,3 +12,4 @@ export { useStatements as __experimental_useStatements } from './useStatements';
 export { usePaymentAttempts as __experimental_usePaymentAttempts } from './usePaymentAttempts';
 export { usePaymentMethods as __experimental_usePaymentMethods } from './usePaymentMethods';
 export { useSubscriptionItems as __experimental_useSubscriptionItems } from './useSubscriptionItems';
+export { useCheckout as __experimental_useCheckout } from './useCheckout';
diff --git a/packages/shared/src/react/hooks/useCheckout.ts b/packages/shared/src/react/hooks/useCheckout.ts
new file mode 100644
index 00000000000..1b3ab2417a8
--- /dev/null
+++ b/packages/shared/src/react/hooks/useCheckout.ts
@@ -0,0 +1,124 @@
+import type {
+  __experimental_CheckoutCacheState,
+  __experimental_CheckoutInstance,
+  CommerceCheckoutResource,
+  CommerceSubscriptionPlanPeriod,
+} from '@clerk/types';
+import { useMemo, useSyncExternalStore } from 'react';
+
+import type { ClerkAPIResponseError } from '../..';
+import { useCheckoutContext } from '../contexts';
+import { useClerk } from './useClerk';
+import { useOrganization } from './useOrganization';
+import { useUser } from './useUser';
+
+/**
+ * Utility type that removes function properties from a type.
+ */
+type RemoveFunctions<T> = {
+  [K in keyof T as T[K] extends (...args: any[]) => any ? never : K]: T[K];
+};
+
+/**
+ * Utility type that makes all properties `null`.
+ */
+type ForceNull<T> = {
+  [K in keyof T]: null;
+};
+
+type CheckoutProperties = Omit<RemoveFunctions<CommerceCheckoutResource>, 'pathRoot' | 'status'>;
+
+type NullableCheckoutProperties = CheckoutProperties | ForceNull<CheckoutProperties>;
+
+type __experimental_UseCheckoutReturn = {
+  checkout: NullableCheckoutProperties & {
+    confirm: __experimental_CheckoutInstance['confirm'];
+    start: __experimental_CheckoutInstance['start'];
+    isStarting: boolean;
+    isConfirming: boolean;
+    error: ClerkAPIResponseError | null;
+    status: __experimental_CheckoutCacheState['status'];
+    clear: () => void;
+    finalize: (params?: { redirectUrl: string }) => void;
+    fetchStatus: 'idle' | 'fetching' | 'error';
+    getState: () => __experimental_CheckoutCacheState;
+  };
+};
+
+type UseCheckoutOptions = {
+  for?: 'organization';
+  planPeriod: CommerceSubscriptionPlanPeriod;
+  planId: string;
+};
+
+export const useCheckout = (options?: UseCheckoutOptions): __experimental_UseCheckoutReturn => {
+  const contextOptions = useCheckoutContext();
+  const { for: forOrganization, planId, planPeriod } = options || contextOptions;
+
+  const clerk = useClerk();
+  const { organization } = useOrganization();
+  const { user } = useUser();
+
+  if (!user) {
+    throw new Error('Clerk: User is not authenticated');
+  }
+
+  if (forOrganization === 'organization' && !organization) {
+    throw new Error('Clerk: Use `setActive` to set the organization');
+  }
+
+  const manager = useMemo(
+    () => clerk.__experimental_checkout({ planId, planPeriod, for: forOrganization }),
+    [user.id, organization?.id, planId, planPeriod, forOrganization],
+  );
+
+  const managerProperties = useSyncExternalStore(
+    cb => manager.subscribe(cb),
+    () => manager.getState(),
+    () => manager.getState(),
+  );
+
+  const properties = useMemo<NullableCheckoutProperties>(() => {
+    if (!managerProperties.checkout) {
+      return {
+        id: null,
+        externalClientSecret: null,
+        externalGatewayId: null,
+        statement_id: null,
+        status: null,
+        totals: null,
+        isImmediatePlanChange: null,
+        planPeriod: null,
+        plan: null,
+        paymentSource: null,
+      };
+    }
+    const {
+      // eslint-disable-next-line @typescript-eslint/unbound-method
+      reload,
+      confirm,
+      pathRoot,
+      // All the above need to be removed from the properties
+      ...rest
+    } = managerProperties.checkout;
+    return rest;
+  }, [managerProperties.checkout]);
+
+  const checkout = {
+    ...properties,
+    getState: manager.getState,
+    start: manager.start,
+    confirm: manager.confirm,
+    clear: manager.clear,
+    finalize: manager.finalize,
+    isStarting: managerProperties.isStarting,
+    isConfirming: managerProperties.isConfirming,
+    error: managerProperties.error,
+    status: managerProperties.status,
+    fetchStatus: managerProperties.fetchStatus,
+  };
+
+  return {
+    checkout,
+  };
+};
diff --git a/packages/shared/src/react/index.ts b/packages/shared/src/react/index.ts
index 29f23a611db..c1f8f761236 100644
--- a/packages/shared/src/react/index.ts
+++ b/packages/shared/src/react/index.ts
@@ -14,6 +14,7 @@ export {
   UserContext,
   useSessionContext,
   useUserContext,
+  __experimental_CheckoutProvider,
 } from './contexts';
 
 export * from './commerce';
diff --git a/packages/shared/vitest.config.mts b/packages/shared/vitest.config.mts
new file mode 100644
index 00000000000..fbfbbffe67b
--- /dev/null
+++ b/packages/shared/vitest.config.mts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [],
+  test: {
+    watch: false,
+    typecheck: {
+      enabled: true,
+      tsconfig: './tsconfig.test.json',
+      include: ['**/*.type.spec.{ts,tsx}'],
+    },
+    env: {
+      CLERK_SECRET_KEY: 'TEST_SECRET_KEY',
+    },
+    environment: 'jsdom',
+    include: ['**/*.spec.{js,ts,jsx,tsx}'],
+    setupFiles: './vitest.setup.mts',
+  },
+});
diff --git a/packages/shared/vitest.setup.mts b/packages/shared/vitest.setup.mts
new file mode 100644
index 00000000000..46a9c434051
--- /dev/null
+++ b/packages/shared/vitest.setup.mts
@@ -0,0 +1,8 @@
+import { afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+globalThis.__DEV__ = true;
+globalThis.PACKAGE_NAME = '@clerk/clerk-react';
+globalThis.PACKAGE_VERSION = '0.0.0-test';
+
+afterEach(cleanup);
diff --git a/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap
index fd0feb2b204..be0a59fc5f9 100644
--- a/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/tanstack-react-start/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -44,8 +44,10 @@ exports[`root public exports > should not change unexpectedly 1`] = `
   "UserButton",
   "UserProfile",
   "Waitlist",
+  "__experimental_CheckoutProvider",
   "__experimental_PaymentElement",
   "__experimental_PaymentElementProvider",
+  "__experimental_useCheckout",
   "__experimental_usePaymentElement",
   "useAuth",
   "useClerk",
diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts
index 530fc9f0bad..1220e102bfa 100644
--- a/packages/types/src/clerk.ts
+++ b/packages/types/src/clerk.ts
@@ -1,3 +1,4 @@
+import type { ClerkAPIResponseError } from './api';
 import type { APIKeysNamespace } from './apiKeys';
 import type {
   APIKeysTheme,
@@ -20,9 +21,11 @@ import type {
 import type { ClientResource } from './client';
 import type {
   CommerceBillingNamespace,
+  CommerceCheckoutResource,
   CommercePlanResource,
   CommerceSubscriberType,
   CommerceSubscriptionPlanPeriod,
+  ConfirmCheckoutParams,
 } from './commerce';
 import type { CustomMenuItem } from './customMenuItems';
 import type { CustomPage } from './customPages';
@@ -55,6 +58,44 @@ import type { UserResource } from './user';
 import type { Autocomplete, DeepPartial, DeepSnakeToCamel } from './utils';
 import type { WaitlistResource } from './waitlist';
 
+type __experimental_CheckoutStatus = 'awaiting_initialization' | 'awaiting_confirmation' | 'completed';
+
+export type __experimental_CheckoutCacheState = Readonly<{
+  isStarting: boolean;
+  isConfirming: boolean;
+  error: ClerkAPIResponseError | null;
+  checkout: CommerceCheckoutResource | null;
+  fetchStatus: 'idle' | 'fetching' | 'error';
+  status: __experimental_CheckoutStatus;
+}>;
+
+export type __experimental_CheckoutOptions = {
+  for?: 'organization';
+  planPeriod: CommerceSubscriptionPlanPeriod;
+  planId: string;
+};
+
+type CheckoutResult =
+  | {
+      data: CommerceCheckoutResource;
+      error: null;
+    }
+  | {
+      data: null;
+      error: ClerkAPIResponseError;
+    };
+
+export type __experimental_CheckoutInstance = {
+  confirm: (params: ConfirmCheckoutParams) => Promise<CheckoutResult>;
+  start: () => Promise<CheckoutResult>;
+  clear: () => void;
+  finalize: (params?: { redirectUrl: string }) => void;
+  subscribe: (listener: (state: __experimental_CheckoutCacheState) => void) => () => void;
+  getState: () => __experimental_CheckoutCacheState;
+};
+
+type __experimental_CheckoutFunction = (options: __experimental_CheckoutOptions) => __experimental_CheckoutInstance;
+
 /**
  * @inline
  */
@@ -795,6 +836,13 @@ export interface Clerk {
    * This API is in early access and may change in future releases.
    */
   apiKeys: APIKeysNamespace;
+
+  /**
+   * Checkout API
+   * @experimental
+   * This API is in early access and may change in future releases.
+   */
+  __experimental_checkout: __experimental_CheckoutFunction;
 }
 
 export type HandleOAuthCallbackParams = TransferableOption &