#neelykartha-loadStripe-cardElement

1 messages · Page 1 of 1 (latest)

plucky sable
#

Hello 👋
Can you check if you see any errors or network request failures in your console or the network tab?

jagged vigil
#

thanks for your quick response. there are no console errors. in the network tab, i see m.stripe.com responds with a 200.

plucky sable
#

Interesting. Could you check if those how long those network requests are taking? You could also just send a screenshot here

jagged vigil
plucky sable
#

can you check the timing of the requests made to stripe?

jagged vigil
#

the above is the timing for the post request to https://m.stripe.com/6

plucky sable
#

is your QA site public?

jagged vigil
#

ah no it isnt

plucky sable
#

Ah gotcha. No worries. Let me see what I can dig up on this

jagged vigil
#

thank you!

#

when its not working, the request to https://r.stripe.com/0 never happens. its only to https://m.stripe.com/6 and nothing else happens.

when it does work, i see requests to both

tidal onyx
#

Hello! I'm taking over and catching up now...

#

You mentioned you're logging and stripe is null. Can you provide the code showing Stripe initialization and the logging in question?

jagged vigil
tidal onyx
#

Where is StripeAddPaymentMethodForm being called?

jagged vigil
#

export default React.forwardRef(StripeAddPaymentMethodForm);

its the default export and we use it throughout the site.

stripePromise logs as pending the times that the Cardelement doesnt load.

i use const stripe = useStripe() in the SelectPaymentType component and that is where stripe logs as null

tidal onyx
#

Are you waiting for the stripePromise to resolve before calling StripeAddPaymentMethodForm?

#

If you're not you're probably hitting a race condition where sometimes the promise resolves in time but sometimes it doesn't.

jagged vigil
#

seems like that's necessary for the elements to load?

tidal onyx
#

That request is not required, it's part of fraud/analytics and you should ignore it.

jagged vigil
#

i did wrap the whole StripeAddPaymentMethodForm if (stripePromise) and i also did
const stripePromise = loadStripe(stripeAPIKEY).then((resp) => resp).catch(() => null);

#

and the intermittent issue still persists

#

the docs don't indicate that is necessary - to manage the loadStripe race condition from what i could see

tidal onyx
#

That's not how promises work. The stripePromise will always exist, but it may not be resolved yet. You would need to do either async/await code or .then() to make sure the promise has resolved before continuing.

#

Which docs are you looking at?

jagged vigil
#

i did do the .then

const stripePromise = loadStripe(stripeAPIKEY).then((resp) => resp).catch(() => null);