[Resolved] [Stripe] Docs on how to create a fully custom checkout page ?
Answered
Savannah posted this in #help-forum
SavannahOP
Hi, does anyone have a link to a good tutorial (or even the official stripe doc) explaining how to create a 100% custom checkout page? I get very lost in the stripe doc, too many things that are unrelated in my opinion. What's more, the tutorials I look at on the Internet all redirect me to stripe's basic checkout page.
Answered by B33fb0n3
I like this guide: https://docs.stripe.com/payments/quickstart?client=next
But you can also build your own configuration. Just keep in mind: you need to create somewhere a paymentintent and your also want to confirm the paymentintent with the entered details somewhere.
Confirming can be done serverside or clientside and that also via multiple possible options (you can choose one). One example for collecting client data can be confirmation tokens, another by just creating a payment method and save the id or you can confirm it clientside by using the elements provider (like you see in the linked doc), ...
Keep in mind the basic behavior: somewhere, somewhen a paymentintent need to be created and somewhere, somewhen it need to be confirmed.
But you can also build your own configuration. Just keep in mind: you need to create somewhere a paymentintent and your also want to confirm the paymentintent with the entered details somewhere.
Confirming can be done serverside or clientside and that also via multiple possible options (you can choose one). One example for collecting client data can be confirmation tokens, another by just creating a payment method and save the id or you can confirm it clientside by using the elements provider (like you see in the linked doc), ...
Keep in mind the basic behavior: somewhere, somewhen a paymentintent need to be created and somewhere, somewhen it need to be confirmed.
69 Replies
@Savannah Hi, does anyone have a link to a good tutorial (or even the official stripe doc) explaining how to create a 100% custom checkout page? I get very lost in the stripe doc, too many things that are unrelated in my opinion. What's more, the tutorials I look at on the Internet all redirect me to stripe's basic checkout page.
I like this guide: https://docs.stripe.com/payments/quickstart?client=next
But you can also build your own configuration. Just keep in mind: you need to create somewhere a paymentintent and your also want to confirm the paymentintent with the entered details somewhere.
Confirming can be done serverside or clientside and that also via multiple possible options (you can choose one). One example for collecting client data can be confirmation tokens, another by just creating a payment method and save the id or you can confirm it clientside by using the elements provider (like you see in the linked doc), ...
Keep in mind the basic behavior: somewhere, somewhen a paymentintent need to be created and somewhere, somewhen it need to be confirmed.
But you can also build your own configuration. Just keep in mind: you need to create somewhere a paymentintent and your also want to confirm the paymentintent with the entered details somewhere.
Confirming can be done serverside or clientside and that also via multiple possible options (you can choose one). One example for collecting client data can be confirmation tokens, another by just creating a payment method and save the id or you can confirm it clientside by using the elements provider (like you see in the linked doc), ...
Keep in mind the basic behavior: somewhere, somewhen a paymentintent need to be created and somewhere, somewhen it need to be confirmed.
Answer
@B33fb0n3 I like this guide: https://docs.stripe.com/payments/quickstart?client=next
But you can also build your own configuration. Just keep in mind: you need to create somewhere a paymentintent and your also want to confirm the paymentintent with the entered details somewhere.
Confirming can be done serverside or clientside and that also via multiple possible options (you can choose one). One example for collecting client data can be confirmation tokens, another by just creating a payment method and save the id or you can confirm it clientside by using the elements provider (like you see in the linked doc), ...
Keep in mind the basic behavior: somewhere, somewhen a paymentintent need to be created and somewhere, somewhen it need to be confirmed.
SavannahOP
Thanks for your quick reply! I'll check it out tomorrow when I work on it! Would you allow me to come back to you once I've finished my checkout page so that you can give me your opinion on how to do it, so that I know if it's right or not?
@Savannah Thanks for your quick reply! I'll check it out tomorrow when I work on it! Would you allow me to come back to you once I've finished my checkout page so that you can give me your opinion on how to do it, so that I know if it's right or not?
Yea, it would help me, when you show me your repo/github project. Like that I can give you my clear opinion. Either invite me or you may have a public repo. You can ping me whenever you want inside this thread when it’s open
@B33fb0n3 Yea, it would help me, when you show me your repo/github project. Like that I can give you my clear opinion. Either invite me or you may have a public repo. You can ping me whenever you want inside this thread when it’s open
SavannahOP
Hey man ! Have you already succeeded with this tuto?
@Savannah Hey man ! Have you already succeeded with this tuto?
I created my own version of it, yes
@B33fb0n3 I created my own version of it, yes
SavannahOP
I can't get it to work, I've got exactly the same thing as on the tutorial, but the form doesn't want to be displayed. And tbh, idk what's is wrong with my code x)
SavannahOP
The only difference between the two codes is that my stripe & elements variables are always "null", whereas they have a value, but I don't understand what's different.
Mine :
Theirs :
Are you able to share a repo of your code?
@B33fb0n3 Are you able to share a repo of your code?
SavannahOP
Tbh, It's going to be complicated, it's a project for a client, I don't know if I really have the right to share it. However, I can show you the code as a screenshare if that's okay with you?
You can also create a repo on codesandbox.io or something else, that shows only the stripe part. Make sure, that you only expose publishable secrets, if you share them
SavannahOP
Yep, didn't think about it ^^
Here you are @B33fb0n3 : https://codesandbox.io/p/sandbox/next-js-forked-gy6psf
@B33fb0n3 You can also create a repo on codesandbox.io or something else, that shows only the stripe part. Make sure, that you only expose publishable secrets, if you share them
SavannahOP
There's something I find odd. The payments are created even though I never clicked on the buy button (which I can't do because I don't even have the form xD).It only seems to happen when the page is loaded.
I've never set a price, but they all set themselves.
Should we create the form ourselves ?
(this one)
And, when the user press the btn to buy, we trigger the paymentIntent ?
@Savannah Here you are <@301376057326567425> : https://codesandbox.io/p/sandbox/next-js-forked-gy6psf
I just checked this repo and it seems like, that the secret stripe key is missing to create the paymentintent. With no paymentintent there is no clientsecret and with no secret there are no elements
@B33fb0n3 I just checked this repo and it seems like, that the secret stripe key is missing to create the paymentintent. With no paymentintent there is no clientsecret and with no secret there are no elements
SavannahOP
Yeah, I didn’t put the secret key on the repo
But, on my projet, i have the client secret
I console.log it, and it return me the client secret
But what did you think about my questions up ?
@Savannah Should we create the form ourselves ?
SavannahOP
.
@Savannah But what did you think about my questions up ?
yes. For me it seems like we already build the form. And inside the form the payment element is integrated. Like that you can get the paymentdetails securely to stripe, but still confirm the paymentintent clientside. So the form is there and you need to use the paymentelement yourself to have the security on your side
I had a little bit of debug to find whats missing and up to now it's only the secret key. If it still does not work I would try to follow the path where the data comes from and where it goes. You might also want to do that
I had a little bit of debug to find whats missing and up to now it's only the secret key. If it still does not work I would try to follow the path where the data comes from and where it goes. You might also want to do that
@B33fb0n3 yes. For me it seems like we already build the form. And inside the form the payment element is integrated. Like that you can get the paymentdetails securely to stripe, but still confirm the paymentintent clientside. So the form is there and you need to use the paymentelement yourself to have the security on your side
I had a little bit of debug to find whats missing and up to now it's only the secret key. If it still does not work I would try to follow the path where the data comes from and where it goes. You might also want to do that
SavannahOP
Okay, but for me it’s not logical that they create the payment intent when the component is mounted (like they did in the useEffect)
For me, we should create the payment intent when the user click on the button to buy
@Savannah Okay, but for me it’s not logical that they create the payment intent when the component is mounted (like they did in the useEffect)
yea, it's one possibility of multiple. Think about the basic behavior:
So yea, it's possbile to create it directly to keep track of fails and other stuff.
somewhere, somewhen a paymentintent need to be created and somewhere, somewhen it need to be confirmed.
So yea, it's possbile to create it directly to keep track of fails and other stuff.
@Savannah For me, we should create the payment intent when the user click on the button to buy
yes, that's also a possible way. Stripe documented it here: https://docs.stripe.com/payments/accept-a-payment-deferred
And of course you won't do something like this (see screenshot). You need to think about how to create this behavior with react. In this case for example via the component <PaymentElement />. It will create create and mount the payment element
SavannahOP
Okay
But I still don’t understand something 😂😭
@Savannah (this one)
SavannahOP
On this photo, there is a form. But I don’t understand how they create it tbh
@B33fb0n3 I like this guide: https://docs.stripe.com/payments/quickstart?client=next
But you can also build your own configuration. Just keep in mind: you need to create somewhere a paymentintent and your also want to confirm the paymentintent with the entered details somewhere.
Confirming can be done serverside or clientside and that also via multiple possible options (you can choose one). One example for collecting client data can be confirmation tokens, another by just creating a payment method and save the id or you can confirm it clientside by using the elements provider (like you see in the linked doc), ...
Keep in mind the basic behavior: somewhere, somewhen a paymentintent need to be created and somewhere, somewhen it need to be confirmed.
SavannahOP
Because, on the link you send me first, their is only <Element> and <PaymentElement/> used
@Savannah On this photo, there is a form. But I don’t understand how they create it tbh
this form will be automatically created via the <PaymentElement /> component. You just use the provided component from stripe
SavannahOP
When I dl their projects on the link and started it, it’s working and I’ve the payments method like credit card or PayPal
@B33fb0n3 this form will be automatically created via the *<PaymentElement />* component. You just use the provided component from stripe
SavannahOP
Yeah, but I still don’t have it on my project 😂😭
@Savannah Yeah, but I still don’t have it on my project 😂😭
If your shared repo it's a copy of your code, you should be good to go (expect the secret, but you already said, that you have it). If it still does not work I would try to follow the path where the data comes from and where it goes. You might also want to do that
@B33fb0n3 If your shared repo it's a copy of your code, you should be good to go (expect the secret, but you already said, that you have it). If it still does not work I would try to follow the path where the data comes from and where it goes. You might also want to do that
SavannahOP
I found out where one of the biggest mistakes that made it not work came from x)
To load the stripePromise, i was doing that :
const stripePromise = process.env.STRIPE_PUBLIC_KEY
? loadStripe(process.env.STRIPE_PUBLIC_KEY)
: null;Idk why, it was alltime "null"
So, i just change to it :
const stripePromise = loadStripe('publickey')hm weird, ok. Do you see the elements now?
@B33fb0n3 hm weird, ok. Do you see the elements now?
SavannahOP
Yeah, i see it 😉
I just need to find a way to fully custom the elements now 😉
@Savannah I just need to find a way to fully custom the elements now 😉
You can use the appearance object inside the options to customize the appearance of the inputs
@B33fb0n3 You can use the appearance object inside the options to customize the appearance of the inputs
SavannahOP
Yeah, i see it yesterday
with the variables, the rules and more
SavannahOP
Btw, did you know how i can put it into the "Accordion" mode ?
I've looked in their documentation, but it's impossible because it's no longer the same way of doing things. I even searched the variables source page (elements-group.d.ts), but I can't find it.
@B33fb0n3 you can specifiy that inside your payment element. It can look like this for example:
SavannahOP
Ohh, thanks brother. I was putting it on the Element component x)
And last thing, did you know if it's possible to fully custom the PaymentElement component ?
Like, i need to create something like this. But tbh, idk if it's possible
@Savannah And last thing, did you know if it's possible to fully custom the PaymentElement component ?
That's a good question. I never gone that deep inside the appearance stuff, so I can't answer you that question :/
@B33fb0n3 That's a good question. I never gone that deep inside the appearance stuff, so I can't answer you that question :/
SavannahOP
Yeah, i was checking but i don't think you can
That's sad tbh xD
oh nooo
But maybe it's fine that the payment element looks different to make clear to the user, that you use a secure connection 🙂
@B33fb0n3 <@811720203531976714> solved? https://discord.com/channels/752553802359505017/1238944546675752970/1238944546675752970
SavannahOP
Hoo yes, sorry about that. I completely forgot to put it in solved. Thanks, you helped me a lot !
sure thing. Happy to help. Please mark solution