#george_code
fair basaltBOT
đź‘‹ Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
đź”— This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1263434569357590621
đź“ť Have more to share? Add more details, code, screenshots, videos, etc. below.
copper cave
hi! your approach seems good to me.
daring ibex
Does this still follow the rule from Stripe, defined here? It specifically says to load it outside of the component render
// Make sure to call loadStripe outside of a component’s render to avoid
// recreating the Stripe object on every render.
// This is your test publishable API key.
const stripePromise = loadStripe("pk_test_...");
copper cave
not sure sorry. Let me ask someone else on my team
daring ibex
Thank you
copper cave
ok apparently someone pointed out https://github.com/vercel/next.js/blob/canary/examples/with-stripe-typescript/utils/get-stripejs.ts as an example of loading the library as a singleton if that helps
daring ibex
Yes, but that does not use useEffect 🙂
And I am trying to understand why do I need to handle stripe being null from useStripe
copper cave
And I am trying to understand why do I need to handle `stripe` being null from `...
because
https://docs.stripe.com/stripe-js/react#usestripe-hook
Note that if you pass a Promise to the Elements provider and the Promise hasn’t yet resolved, then useStripe will return null.
daring ibex
Even in the docs you can see it's kinda handled:
export default function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const [message, setMessage] = useState(null);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if (!stripe) {
return; // < -------------- Here
}
Yeah, that's what I am trying to say. stripe migth be null due to the promise still being resolved or maybe something is wrong. How can I track that something is wrong with stripe in this way? I assumed that stripe being null means that it wasn't loaded for some reason
copper cave
AFAIR the promise returned by loadStripe can reject if there was an error.