Integrating payments into your web app might sound complicated, but with Stripe Checkout and Next.js, it’s easier than you think! In this guide, I’ll show you how to set up Stripe Checkout step by step, so you can start accepting payments with minimal hassle. Whether you're building an e-commerce store, a SaaS product, or any app that needs payments, this tutorial covers everything from setting up a Stripe account to handling payment redirects securely. Let’s get started! Why Use Stripe Checkout? Stripe Checkout provides a secure and customizable payment flow that’s perfect for any web app. It’s PCI-compliant, easy to integrate, and supports a wide variety of payment methods like credit cards, Apple Pay, and Google Pay. By the end of this guide, you’ll have: 1. A workingNext.js app with Stripe Checkoutintegrated2. Securepayment processing with Stripe Knowledge of how Stripe works under the hood Step 1: Create a Stripe Account and Set Up Sandbox Before diving into the code, you need to create a Stripe account and set up a Sandbox environment for testing. Create a Stripe Account

Go to the Stripe Dashboard and sign up or log in.
You’ll be redirected to the Stripe Dashboard.


Switch to Test Mode

In the dashboard, toggle the switch for Test Mode (top right corner).
This allows you to simulate payments without real transactions.


Get Your API Keys

Go to Developers → API Keys in the left sidebar.
Copy the following keys:

Publishable Key (pk_test_xxx) → Used on the frontend (safe to expose).
Secret Key (sk_test_xxx) → Used on the backend (keep it private!).




Store Your API Keys Securely


In your Next.js project, create a .env.local file and add:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000




Important: Never expose your Secret Key in frontend code! Step 2: Set Up Next.js Project Create a New Next.js App
create-next-app stripe-demo --typescript --tailwind
cd stripe-demo



Install Dependencies
npm install stripe @stripe/stripe-js


@stripe/stripe-js: Used on the frontend to redirect to Checkout.
stripe: Used on the backend to create a Checkout session Step 3: Create a Checkout API Route In Next.js, API routes are created in the pages/api folder. We’ll use this to securely create a Checkout Session on the server side. Create a file: pages/api/create-checkout-session.ts import Stripe from 'stripe';
import { NextApiRequest, NextApiResponse } from 'next';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
  apiVersion: '2023-10-16',
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    try {
      const { items } = req.body;

      const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: items.map((item: any) => ({
          price_data: {
            currency: 'usd',
            product_data: { name: item.name },
            unit_amount: item.price * 100,
          },
          quantity: item.quantity,
        })),
        mode: 'payment',
        success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/success`,
        cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/cancel`,
      });

      res.status(200).json({ sessionId: session.id });
    } catch (err) {
      res.status(500).json({ error: 'Error creating checkout session' });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
} Step 4: Initialize Stripe in the Frontend Create a utility file: utils/stripe.ts import { loadStripe } from '@stripe/stripe-js';

export const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!); Step 5: Create a Checkout Button Modify pages/index.tsx to add a simple product list and a checkout button. import { useState } from 'react';
import { stripePromise } from '../utils/stripe';

const products = [
  { id: '1', name: 'Product 1', price: 1000 },
  { id: '2', name: 'Product 2', price: 2000 },
];

