Stripe + NextJs - window is not defined

Question

I'm trying to use Stripe in NextJs https://github.com/stripe/react-stripe-elements/blob/master/README.md#server-side-rendering-ssr

I keep getting the error "window is not defined". Am I missing something? The code is at the link above.

Answer 1

"window is not defined" is shown due to the fact that your code is server-side rendered and can't access the global window object because that is something only a client will understand. move your code inside lifecycle methods as they run only on the client-side .

Answer 2

Another option is to use a dynamic import for the Stripe component and disable SSR.

StripeForm component file (export as default)
component/StripeForm.tsx

Import it dynamically in pages/stripe like so

const StripeForm = dynamic(() => import("../components/StripeForm"), { ssr: false } )

return (
   ...
   <StripeForm />
   ...
)