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

.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();

.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();

.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();

.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();

.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();

.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();

.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();

.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();