export default function Home() {
  const [cart, setCart] = useState(products);

  const handleCheckout = async () => {
    const stripe = await stripePromise;

    const response = await fetch('/api/create-checkout-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ items: cart }),
    });

    const { sessionId } = await response.json();
    stripe?.redirectToCheckout({ sessionId });
  };

  return (
    <div>
      <h1>Products</h1>
      {cart.map((item) => (
        <div key={item.id}>
          <p>{item.name} - ${item.price / 100}</p>
        </div>
      ))}
      <button onClick={handleCheckout}>Checkout</button>
    </div>
  );
} Step 6: Test the Integration Start the development server
Go to http://localhost:3000 and add items to the cart.
Click Checkout → You’ll be redirected to Stripe’s secure checkout page.
Complete the payment using Stripe’s test card numbers (e.g., 4242 4242 4242 4242). Conclusion 🎉 Congratulations! You’ve successfully integrated Stripe Checkout into a Next.js app.This guide showed you how to: Create a Stripe account and use the Sandbox environment for testing.
Securely create Checkout sessions on the backend.
Redirect users to Stripe’s hosted checkout page. With this setup, you can start accepting payments safely and efficiently. 🚀 If you would like to watch that tutorial in video format please welcome to my youtube channel MaksDevInsights. I hope to see you there. Cheers! Integrating payments into your web app might sound complicated, but with Stripe Checkout and Next.js , it’s easier than you think! In this guide, I’ll show you how to set up Stripe Checkout step by step , so you can start accepting payments with minimal hassle. Stripe Checkout and Next.js Stripe Checkout step by step Whether you're building an e-commerce store, a SaaS product, or any app that needs payments, this tutorial covers everything from setting up a Stripe account to handling payment redirects securely . Let’s get started! setting up a Stripe account handling payment redirects securely Why Use Stripe Checkout? Why Use Stripe Checkout? Stripe Checkout provides a secure and customizable payment flow that’s perfect for any web app. It’s PCI-compliant, easy to integrate, and supports a wide variety of payment methods like credit cards, Apple Pay, and Google Pay. By the end of this guide, you’ll have: secure and customizable payment flow 1. A working Next.js app with Stripe Checkout integrated 2. Secure payment processing with Stripe Next.js app with Stripe Checkout payment processing with Stripe Knowledge of how Stripe works under the hood Knowledge of how Stripe works under the hood how Stripe works under the hood Step 1: Create a Stripe Account and Set Up Sandbox Step 1: Create a Stripe Account and Set Up Sandbox Before diving into the code, you need to create a Stripe account and set up a Sandbox environment for testing. create a Stripe account Sandbox environment Create a Stripe Account

Go to the Stripe Dashboard and sign up or log in.
You’ll be redirected to the Stripe Dashboard. Switch to Test Mode

In the dashboard, toggle the switch for Test Mode (top right corner).
This allows you to simulate payments without real transactions. Get Your API Keys

Go to Developers → API Keys in the left sidebar.
Copy the following keys:

Publishable Key (pk_test_xxx) → Used on the frontend (safe to expose).
Secret Key (sk_test_xxx) → Used on the backend (keep it private!). Store Your API Keys Securely


In your Next.js project, create a .env.local file and add:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000




Important: Never expose your Secret Key in frontend code! Create a Stripe Account Go to the Stripe Dashboard and sign up or log in.
You’ll be redirected to the Stripe Dashboard. Create a Stripe Account Go to the Stripe Dashboard and sign up or log in. You’ll be redirected to the Stripe Dashboard. Go to the Stripe Dashboard and sign up or log in. Stripe Dashboard Stripe Dashboard You’ll be redirected to the Stripe Dashboard . Stripe Dashboard Switch to Test Mode In the dashboard, toggle the switch for Test Mode (top right corner).
This allows you to simulate payments without real transactions. Switch to Test Mode In the dashboard, toggle the switch for Test Mode (top right corner). This allows you to simulate payments without real transactions. In the dashboard, toggle the switch for Test Mode (top right corner). Test Mode This allows you to simulate payments without real transactions. simulate payments Get Your API Keys Go to Developers → API Keys in the left sidebar.
Copy the following keys:

Publishable Key (pk_test_xxx) → Used on the frontend (safe to expose).
Secret Key (sk_test_xxx) → Used on the backend (keep it private!). Get Your API Keys Go to Developers → API Keys in the left sidebar. Copy the following keys:

