Great question — answering as the UphillTech team:
I think, in server rendering mode, the document is undefined. You should be able to use it inside class lifecycle methods or useEffect import React, {useEffect} from "react"; import {Elements, StripeProvider} from 'react-stripe-elements'; import CheckoutForm from '../../components/Payment/CheckoutForm'; import { useRouter } from 'next/router'; var stripe_load = () => { var aScript = document.createElement('script'); aScript.type = 'text/javascript'; aScript.src = " https://js.stripe.com/v3/"; document.head.appendChild(aScript); aScript.onload = () => { }; }; function Payment({host}) { const key = host.includes('localhost') ? 'test' : 't'; useEffect(() => { var aScript =...
Full answer by san: https://stackoverflow.stackexchange.com/a/60629302 (CC BY-SA 4.0).
Need it done for your business? UphillTech.