#max-react-error
velvet path
hmm let me quickly make a vercel deployment for you
velvet path
<@456226577798135808> do you have a URL I can look at?
click on basket top right
then the stripe logic should get triggered
modern token
looking
velvet path
thanks
modern token
@tall oar is taking over and investigating
velvet path
thanks guys
tall oar
Hi there, give me a sec to get caught up
tall oar
So it looks like your app is successfully GETing the Elements Session: https://dashboard.stripe.com/test/logs/iar_V8xpMlmChaYmE6
That's what I would expect based on what little is rendering.
velvet path
So it looks like your app is successfully GETing the Elements Session: https://d...
hmm okay so looks good from stipe perspective
so maybe the loading state is nto getting updated?
loading to => done
tall oar
Could be. Give that a shot
velvet path
Could be. Give that a shot
should get that from the useElement hook no?
tall oar
Real quick: have you been able to get this to load outside of an i-frame?
Ah, wait. Nvm. This isn't an i-frame
velvet path
Ah, wait. Nvm. This isn't an i-frame
well I gues the PaymentElement is an iframe no?
the PaymentElement fires the onLoarderStart event but never the onReady event
maybe Im feeding the wrong stripe secret in to the load stripe function? pk_test_51NmiGnK... is the correct one no?
tall oar
I assume that's in the right place, since it's reaching your Stripe account (i.e. you have request logs in your account showing that the request was successful).
Can you do a console.log(); of the client secret to make sure it's actually there?
velvet path
Can you do a ` console.log();` of the client secret to make sure it's actually t...
yep its there
It's showing in the network log that, but I wonder if it's actually present when the form renders
velvet path
{clientSecret && (
<Elements stripe={getStripe()} options={{ clientSecret }}>
{modalContent}
</Elements>
)}
thats the logic
so I would assume
otherwise I would get an error when elements dont have a client secret and me trying to use a <PaymentElement />
also I see some PaymentIntents in my dashboard so on this side we are good
mellow needleBOT
velvet path
Ah, wait. Nvm. This isn't an i-frame
Im suspecting an Iframe issue. Because of some CSP configuration, next js is blocking the request to js.stripe.com
but dont see anything in the network tab
tall oar
Can you try loading it outside of a flex container and also outside of an i-frame to see if that changes anything?
tall oar
Right, I thought you meant you had implemented an i-frame that I had missed during my once-over of the HTML. Scratch that then
velvet path
no worries mate
tall oar
Do you have access to view/modify the CSP of this app? Can you check to make sure i-frames are not being blocked?
velvet path
oh wow I got it
tall oar
Oh?
velvet path
the error was because I injected my modal right afgter the html element
<html lang="en">
<ModalContextProvider>
<Providers>
<body className={inter.className}>{children}</body>
</Providers>
</ModalContextProvider>
</html>
Warning: validateDOMNesting(...): <div> cannot appear as a child of <html>.
which makes sense
but this error was throwing off stripe
tall oar
Ah! Man... I can't believe I missed that too.
velvet path
now with the body directly under the HTML ```
<html lang="en">
<body className={inter.className}>
<ModalContextProvider>
<Providers>{children}</Providers>
</ModalContextProvider>
</body>
</html>
its all good
stupid me
well anyway. Thanks for the support 🙂
tall oar
It's always the simplest answers that require the deep-dives 🤦♀️
Anyway, I'm glad you got it working!