Publishable Key (pk_test_xxx) → Used on the frontend (safe to expose).
Secret Key (sk_test_xxx) → Used on the backend (keep it private!). Go to Developers → API Keys in the left sidebar. Developers → API Keys Copy the following keys: Publishable Key (pk_test_xxx) → Used on the frontend (safe to expose).
Secret Key (sk_test_xxx) → Used on the backend (keep it private!). Publishable Key (pk_test_xxx) → Used on the frontend (safe to expose). Secret Key (sk_test_xxx) → Used on the backend (keep it private!). Publishable Key ( pk_test_xxx ) → Used on the frontend (safe to expose). Publishable Key ( pk_test_xxx Secret Key ( sk_test_xxx ) → Used on the backend (keep it private!). Secret Key ( sk_test_xxx Store Your API Keys Securely In your Next.js project, create a .env.local file and add:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000




Important: Never expose your Secret Key in frontend code! Store Your API Keys Securely In your Next.js project, create a .env.local file and add:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000 Important: Never expose your Secret Key in frontend code! In your Next.js project, create a .env.local file and add: NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000 In your Next.js project, create a .env.local file and add: .env.local NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_xxx
STRIPE_SECRET_KEY=sk_test_xxx
NEXT_PUBLIC_BASE_URL=http://localhost:3000 Important: Never expose your Secret Key in frontend code! Important: Never expose your Secret Key in frontend code! Important: Secret Key Step 2: Set Up Next.js Project Step 2: Set Up Next.js Project Create a New Next.js App
create-next-app stripe-demo --typescript --tailwind
cd stripe-demo Install Dependencies
npm install stripe @stripe/stripe-js


@stripe/stripe-js: Used on the frontend to redirect to Checkout.
stripe: Used on the backend to create a Checkout session Create a New Next.js App create-next-app stripe-demo --typescript --tailwind
cd stripe-demo Create a New Next.js App Create a New Next.js App create-next-app stripe-demo --typescript --tailwind
cd stripe-demo create-next-app stripe-demo --typescript --tailwind
cd stripe-demo Install Dependencies npm install stripe @stripe/stripe-js @stripe/stripe-js: Used on the frontend to redirect to Checkout.
stripe: Used on the backend to create a Checkout session Install Dependencies Install Dependencies npm install stripe @stripe/stripe-js npm install stripe @stripe/stripe-js @stripe/stripe-js: Used on the frontend to redirect to Checkout. stripe: Used on the backend to create a Checkout session @stripe/stripe-js : Used on the frontend to redirect to Checkout. @stripe/stripe-js stripe : Used on the backend to create a Checkout session stripe Step 3: Create a Checkout API Route Step 3: Create a Checkout API Route In Next.js, API routes are created in the pages/api folder. We’ll use this to securely create a Checkout Session on the server side. pages/api Checkout Session Create a file: pages/api/create-checkout-session.ts pages/api/create-checkout-session.ts import Stripe from 'stripe';
import { NextApiRequest, NextApiResponse } from 'next';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
  apiVersion: '2023-10-16',
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    try {
      const { items } = req.body;

      const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: items.map((item: any) => ({
          price_data: {
            currency: 'usd',
            product_data: { name: item.name },
            unit_amount: item.price * 100,
          },
          quantity: item.quantity,
        })),
        mode: 'payment',
        success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/success`,
        cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/cancel`,
      });

      res.status(200).json({ sessionId: session.id });
    } catch (err) {
      res.status(500).json({ error: 'Error creating checkout session' });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
} import Stripe from 'stripe';
import { NextApiRequest, NextApiResponse } from 'next';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY as string, {
  apiVersion: '2023-10-16',
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    try {
      const { items } = req.body;

      const session = await stripe.checkout.sessions.create({
        payment_method_types: ['card'],
        line_items: items.map((item: any) => ({
          price_data: {
            currency: 'usd',
            product_data: { name: item.name },
            unit_amount: item.price * 100,
          },
          quantity: item.quantity,
        })),
        mode: 'payment',
        success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/success`,
        cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/cancel`,
      });

      res.status(200).json({ sessionId: session.id });
    } catch (err) {
      res.status(500).json({ error: 'Error creating checkout session' });
    }
  } else {
    res.setHeader('Allow', 'POST');
    res.status(405).end('Method Not Allowed');
  }
} Step 4: Initialize Stripe in the Frontend Step 4: Initialize Stripe in the Frontend Create a utility file: utils/stripe.ts utils/stripe.ts import { loadStripe } from '@stripe/stripe-js';

