microCMS × Stripe Simple Commerce Template

View on GitHub

A Next.js-based e-commerce template integrating microCMS for product management and Stripe Checkout for payments. Features product sync, draft preview, and webhook integration for real-time updates, providing a ready-to-use e-commerce solution.

Key Features

Product Display: Browse products managed through microCMS on the homepage
Product Details: Individual product pages with full information
Stripe Integration: Secure checkout using Stripe Checkout for payments
Webhook Sync: Optional microCMS webhook support to synchronize product updates and pricing with Stripe
Draft Preview: Preview functionality for content drafts
Responsive Design: Modern UI design powered by Tailwind CSS

Technology Stack

Framework: Next.js (Node.js 16.8+)
Language: TypeScript (95.2% of codebase)
Styling: Tailwind CSS
CMS: microCMS API
Payment: Stripe API

Setup

Three environment variables are required:

MICROCMS_API_KEY=your_microcms_api_key
MICROCMS_SERVICE_DOMAIN=your_service_domain
STRIPE_SECRET_API_KEY=your_stripe_secret_key

Starting Development Server

npm run dev

Advanced Feature

The template includes a webhook API (app/api/webhook/route.ts) that enables real-time synchronization of product information and pricing changes from microCMS to Stripe. This allows automatic updates to Stripe when product information is changed in the CMS.

Benefits

Using this template, you can quickly build an e-commerce site combining a headless CMS with Stripe payments. Manage products through microCMS's intuitive UI while leveraging Stripe's secure payment infrastructure.

Supported Platforms

Works on macOS, Windows (including WSL), and Linux.

License

MIT