Create Stripe Checkout In Next.js | Stripe Session | Stripe Webhook | React Stripe

In this blog you will learn how to create a stripe session, redirect the user to the stripe checkout and also create stripe webhook that listens to when the payment is made.

Live Demo Site Example

Create Next.js app

npx create-next-app
cd my-app
// Install packages
npm i @stripe/stripe-js next-stripe@beta micro

Create stripe keys and put them in next.js`.env` file
Create a stripe account if you don’t already have one and create your publishable key and secret key and place them in .env

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_19HI412TBidBrJMDDsQ3HcDZ
STRIPE_SECRET_KEY=sk_test_wUdwAIjtgDq0oAa3rR0hJLU2h

Create a Next stripe api
Create a `[…nextstripe].js` catch-all route in your project’s `pages/api/stripe` directory.

import NextStripe from 'next-stripe'
export default NextStripe({
    stripe_key: process.env.STRIPE_SECRET_KEY
})

Creating Checkout Page
Create two pages in Next.js pages folder my-checkout.js and thank-you.js

import { createCheckoutSession } from 'next-stripe/client'
import { loadStripe } from "@stripe/stripe-js";


export default function MyCheckout() {

    const handleCheckout = async () => {
        const priceOne = 18;
        const session = await createCheckoutSession({
            success_url: window.location.origin + '/thank-you?session_id={CHECKOUT_SESSION_ID}',
            cancel_url: window.location.href,
            line_items: [
                {
                    quantity: 1,
                    name : 'Beanie with Logo',
                    images: ['https://via.placeholder.com/150'],
                    amount: Math.round(priceOne * 100),
                    currency: 'usd',
                },
            ],
            payment_method_types: ['card'],
            mode: 'payment'
        })

        try {
            const stripe = await loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY);
            if (stripe) {
                stripe.redirectToCheckout({ sessionId: session.id });
            }
        } catch (error) {
            console.log( error );
        }
    }

    return <div>
        <button onClick={handleCheckout}>Checkout</button>
    </div>
}

Create Stripe API webhook endpoint
Endpoint Url : https://yournextjssiteurl/api/stripe-webhook
Events to send: checkout.session.completed

Then copy your signing secret and place it in your .env file

STRIPE_WEBHOOK_ENDPOINT_SECRET=xxxx

Create stripe webhook endpoint file in next.js
Create a file calle `pages/api/stripe-web-hook.js`

import { buffer } from "micro";
const Stripe = require('stripe');

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, {
    apiVersion: '2020-08-27'
});
const webhookSecret = process.env.STRIPE_WEBHOOK_ENDPOINT_SECRET;

export const config = {
    api: {
        bodyParser: false,
    },
};


const handler = async (req, res) => {
    if (req.method === "POST") {
        const buf = await buffer(req);
        const sig = req.headers["stripe-signature"];

        let stripeEvent;

        try {
            stripeEvent = stripe.webhooks.constructEvent(buf, sig, webhookSecret);
            console.log( 'stripeEvent', stripeEvent );
        } catch (err) {
            res.status(400).send(`Webhook Error: ${err.message}`);
            return;
        }

        if ( 'checkout.session.completed' === stripeEvent.type ) {
            const session = stripeEvent.data.object;
            console.log( 'payment success', session );
// Do something here on payment success, like update order etc.
        }

        res.json({ received: true });
    } else {
        res.setHeader("Allow", "POST");
        res.status(405).end("Method Not Allowed");
    }
};

export default handler;

Install srtipe cli and login to stripe account through cli

Stripe CLI

brew install stripe/stripe-cli/stripe
stripe login

Listen to the webhook endpoint event.

stripe listen --forward-to localhost:3000/api/stripe-web-hook/

Make sure the value of `STRIPE_WEBHOOK_ENDPOINT_SECRET`while testing locally should be. the same as sigining secret received in terminal.

Now click on place order