Next.js Discord

Discord Forum

Stripe Checkout (Custom Express Checkout)

Answered
Tommy Kenton posted this in #help-forum
Open in Discord
Hi, How can I create a stripe checkout form (custom) in NextJS/TS (Stripe Express Checkout Element React On Stripe)
Answered by B33fb0n3
As you saw you used an outdated version for express checkout elements (https://discord.com/channels/841573134531821608/1267793799933853768/1267806015680675861). You now using the correct method and it worked like that 👍
View full answer

33 Replies

@Tommy Kenton Hi, How can I create a stripe checkout form (custom) in NextJS/TS (Stripe Express Checkout Element React On Stripe)
I like to use this guide: https://docs.stripe.com/payments/quickstart?client=next

And 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.
@Tommy Kenton Also I only need to render the express element which is e.g Google Pay, Apple Pay.
all of this can be done on your website. If you just need the express checkout elements, you can use this: https://docs.stripe.com/elements/express-checkout-element
@B33fb0n3 all of this can be done on your website. If you just need the express checkout elements, you can use this: https://docs.stripe.com/elements/express-checkout-element
It does take payment, but link is not showing in google chrome but in safari and google chrome supports link and google pay?
Incognito VS Non-Incognito
@Tommy Kenton It does take payment, but link is not showing in google chrome but in safari and google chrome supports link and google pay?
stripe elements are dynamic by default. So it checks if the customer (in this case you) has cards and what kind of cards and and and to display the correct express buttons. So it's absolutely normal, that you see different elements depending on different machines
I know but link shows in incognito?
And it worked in my express app?
@Tommy Kenton I can't quite follow you, where is the problem now? I thought the problem is, that the buttons are not working and you don't know how to integrate them. But they are integrated now...
@B33fb0n3 <@1176200095088254981> I can't quite follow you, where is the problem now? I thought the problem is, that the buttons are not working and you don't know how to integrate them. But they are integrated now...
So the buttons now load the Google Pay is loading i take payment e.g £10.00 it goes through all good but now the problem is that link wont load?
But the link button does not show.
It creates it etc. Just certain payment buttons will not load?
Add you paymeintent id here: https://dashboard.stripe.com/settings/payment_methods/review and check, why the specific buttons are not visible
Do this and test again
@B33fb0n3 Do this and test again
I did that, It said same thing... (did not work)
Im serving it over ngrok and I went on there demo page and it is showing more than just google pay on there.
@B33fb0n3 Do this and test again
Please also ping so I get the notification.
@Tommy Kenton I did that, It said same thing... (did not work)
The stripe developer discord can have a look in your account details. I guess it's the best, that you visit them here: https://discord.gg/stripe
I have a feeling it might be this for the ones that I need? PayPal & Link? @B33fb0n3
There is only 2 of them.
@Tommy Kenton I've been in there it is not helpful... There are no channels you can get help in.
there is a dedicated channel to get help. You find it here: https://discord.com/channels/841573134531821608/842637025524842496
As you saw you used an outdated version for express checkout elements (https://discord.com/channels/841573134531821608/1267793799933853768/1267806015680675861). You now using the correct method and it worked like that 👍
Answer
happy to help