#Berci
main jasper
royal scaffold
Hi 👋 can you tell us more about your problem?
placid sand
Hello!
This is my code, I should see the payment element on the 3rd picture, but I see the 2nd picutre. Can you help with it?
My goal is to make a checkout system like this to my website, but I'm unable to do it:
@royal scaffold Thanks for your help
I'm following tutorials but none of those look like the last picture I sent
royal scaffold
Are you encountering any errors on either your browser console or in your server-side logs?
placid sand
one moment, I check it
This is what I see
But the other problem with this code, that it doesn't have apple pay option etc. because my main goal would be to make a payment gateway like in the 4th picture.
But I don't have any experience with this, sorry about it, I'm really trying for hours now
royal scaffold
Right now it looks like your frontend and backend are not communicating with each other correctly.
It looks like your frontend is making a fetch to your /secret endpoint, and is expecting to receive JSON data back form that. However, your backend seems to be responding with HTML instead of JSON.
placid sand
I see
royal scaffold
Oh, actually it looks like the fetch to that endpoint may have returned a 404 instead. Did you stand up a backend server for this project?
placid sand
no, I just wrote npm start to the terminal
but if it's compliacted to see the problem without seeing the whole code, if you could give me any advice how can I copy this payment gateway, I'd be very grateful:
royal scaffold
That's our Payment Element, that's what you're working towards. The problem is fairly easy to spot from the browser logs that you shared, but the cause of that problem is going to be deeper down and you as the owner/maintainer of that code are the best person to get to the bottom of the problem.
If you're instead looking for one of our guides that walks through how to accept a payment, then I would recommend this one:
https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements
It walks through the necessary steps, and has tags on each step to indicate whether that section is client-side (frontend) code or server-side (backend) code.
placid sand
Okay, I will try to make the system with this tutorial. Can we please leave this channel open at least for today? Thank you 🙂
royal scaffold
Sorry, but we won't be able to leave it open for a day. I'll leave it open for a while though, but if it does get closed and you run into problems/questions, then you can raise those in #dev-help.
royal scaffold
Happy to help, wishing you the same!
placid sand
Thank you!
royal scaffold
Sure
placid sand
I'm stuck at this part:
I don't have a server yet, and I don't know where should I paste this code
lament moss
You will need some kind of server to run that on. You can try running a local server in your favorite language or there are sites like glitch.me that let you test out code on their servers for free and can give you a public URL
placid sand
under local server you mean the window localhost:4242?
that's running on a local server?
I'm following this tutorial: https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements#affirm
What I did so far is I opened my website files in VS code and in the terminal I ran "npm install stripe --save"
But on the picture the code, I don't know where to paste it
wooow
I downloaded a premade sample
So now I have to copy this somehow to my website. How can I integrate this? I should copy all the files?
royal scaffold
That code will be pasted in the code that is running on your server. If you do not yet have a server, then you will need to gain access to one (typically by either standing up your own or renting access to one from a hosting provider).
We won't know exactly where you need to put the code from the sample project that you downloaded, that depends on the structure of your server and the sample project that you downloaded.
royal scaffold
Any time!
placid sand
Sorry, I just have one more question
So I want to get a custom information from the customer (their username from a platofrm exactly). Is there a way I can require this information at the checkout?
royal scaffold
Not with the Payment Element, that element only collects the information necessary for the type of payment method that was selected.
If you want to capture additional information, then you will need to add your own fields to your checkout experience to collect to do so.
placid sand
Okay, thank you! Hopefully I won't bother you again 😄