Building a Headless E-commerce Site with Stripe and Next.js

Building a Headless E-commerce Site with Stripe and Next.js

E-commerce has evolved beyond traditional monolithic platforms. Today’s online stores are faster, more customizable, and optimized for developer experience , thanks to the rise of headless commerce. By decoupling the frontend from the backend, developers can use modern frameworks like Next.js while integrating powerful APIs like Stripe for payments.

In this guide, we’ll walk through how to build a headless e-commerce site using Next.js for frontend rendering and Stripe for checkout and product management. This setup gives you full control over the design and flow of your store while relying on Stripe’s secure infrastructure for handling transactions.

What Is Headless Commerce?

In traditional e-commerce platforms, the backend (product database, payment logic) and frontend (website or app interface) are tightly coupled. In headless commerce, the frontend is separated and communicates with APIs , allowing more flexibility in UI, deployment, and integrations.

Benefits of headless architecture:

• Performance: Faster loading and improved SEO using static or server-rendered pages
• Customization: Full control over branding and user experience
• Flexibility: Easily swap or scale backend services without breaking the frontend

Tools We’ll Use

• Next.js – for frontend rendering, routing, and API endpoints
• Stripe – for payment processing, product handling, and checkout
• React + Tailwind CSS (optional) – for building UI components

Step-by-Step Setup

1. Create a New Next.js Project

npx create-next-app my-store
cd my-store
npm install stripe

Set up your Stripe credentials securely using environment variables:

STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

2. Add Stripe Products

In your Stripe Dashboard:

1. Go to Products
2. Click + Add product
3. Define price, name, image, and description

You’ll use Stripe’s API to pull these into your Next.js app dynamically.

3. Fetch Products from Stripe

Create a new file: lib/stripe.js

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

export async function getProducts() {
  const products = await stripe.products.list({
    expand: ['data.default_price'],
  });
  return products.data;
}

Use this in pages/index.js:

import { getProducts } from '../lib/stripe';

export async function getStaticProps() {
  const products = await getProducts();
  return { props: { products } };
}

Display products with price and add-to-cart buttons.

4. Create a Checkout Session

In pages/api/checkout.js:

import Stripe from 'stripe';

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

export default async function handler(req, res) {
  const { priceId } = req.body;

  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${req.headers.origin}/success`,
    cancel_url: `${req.headers.origin}/cancel`,
  });

  res.status(200).json({ url: session.url });
}

Trigger the session from your frontend:

const handleCheckout = async (priceId) => {
  const res = await fetch('/api/checkout', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ priceId }),
  });
  const data = await res.json();
  window.location.href = data.url;
};

5. Add Success and Cancel Pages

Create simple confirmation pages in pages/success.js and pages/cancel.js to handle the result of the payment flow.

Advanced Features (Optional)

• Use Stripe Webhooks to track order status or update inventory
• Integrate CMS like Sanity or Contentful for product management
• Add cart functionality using React Context or a global state library
• Support multiple quantities, shipping, and tax via Stripe APIs

Conclusion

Headless commerce gives developers the power to build fast, secure, and fully customized e-commerce experiences. With Next.js handling the frontend and Stripe managing payments, you get the best of both worlds , performance and reliability.

Whether you’re launching a new product, building a marketplace, or creating a unique shopping experience, this stack is a modern foundation that scales with your business.

Disclaimer

Article written with the help of AI.

Read the full Disclaimer HERE