In my Next JS app, I have an app.tsx page where external scripts are loaded as such
<Head>
<script src="https://js.stripe.com/v3/"></script>
...other scripts and stuff
</Head>
The Stripe() function is loaded with the url, and I can access it's properties that work just fine, like:
Stripe("publishable key").redirectToCheckout({sessionId: 'sessionId'})
But when I attempt to build my app, I get this error:
ReferenceError: Stripe is not defined
And before you ask, the Stripe npm package is for backend code with the non-publishable key, so that won't work. But I need a way of importing the stripe script from the URL while defining the Stripe function so it isn't undefined.
Change Stripe to window.Stripe in your code may fix it