diff --git a/.changeset/modern-trees-begin.md b/.changeset/modern-trees-begin.md new file mode 100644 index 0000000000..8b55fe03aa --- /dev/null +++ b/.changeset/modern-trees-begin.md @@ -0,0 +1,5 @@ +--- +'hive': patch +--- + +Prevent stripe.js from loading automatically diff --git a/packages/web/app/src/lib/billing/stripe.tsx b/packages/web/app/src/lib/billing/stripe.tsx index c28823b313..7e308e8a8f 100644 --- a/packages/web/app/src/lib/billing/stripe.tsx +++ b/packages/web/app/src/lib/billing/stripe.tsx @@ -1,7 +1,11 @@ import { FC, ReactNode, Suspense, useState } from 'react'; import { env } from '@/env/frontend'; import { Elements as ElementsProvider } from '@stripe/react-stripe-js'; -import { loadStripe } from '@stripe/stripe-js'; +// Why not @stripe/stripe-js? +// `loadStrip` from the main entry loads Stripe.js before the function is called. +// Yes, you are as confused as I am. +// The `loadStrip` from `/pure` fixes this issue. +import { loadStripe } from '@stripe/stripe-js/pure'; import { getStripePublicKey } from './stripe-public-key'; export const HiveStripeWrapper: FC<{ children: ReactNode }> = ({ children }) => { @@ -10,14 +14,18 @@ export const HiveStripeWrapper: FC<{ children: ReactNode }> = ({ children }) => if (env.nodeEnv !== 'production') { return; } + const stripePublicKey = getStripePublicKey(); - if (stripePublicKey) { - return loadStripe(stripePublicKey); + + if (!stripePublicKey) { + return; } + + return loadStripe(stripePublicKey); }); if (!stripe) { - return children as any; + return children; } return (