WIP commerce custom flows

.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

.changeset/twelve-yaks-love.md

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

integration/tests/pricing-table.test.ts

@@ -309,7 +309,9 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withBilling] })('pricing tabl
       });
       await u.po.checkout.clickPayOrSubscribe();
       await expect(u.po.page.locator('.cl-checkout-root').getByText('The card was declined.').first()).toBeVisible();
-      await u.po.checkout.waitForStipeElements();
+      // It should unmount and remount the payment element
+      await u.po.checkout.waitForStipeElements({ state: 'hidden' });
+      await u.po.checkout.waitForStipeElements({ state: 'visible' });
       await u.po.checkout.fillTestCard();
       await u.po.checkout.clickPayOrSubscribe();
       await expect(u.po.page.locator('.cl-checkout-root').getByText('Payment was successful!')).toBeVisible();

package.json

@@ -33,7 +33,7 @@
     "test:integration:ap-flows": "pnpm test:integration:base --grep @ap-flows",
     "test:integration:astro": "E2E_APP_ID=astro.* pnpm test:integration:base --grep @astro",
     "test:integration:base": "pnpm playwright test --config integration/playwright.config.ts",
-    "test:integration:billing": "E2E_APP_ID=withBilling.* pnpm test:integration:base --grep @billing",
+    "test:integration:billing": "E2E_APP_ID=withBilling.next.appRouter pnpm test:integration:base --grep @billing",
     "test:integration:cleanup": "pnpm playwright test --config integration/playwright.cleanup.config.ts",
     "test:integration:deployment:nextjs": "pnpm playwright test --config integration/playwright.deployments.config.ts",
     "test:integration:elements": "E2E_APP_ID=elements.* pnpm test:integration:base --grep @elements",

packages/clerk-js/bundlewatch.config.json

@@ -7,6 +7,7 @@
     { "path": "./dist/ui-common*.js", "maxSize": "110KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
+    { "path": "./dist/stripe-vendors*.js", "maxSize": "5.54KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
     { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
     { "path": "./dist/organizationprofile*.js", "maxSize": "12KB" },
@@ -21,8 +22,7 @@
     { "path": "./dist/waitlist*.js", "maxSize": "1.5KB" },
     { "path": "./dist/keylessPrompt*.js", "maxSize": "6.5KB" },
     { "path": "./dist/pricingTable*.js", "maxSize": "4.02KB" },
-    { "path": "./dist/checkout*.js", "maxSize": "7.3KB" },
-    { "path": "./dist/paymentSources*.js", "maxSize": "9.17KB" },
+    { "path": "./dist/checkout*.js", "maxSize": "8.30KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/sessionTasks*.js", "maxSize": "1.5KB" }

packages/clerk-js/package.json

@@ -69,7 +69,6 @@
     "@floating-ui/react": "0.27.12",
     "@floating-ui/react-dom": "^2.1.3",
     "@formkit/auto-animate": "^0.8.2",
-    "@stripe/react-stripe-js": "3.1.1",
     "@stripe/stripe-js": "5.6.0",
     "@swc/helpers": "^0.5.17",
     "@zxcvbn-ts/core": "3.0.4",

packages/clerk-js/rspack.config.js

@@ -81,6 +81,7 @@ const common = ({ mode, variant, disableRHC = false }) => {
      * Necessary to prevent the Stripe dependencies from being bundled into
      * SDKs such as Browser Extensions.
      */
+    // TODO: @COMMERCE:  Do we still need this?
     externals: disableRHC ? ['@stripe/stripe-js', '@stripe/react-stripe-js'] : undefined,
     optimization: {
       splitChunks: {
@@ -100,6 +101,12 @@ const common = ({ mode, variant, disableRHC = false }) => {
             name: 'coinbase-wallet-sdk',
             chunks: 'all',
           },
+          stripeVendor: {
+            test: /[\\/]node_modules[\\/](@stripe\/stripe-js)[\\/]/,
+            name: 'stripe-vendors',
+            chunks: 'all',
+            enforce: true,
+          },
           /**
            * Sign up is shared between the SignUp component and the SignIn component.
            */
@@ -108,17 +115,11 @@ const common = ({ mode, variant, disableRHC = false }) => {
             name: 'signup',
             test: module => !!(module.resource && module.resource.includes('/ui/components/SignUp')),
           },
-          paymentSources: {
-            minChunks: 1,
-            name: 'paymentSources',
-            test: module =>
-              !!(
-                module.resource &&
-                (module.resource.includes('/ui/components/PaymentSources') ||
-                  // Include `@stripe/react-stripe-js` and `@stripe/stripe-js` in the checkout chunk
-                  module.resource.includes('/node_modules/@stripe'))
-              ),
-          },
+          // paymentSources: {
+          //   minChunks: 1,
+          //   name: 'paymentSources',
+          //   test: module => !!(module.resource && module.resource.includes('/ui/components/PaymentSources')),
+          // },
           common: {
             minChunks: 1,
             name: 'ui-common',

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

@@ -136,6 +136,8 @@ import type { FapiClient, FapiRequestCallback } from './fapiClient';
 import { createFapiClient } from './fapiClient';
 import { createClientFromJwt } from './jwt-client';
 import { APIKeys } from './modules/apiKeys';
+import type { CheckoutFunction } from './modules/checkout';
+import { createCheckoutInstance } from './modules/checkout';
 import { CommerceBilling } from './modules/commerce';
 import {
   BaseResource,
@@ -195,6 +197,7 @@ export class Clerk implements ClerkInterface {
   };
   private static _billing: CommerceBillingNamespace;
   private static _apiKeys: APIKeysNamespace;
+  private _checkout: CheckoutFunction | undefined;
 
   public client: ClientResource | undefined;
   public session: SignedInSessionResource | null | undefined;
@@ -337,6 +340,13 @@ export class Clerk implements ClerkInterface {
     return Clerk._apiKeys;
   }
 
+  get checkout() {
+    if (!this._checkout) {
+      this._checkout = params => createCheckoutInstance(this, params);
+    }
+    return this._checkout;
+  }
+
   public __internal_getOption<K extends keyof ClerkOptions>(key: K): ClerkOptions[K] {
     return this.#options[key];
   }
@@ -645,6 +655,11 @@ export class Clerk implements ClerkInterface {
       .then(controls => controls.closeModal('blankCaptcha'));
   };
 
+  public __internal_loadStripeJs = async () => {
+    const { loadStripe } = await import('@stripe/stripe-js');
+    return loadStripe;
+  };
+
   public openSignUp = (props?: SignUpProps): void => {
     this.assertComponentsReady(this.#componentControls);
     if (sessionExistsAndSingleSessionModeEnabled(this, this.environment)) {
@@ -1120,6 +1135,7 @@ export class Clerk implements ClerkInterface {
    */
   public setActive = async ({ session, organization, beforeEmit, redirectUrl }: SetActiveParams): Promise<void> => {
     this.__internal_setActiveInProgress = true;
+    console.log('session provided', session, redirectUrl);
     try {
       if (!this.client) {
         throw new Error('setActive is being called before the client is loaded. Wait for init.');
@@ -1146,6 +1162,7 @@ export class Clerk implements ClerkInterface {
       }
 
       let newSession = session === undefined ? this.session : session;
+      console.log('newSession', newSession?.id);
 
       // At this point, the `session` variable should contain either an `SignedInSessionResource`
       // ,`null` or `undefined`.