Integrating Stripe Checkout in a Next.js Application

Accepting payments is a core part of many web applications. In this article, you'll learn how to integrate Stripe Checkout into a Next.js project to handle secure, user-friendly payments with ease.

Step 1: Set Up Your Project

Start by creating a new Next.js project and installing the necessary dependencies:

npx create-next-app stripe-checkout-demo
cd stripe-checkout-demo
npm install stripe

Step 2: Configure Stripe

In the root of your project, create a .env.local file and add your Stripe secret key:

STRIPE_SECRET_KEY=your_secret_key_here

Step 3: Create a Checkout Session API Route

Create a file at pages/api/checkout.js:

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: [
          {
            price_data: {
              currency: 'usd',
              product_data: {
                name: 'Sample Product',
              },
              unit_amount: 5000,
            },
            quantity: 1,
          },
        ],
        mode: 'payment',
        success_url: 'http://localhost:3000/success',
        cancel_url: 'http://localhost:3000/cancel',
      });

      res.status(200).json({ id: session.id });
    } catch (err) {
      res.status(500).json({ error: err.message });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
}

Step 4: Create a Checkout Button

In your frontend, create a simple page with a button to start the checkout process:

import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe('your_public_key_here');

export default function Home() {
  const handleClick = async () => {
    const res = await fetch('/api/checkout', {
      method: 'POST',
    });
    const { id } = await res.json();
    const stripe = await stripePromise;
    await stripe.redirectToCheckout({ sessionId: id });
  };

  return (
    <div className="min-h-screen flex justify-center items-center">
      <button onClick={handleClick} className="bg-blue-500 text-white px-4 py-2 rounded">
        Checkout
      </button>
    </div>
  );
}

Step 5: Handle Success and Cancel

Create simple pages at pages/success.js and pages/cancel.js to handle outcomes.

Conclusion

Stripe Checkout makes payment integration easy and secure. With just a few lines of code, you can accept payments in your Next.js app and scale with confidence.

If this post helped you, consider supporting me: buymeacoffee.com/hexshift