Charge Customer for Stripe Subscription in Next.js
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.
Instructor: [0:00] Let's set up a Stripe checkout session to charge our user for this subscription. Let's import the init Stripe function from Stripe. We can then call this to create our Stripe client using our Stripe secret key. We can get our price ID from our request.query.
[0:16] Next, we need to create an array of line items that we want to charge our customer for. In this case, it will just be one object with the price set to our price ID and the quantity of one. Now we can initiate our checkout session by saying stripe.checkout.sessions.create.
[0:33] This takes a configuration object with the key customer set to our Stripe customer, mode set to subscription payment method types, which is set to an array with one string value card. Then line items set to our line items from above.
[0:47] A success URL set to http://localhostoverport3000/payment/success. Then our cancel URL going to /cancelled. Then we want to send back an object with the key ID set to our session.ID.
[1:03] We also need to create a page for /paymentsuccess and /paymentcanceled. We can give them a little bit more information that they have not been charged. Back in our Pricing page, we need to install the Stripe.js library. That's @stripe/stripe.js.
[1:29] We can import loadStripe from @stripe/stripe.js and create our Stripe client. Passing in process .mf.next_public_stripe_key. We can then say, Stripe.redirect to check out and pass it an object with the session ID set to the data.ID that we got back from our API route.
[1:56] When we click our Subscribe button, we're redirected to the Stripe UI where we can enter in the test credit card, all four twos, and an expiry sometime in the future and any CVC. We'll see our payment was successful.
[2:12] If we open up the Stripe dashboard and go to More and then Subscriptions, we can see that we now have an active subscription for our user.
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
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?