Accept Payments through Stripe Checkout using Next.js API Routes

Shadid Haque: [0:00] Let's implement a stripe to accept payment in our application. Stripe in itself is quite a topic to cover. We're not going to dive too deep into stripe, rather cover the basic implementation of it. Head over to stripe and create an account if you haven't done so already.

[0:16] Next, we're going to go to stripe.com/docs. Here, we are going to select Get started. Then, we're going to select Stripe Checkout and Quickstart. This gives us a sample implementation of the Stripe Checkout. We can adapt the solution to our Next.js application. Based on this server.js file, let's create a new API route in our Next application.

[0:46] Under api directory, we create a new file. I'm going to call this create-checkout-session. In this file, we are going to import the NextApiRequest and Response. Next, we're going to require the stripe library. Then we will create our handler function.

[1:00] When we hit this endpoint, we will send the cart object as req.body. Let's go ahead and destructure cart from our req.body here. We will iterate over every items in the cart and turn them into LineItem object, so Stripe API can consume it. I got the shape of the LineItem object from stripe's documentation. Feel free to check their documentation if you want to learn more.

[1:47] Next, we create a new stripe.checkout.session. We pass in the Line_items. Then, we define the mode. In this case, it's payment. Then, we define a success_url and a cancel_url. Finally, we return the session.

[2:21] Now, in our cart component, on the Checkout-button click, we make the HTTP request to create-checkout-session. We pass in the cart as a req.body. Successful response from stripe will give us a session.url. We will redirect to the session.url to complete the payment.

[3:03] Let's go ahead and give this a shot. Looks like I had a minor typo here. On create-checkout-session, it is going to be stripe.checkout.sessions, not session. Now, when we hit Checkout, it redirects us to the stripe payment page.

[3:26] We can use one of these test credit cards provided by stripe to actually checkout. Find a list of test credit cards on stripe's documentation page.

[3:38] The payment went through. Now, we didn't create a success page, that's why we're seeing 404 here. Let's go ahead and create a success page and a cancel page. Now, if we try it again, it will redirect to success page upon successful completion of the payment.

[4:18] Now, if you go to your stripe dashboard, you'll also see that the payments are going through.