chore(clerk-js, shared): Create experimental PaymentElement

.changeset/twelve-yaks-love.md

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

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.25KB" },
-    { "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/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,11 @@ const common = ({ mode, variant, disableRHC = false }) => {
             name: 'coinbase-wallet-sdk',
             chunks: 'all',
           },
+          stripeVendor: {
+            test: /[\\/]node_modules[\\/](@stripe\/stripe-js|@stripe\/react-stripe-js)[\\/]/,
+            name: 'stripe-vendors',
+            chunks: 'all',
+          },
           /**
            * Sign up is shared between the SignUp component and the SignIn component.
            */
@@ -108,17 +114,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

@@ -645,6 +645,19 @@ export class Clerk implements ClerkInterface {
       .then(controls => controls.closeModal('blankCaptcha'));
   };
 
+  public __internal_loadStripeLibs = () => {
+    return {
+      async javascript(): Promise<unknown> {
+        const { loadStripe } = await import('@stripe/stripe-js');
+        return loadStripe;
+      },
+      async react(): Promise<unknown> {
+        const { Elements, PaymentElement, useElements, useStripe } = await import('@stripe/react-stripe-js');
+        return { Elements, PaymentElement, useElements, useStripe };
+      },
+    };
+  };
+
   public openSignUp = (props?: SignUpProps): void => {
     this.assertComponentsReady(this.#componentControls);
     if (sessionExistsAndSingleSessionModeEnabled(this, this.environment)) {

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

@@ -5,7 +5,6 @@ import type {
   CommercePaymentSourceResource,
   ConfirmCheckoutParams,
 } from '@clerk/types';
-import type { SetupIntent } from '@stripe/stripe-js';
 import { useMemo, useState } from 'react';
 
 import { Card } from '@/ui/elements/Card';
@@ -146,25 +145,18 @@ const useCheckoutMutations = () => {
     }
   };
 
-  const payWithExistingPaymentSource = async (e: React.FormEvent<HTMLFormElement>) => {
+  const payWithExistingPaymentSource = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     const data = new FormData(e.currentTarget);
     const paymentSourceId = data.get('payment_source_id') as string;
 
-    await confirmCheckout({
+    return confirmCheckout({
       paymentSourceId,
-      ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
     });
   };
 
-  const addPaymentSourceAndPay = async (ctx: { stripeSetupIntent?: SetupIntent }) => {
-    await confirmCheckout({
-      gateway: 'stripe',
-      paymentToken: ctx.stripeSetupIntent?.payment_method as string,
-      ...(subscriberType === 'org' ? { orgId: organization?.id } : {}),
-    });
-  };
+  const addPaymentSourceAndPay = (ctx: { gateway: 'stripe'; paymentToken: string }) => confirmCheckout(ctx);
 
   const payWithTestCard = async () => {
     card.setLoading();