#brooker
dawn schooner
Hello! So when this code runs what happens?
timid frost
I get a "loading stripe" alert, then nothing happens.
pale karmaBOT
timid frost
No console errors, there's just a <div></div> where we have the <PaymentElement />
It seems like loadStripe is just not resolving or failing, so everything is just hanging.
acoustic urchin
What are you expecting to happen?
presumably that setStripeThing gets called and your elements are initialized?
timid frost
I'm expecting an alert with stripe loaded to pop up and the <PaymentElement/> to render
With credit card inputs and whatnot
Alternatively, if I just pass elements the promise rather than the promise result, it also does nothing.
acoustic urchin
Does anything change if you use console.log instead of alert?
timid frost
This is what we were doing, but it also wasn't working. Just seems like the promise is hanging. https://stripe.com/docs/stripe-js/react#elements-provider
Same result with console.log. That code isn't getting called.
Also, this seems to be a new occurance within the last week. It might have started happening either July 22 or July 25. We had success with this before that. But, our end users started experiencing issues recently.
When I run locally, it consistently is not resolving ever. I do have a heap session replay of an end user failing to load the payment element, then refreshing, then it working after they refresh.
acoustic urchin
And you're not seeing the .then((stripe) => { block hit at all?
timid frost
correct
acoustic urchin
Can you try something like setStripeThing(loadStripe(pk))?
timid frost
gggg
Sorry, yeah, just tried that and it's still just giving us the <div></div>
That's closer to what we originally had that wasn't working. So, we tried resolving the promise to troubleshoot and noticed it wasn't resolving. So, our guess is that it's hanging which is causing the elements to not render.
It's not even making a request to stripe in the network tab
acoustic urchin
This is basically exactly wht i already do in my example here: https://glitch.com/edit/#!/react-stripe-js-defer-elements?path=src%2Fpages%2Fpayment.jsx%3A41%3A12
Demo live here: https://react-stripe-js-defer-elements.glitch.me/payment
SOmething else must be happening that prevents this from working like you expect
Do you have this online somewhere I can visit?
If you inspect your network logs, do you see the request to load Stripe.js? (https://js.stripe.com/v3)
acoustic urchin
Ok, then something is very broken
If Stripe.js is not being loaded, that would be why loadStripe can't resolve -- is loadStripe even defined for you?
pale karmaBOT