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

Author: panteliselef

.changeset/great-bees-teach.md

@@ -0,0 +1,5 @@
+---
+'@clerk/chrome-extension': patch
+---
+
+Refactor re-exports from `@clerk/clerk-react`.

.changeset/happy-kiwis-peel.md

@@ -0,0 +1,10 @@
+---
+'@clerk/nextjs': minor
+'@clerk/clerk-react': minor
+'@clerk/shared': minor
+---
+
+Export experimental hooks and components for PaymentElement
+- `__experimental_usePaymentElement`
+- `__experimental_PaymentElementProvider`
+- `__experimental_PaymentElement`

.changeset/hot-seas-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Remove `@stripe/react-stripe-js` dependency and only allow loading of stripe-js via `Clerk.__internal_loadStripeJs()`.

.changeset/many-mirrors-vanish.md

@@ -0,0 +1,10 @@
+---
+'@clerk/tanstack-react-start': minor
+'@clerk/react-router': minor
+'@clerk/remix': minor
+---
+
+Export experimental hooks and components for PaymentElement
+- `__experimental_usePaymentElement`
+- `__experimental_PaymentElementProvider`
+- `__experimental_PaymentElement`

.changeset/olive-streets-fall.md

@@ -0,0 +1,5 @@
+---
+'@clerk/types': minor
+---
+
+Add `__internal_loadStripeJs` in Clerk interface.

packages/clerk-js/bundlewatch.config.json

@@ -4,9 +4,10 @@
     { "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": "110KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "111.8KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
+    { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
     { "path": "./dist/impersonationfab*.js", "maxSize": "5KB" },
     { "path": "./dist/organizationprofile*.js", "maxSize": "10KB" },
@@ -21,9 +22,8 @@
     { "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/up-billing-page*.js", "maxSize": "3.5KB" },
+    { "path": "./dist/checkout*.js", "maxSize": "8.34KB" },
+    { "path": "./dist/up-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/op-billing-page*.js", "maxSize": "3.0KB" },
     { "path": "./dist/up-plans-page*.js", "maxSize": "1.0KB" },
     { "path": "./dist/op-plans-page*.js", "maxSize": "1.0KB" },

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,6 @@ 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'))
-              ),
-          },
           common: {
             minChunks: 1,
             name: 'ui-common',

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

@@ -645,6 +645,16 @@ export class Clerk implements ClerkInterface {
       .then(controls => controls.closeModal('blankCaptcha'));
   };
 
+  public __internal_loadStripeJs = async () => {
+    if (__BUILD_DISABLE_RHC__) {
+      clerkUnsupportedEnvironmentWarning('Stripe');
+      return { loadStripe: () => Promise.resolve(null) };
+    }
+
+    const { loadStripe } = await import('@stripe/stripe-js');
+    return loadStripe;
+  };
+
   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();