Skip to main content

​
Overview

The Next.js minimal boilerplate provides a ready-to-use starting point for integrating Dodo Payments with your Next.js application. This template includes authentication, webhook handling, and basic payment setup to help you start accepting payments quickly.
This boilerplate uses Next.js App Router with TypeScript and includes example implementations for checkout sessions and webhook verification.

​
Quick Start

1

Clone the Repository

Clone the boilerplate repository and navigate to the project directory:
git clone https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate.git
cd dodo-nextjs-minimal-boilerplate
2

Get Your API Credentials

Obtain your credentials from the Dodo Payments dashboard in Test Mode:
  • API Key: Navigate to Developer → API Keys in your dashboard
  • Webhook Signing Key: Navigate to Developer → Webhooks in your dashboard
Start with Test Mode to safely test your integration without processing real payments.
3

Configure Environment Variables

Create a .env.local file in the root directory:
touch .env.local
Add your Dodo Payments credentials:
.env.local
DODO_API_KEY_TEST=your_test_api_key_here
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_signing_key_here
Never commit your .env.local file to version control. It’s already included in .gitignore.
4

Install Dependencies

Install the required npm packages:
npm install
5

Run the Development Server

Start the Next.js development server:
npm run dev
Your application will be available at http://localhost:3000.
You’re ready to start building! The boilerplate includes example routes and components to help you understand the integration.

​
What’s Included

The boilerplate comes with pre-configured essentials:

Checkout Integration

Example implementation for creating and handling checkout sessions

Webhook Handler

Secure webhook endpoint with signature verification

TypeScript Support

Full TypeScript configuration with proper type definitions

Tailwind CSS

Pre-configured styling with Tailwind CSS

​
Project Structure

dodo-nextjs-minimal-boilerplate/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   └── webhooks/
│   │   │       └── route.ts    # Webhook handler
│   │   └── page.tsx            # Home page with examples
│   └── lib/
│       └── dodo.ts             # Dodo Payments client setup
├── .env.example                # Environment variables template
└── package.json

​
Next Steps

Once you have the boilerplate running:
1

Create Your Products

Add products in your Dodo Payments dashboard to enable checkout functionality.
2

Test Webhooks Locally

Use tools like ngrok to expose your local webhook endpoint for testing:
ngrok http 3000
Add the ngrok URL to your webhook settings in the dashboard.
3

Customize the Integration

Adapt the example code to match your application’s needs and design.
4

Go Live

When ready, switch to Live Mode API keys and deploy your application.

​
Additional Resources

Next.js Adapter

Learn about our comprehensive Next.js adapter for advanced integrations

Integration Guide

Detailed guide for implementing one-time payments

Webhook Events

Complete reference for all webhook event types

API Reference

Explore the full Dodo Payments API documentation

​
Support

Need help with the boilerplate?