Integrating Stripe Checkout in a Next.js Application

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 ( Checkout ); } 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

Apr 12, 2025 - 18:14

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 (
    
      
    
  );
}

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