Next.js Discord

Discord Forum

keeping track of state during stripe checkout?

Answered
Singapura posted this in #help-forum
Open in Discord
SingapuraOP
first time working with stripe on nextjs, could someone point me in the right direction for what is the proper way to keep track of the state of the checkout product, price, etc. throughout the checkout process?

I was thinking about using redux but not sure if it's the proper way?

The flow is product page buy -> /checkout route, there you can pick some extra options for a product, extra insurance, pay only reservation etc., and then you go to payment page which is on the same /checkout route

Using next 14, app router
Answered by James4u
you are correct! redux or context anything you can use
View full answer

28 Replies

James4u
Yeah @Singapura
James4u
you are correct! redux or context anything you can use
Answer
@James4u Yeah <@1128611382514958387>
SingapuraOP
Thanks for fast response, what about on the server side?
James4u
actually when it comes to the server, it's stateless
I assume you don't want to store all states of each step in the database, right?
then states on the client end is the most correct approach
@Singapura
@James4u I assume you don't want to store all states of each step in the database, right?
SingapuraOP
I don't no, just wondering if there's anything I have to be careful about when modifying and keeping track of the price for any security concerns

My current thinking is:
- Save product id in redux
- fetch the product on server when on the /checkout page
- if user clicks on any extra option, save option id in redux, verify on server side the option and calculate new price

is something like this correct?
James4u
well, my suggestion is to keep all of your states (ids of the product, and prices that are fetched from the server)
and then in your checkout page, you can calculate the total amount on your client-end
BUT you need to re-calculate the price & subtotal on the server side again
as long as you don't rely on the subtotal & prices from the client end
no security concerns
just use product ids and extra option details from the client
and do re-calculation on the server at the end before checkout
@James4u and do re-calculation on the server at the end before checkout
SingapuraOP
Thank you this is incredibly helpful. you're amazing!
Pearls
you could also just use the stripe sdk for it no?
const session = await stripe.checkout.sessions.retrieve(session_id);

theres a very big sdk/api for handling checkout's session, and the documentation for it is very well described aswel
With your idea theres also alot of computing done on the server which can just be done on the client aswel.
Pearls
When creating a checkout session you can give it extra metadata, for example:
stripe.checkout.sessions.create({
  ...
  metadata: {
      hi: "hi"
  },
});
so yes, you could add extra data to a product
SingapuraOP
Also, I have good knowledge of Redux, but don't know practically anything about stripe
@Pearls When creating a checkout session you can give it extra metadata, for example: js stripe.checkout.sessions.create({ ... metadata: { hi: "hi" }, });
Pearls
for example, if you wanted a color option you could potentially save that color option in localstorage and when going to checkout parse that and give it to the checkoutsession as metadata
SingapuraOP
So that's one of my considerations too
Pearls
Ah, well stripe has a pretty decent documentation so that shouldnt be a big problem
SingapuraOP
Is there any benefit to using these checkout sessions as opposed to redux? I'm not really worried about server computing
Pearls
ig theres not that big of a difference then xD