export const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!); import { loadStripe } from '@stripe/stripe-js';

export const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!); Step 5: Create a Checkout Button Step 5: Create a Checkout Button Modify pages/index.tsx to add a simple product list and a checkout button. pages/index.tsx import { useState } from 'react';
import { stripePromise } from '../utils/stripe';

const products = [
  { id: '1', name: 'Product 1', price: 1000 },
  { id: '2', name: 'Product 2', price: 2000 },
];

export default function Home() {
  const [cart, setCart] = useState(products);

  const handleCheckout = async () => {
    const stripe = await stripePromise;

    const response = await fetch('/api/create-checkout-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ items: cart }),
    });

    const { sessionId } = await response.json();
    stripe?.redirectToCheckout({ sessionId });
  };

  return (
    <div>
      <h1>Products</h1>
      {cart.map((item) => (
        <div key={item.id}>
          <p>{item.name} - ${item.price / 100}</p>
        </div>
      ))}
      <button onClick={handleCheckout}>Checkout</button>
    </div>
  );
} import { useState } from 'react';
import { stripePromise } from '../utils/stripe';

const products = [
  { id: '1', name: 'Product 1', price: 1000 },
  { id: '2', name: 'Product 2', price: 2000 },
];

export default function Home() {
  const [cart, setCart] = useState(products);

  const handleCheckout = async () => {
    const stripe = await stripePromise;

    const response = await fetch('/api/create-checkout-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ items: cart }),
    });

    const { sessionId } = await response.json();
    stripe?.redirectToCheckout({ sessionId });
  };

  return (
    <div>
      <h1>Products</h1>
      {cart.map((item) => (
        <div key={item.id}>
          <p>{item.name} - ${item.price / 100}</p>
        </div>
      ))}
      <button onClick={handleCheckout}>Checkout</button>
    </div>
  );
} Step 6: Test the Integration Step 6: Test the Integration Start the development server Go to http://localhost:3000 and add items to the cart. Click Checkout → You’ll be redirected to Stripe’s secure checkout page. Complete the payment using Stripe’s test card numbers (e.g., 4242 4242 4242 4242). Start the development server Go to http://localhost:3000 and add items to the cart . http://localhost:3000 add items to the cart Click Checkout → You’ll be redirected to Stripe’s secure checkout page . Checkout Stripe’s secure checkout page Complete the payment using Stripe’s test card numbers (e.g., 4242 4242 4242 4242 ). Complete the payment 4242 4242 4242 4242 Conclusion Conclusion 🎉 Congratulations! You’ve successfully integrated Stripe Checkout into a Next.js app . This guide showed you how to: Stripe Checkout into a Next.js app Create a Stripe account and use the Sandbox environment for testing. Securely create Checkout sessions on the backend. Redirect users to Stripe’s hosted checkout page. Create a Stripe account and use the Sandbox environment for testing. Create a Stripe account and use the Sandbox environment Securely create Checkout sessions on the backend. Securely create Checkout sessions on the backend. Redirect users to Stripe’s hosted checkout page. Redirect users to Stripe’s hosted checkout page. With this setup, you can start accepting payments safely and efficiently. 🚀 If you would like to watch that tutorial in video format please welcome to my youtube channel MaksDevInsights . I hope to see you there. Cheers! MaksDevInsights

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Dash

Apple

Before

dashboard

Google

Session

Stripe

Create a Templated Telegram Bot Using Node.js And Then Add AI-powered Capabilities Later

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Too Long; Didn't Read

Boost your HackerNoon story @ $159.99! 🚀

Integrating Stripe Checkout with Next.js Is Easier Than You Think

Integrating Stripe Checkout with Next.js Is Easier Than You Think

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

3 Things You Will Love About Micro Frontends

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

3 Things You Will Love About Micro Frontends

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps