Stripe makes taking payments easy. We can use the Stripe library to create a checkout session. This takes a configuration object, which describes how we want to charge our customer, the method we would like to use, and where we want to redirect the user based on a successful transaction or cancellation.
In this video, we create a new API route to initiate a Stripe session to charge for a particular subscription option. This API route returns the session's ID, which we can use to redirect the client. In order to do this, we install the stripe-js
library - which is used client-side to interact with Stripe - and initialize it using our publishable
key.
Lastly, we can use the test credit card for Stripe to confirm everything is working in test mode.
I get the following strange error when I am redirected to the success page:
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Text content did not match. Server: "Login" Client: "Dashboard"
Any thoughts, please?
Hey Alex, this was my bad when creating the example for the course. I am working on a revised version, but in the mean time, here is an article explaining a bit about the problem, and how to switch off SSR for the Navbar component 👍
https://jonmeyers.io/blog/fix-client-server-hydration-error-in-next-js