#sabrinalh5

1 messages · Page 1 of 1 (latest)

formal coyoteBOT
#

Hello! We'll be with you shortly. Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

neon narwhal
#

Hello 👋
Can you share more details? Are you working on a React application?
If so, what does your component look like?

#

The errors in the screenshot are quite generic so not sure if it's really coming from the Stripe library or something

edgy marsh
#

Hi! Yes, I am working on a React application. I am trying to allow customers to upload a payment method to use for future payments, without creating a Payment Intent (since they do not intend to pay yet). We are trying to initialize a Payment Element to do this with the mode of "setup" using Next.js and vercel. We are running into TypeScript and initialization issues. We are getting the stripePromise and clientSecret, they both print to the console. However, the payment element is still not rendering, despite following the structure of the example code from the Stripe docs.

image.png
neon narwhal
#

If you take out the Elements code, does the error go away?

edgy marsh
#

No 😦

neon narwhal
#

oh why is your component marked with async ?

#

can you take that out? you can create an async function inside the component

#

just trying to isolate the issue

#

@edgy marsh want to make sure you saw my message above

formal coyoteBOT
edgy marsh
#

Yes, we tried taking out async and hard coding our client secret, that did not work. We have new errors now

neon narwhal
#

Can you share the new errors?

grand marlin
#

Hi Hanzo - we're getting a 401 un-authorized error

#

It has some ids that we're not sure if we can share publicly in a screenshot

edgy marsh
open urchin
#

Stripe object IDs are safe to share, it is your API and webhook secret keys that you don't want o share

#

Not fully sure what may be happening at the moment. Can you share the full text of the URL that this 401 error is happening for?

edgy marsh
open urchin
#

Thank you, looking in to this

#

I am having trouble finding what is happening here. I will reach out to my colleagues and get back to you with what we can find

grand marlin
#

Thank you @open urchin !

idle mortar
#

👋 what do you see when you log out stripePromise within your Page component?

grand marlin
idle mortar
#

Ah wait you are literally loading it with 'key' as your Publishable key

grand marlin
#

^Something like that

idle mortar
#

So you aren't retrieving your Publishable key correctly

#

It should be stripePromise = loadStripe('pk_test_xxxxx')

#

If you are trying to use an environment variable there then you aren't doing that correctly

#

Otherwise it sounds like you may be confused about what a Publishable key is?

grand marlin
#

THANK YOU! we had removed private key when sending you all a screenshot & I guess just forgot to switch it back

idle mortar
#

👍

#

That key is safe to share btw... really anyone can see it from inspecting your site.

#

Just never share your secret key

grand marlin
#

10-4

#

Thanks again for all the help

idle mortar
#

Sure thing

grand marlin
#

One final question - we had hardcoded the client_Secret to just get something to render - when we try to load dynamically from API endpoint it's throwing errors when we try to load dynamically. Any thoughts on how to organize async callbacks so the client secret flows properly into Payment Element?

Screenshot_2024-02-14_at_11.04.56_AM.png
idle mortar
#

Yeah you want a conditional render

#

{clientSecret && (<Elements...

#

Basically wait until you have your client secret to render your Elements provider

grand marlin
#

awseome - thanks!

idle mortar
#

Sure

grand marlin
#

wrapping in conditional render is not rendering anything rn - any thoughts?

Screenshot_2024-02-14_at_11.17.27_AM.png
idle mortar
#

Have you logged out your clientSecret to ensure it is present?

#

Do you see an error in your Console?

#

Are you setting State here?

#

Doens't look like you are doing that above

#

So then a re-render wouldn't happen when clientSecret is set

grand marlin
#

Thanks - I'll migrate to a state variable, right now logging that no clientSecret=undefined