#_code
somber bronzeBOT
👋 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/1224776097879822479
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
loud etherBOT
thick panther
Hello! Is this the guide you're following? https://docs.stripe.com/payments/accept-a-payment?platform=web&ui=elements&client=react
tribal wedge
not that exact page but a similar process on the same docs
i can start reading through that, i have like 10 different docs tabs open so im not following any one thing perfectly
my goal is to get a paymentmethod token on the frontend & send that to backend for storage
i think i may need a setupintent for that
thick panther
Do you want to take a payment when you collect the payment info?
Or only save the info and charge later?
tribal wedge
in this case, save the info, since this is only account creation
then when the user is ready to make a reservation then they will pay, using the paymentmethod token stored
thick panther
Ah, okay, you want this guide then: https://docs.stripe.com/payments/save-and-reuse?platform=web&ui=elements&client=react
tribal wedge
does this make sense on the frontend?
thick panther
We can't provide code reviews or tell you what will happen when your code runs here. Happy to answer specific questions about errors or issues with code though!
tribal wedge
okay, I tried to get it to fit the tutorial better & as of rn im getting this error
thick panther
What's the code that throws that error?
tribal wedge
thick panther
That's a pretty generic error, but it's probably something to do with your imports. Have a look at some of the answers here: https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string
Do any of those sound like they might be the fix?
tribal wedge
my imports here
i'll look now, ty
thick panther
Ah, I think you might need this instead:
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
import SetupForm from './SetupForm';
oh okay thx
maybe im confused - is setup form not given by stripe? like is that just a placeholder for my own code?
thick panther
Yeah, it's your form. There's sample code a the link above. Look at the second code snippet there.
It's not in the library/SDK, it's code you write or use from the guide.
loud etherBOT
tribal wedge
ohhh alright
i have a form for collecting data from frontend already one sec
this is working now & it's currently wrapped in the elements thing i made
am i on the right track there?
split obsidian
👋 taking over as rubeus needs to step away soon
tribal wedge
gotchu - im looking further down the tutorial & it looks like maybe im not quite on the right track
i need this instead of my premade form, yes?
split obsidian
Yeah. Can I ask what exactly are you trying to integrate? The docs Rubeus shared is to add PaymentElement (Stripe provided payment form) to your page.
Are you trying to add your own form?
i need this instead of my premade form, yes?
yup, correct
Our APIs don't allow passing raw card information that you collect using your own form for security reasons
tribal wedge
yeah sorry, so my main goal rn is for a rental service, creating an account for a customer, we want to save a payment method so that the customer can later pay for reservations
i'm trying to do whatever i need to do to make that happen, I just don't know react well & frontend on my team isnt able to help out
(I'm the backend guy)
split obsidian
Gotcha. The doc Rubeus shared above has a step by step guide on how you can integrate PaymentElement.
I'd recommend reading it fully as it will clear up any confusion you might have.
split obsidian
You need to pass the client secret value that you've retrieved in the previous step
https://docs.stripe.com/payments/save-and-reuse?platform=web&ui=elements&client=react&lang=node#retrieve-the-client-secret
tribal wedge
i do
maybe its bc it's async or something
the client secret thing has probably been my biggest roadblock/confusion so i may be using it improperly
my backend is also showing my secret function being called twice
our frontend rerenders stuff b/c of react, i think
frontend guy said it's fine, but this might be an issue too
split obsidian
Do you have the fetch request inside a React component? In which case the endpoint is likely being called twice due to re-render
split obsidian
Cool, so PaymentElement shows up now
split obsidian
PaymentElement doesn't come with a button. Something in your code is adding the button
tribal wedge
nvm it was from the tutorial, found it
split obsidian
Do you have any additional questions? If not, I'll go ahead and close the thread
tribal wedge
sorry - i've just paused development as i have a class, I'll probably have questions as I work on returning the info back to the server and using it for payments but if you guys have a fast turnover you can close this & i'll open a new one when i work again