Next.js न्यूनतम बुनियाद

अवलोकन

Next.js minimal boilerplate एक starter app है, जिसमें Dodo Payments पहले से कनेक्ट है। अपनी API keys और product IDs जोड़ें और आपको checkout खोलने वाला pricing page, payment events के लिए webhook endpoint और Customer Portal का link मिल जाएगा।

यह boilerplate TypeScript, Tailwind CSS 4 और @dodopayments/nextjs adaptor के साथ Next.js 16 App Router का उपयोग करता है। किसी मौजूदा app में वही route handlers जोड़ने के लिए Next.js Adaptor देखें।

विशेषताएँ

Boilerplate में शामिल हैं:

Quick Setup: Clone से लगभग पाँच मिनट में चलने वाले pricing page तक पहुँचें।
Checkout: @dodopayments/nextjs पर बना pre-configured checkout flow।
Pricing Page: Tailwind CSS से styled dark-themed pricing page।
Webhook Handler: ऐसा endpoint जो प्रत्येक webhook signature को verify करता है और event के लिए आपका code चलाता है।
Customer Portal: ऐसा header link जो Customer Portal खोलता है, जहाँ customers अपनी subscriptions manage करते हैं।
TypeScript: Typed product definitions और handlers।
Pre-filled Checkout: Customer का name और email checkout में भेजता है, ताकि customer को उन्हें दोबारा दर्ज न करना पड़े।

आवश्यकताएँ

शुरू करने से पहले आपके पास ये होना चाहिए:

Node.js 20.9 या बाद का संस्करण, जिसकी Next.js 16 को आवश्यकता है।
Dodo Payments account, जिससे dashboard में API key और webhook signing secret बनाया जा सके।

Quick Start

Clone the Repository

git clone https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate.git
cd dodo-nextjs-minimal-boilerplate

Install Dependencies

npm install

Get API Credentials

Dodo Payments पर sign up करें, फिर dashboard से अपने credentials प्राप्त करें:

API Key: Dashboard → Developer → API Keys के अंतर्गत key बनाएँ।
Webhook Key: Dashboard → Developer → Webhooks के अंतर्गत endpoint जोड़ें, फिर उसका signing secret कॉपी करें। Endpoint URL public होना चाहिए और HTTPS का उपयोग करना चाहिए। अपनी machine पर events प्राप्त करने के लिए Webhook Events देखें।

Sidebar में Live Mode switch बंद होने पर दोनों बनाएँ। Test mode key केवल DODO_PAYMENTS_ENVIRONMENT=test_mode के साथ काम करती है और test mode payments से वास्तविक धन transfer नहीं होता।

Configure Environment Variables

Example file को कॉपी करके root directory में .env file बनाएँ:

cp .env.example .env

Values को अपने Dodo Payments credentials पर set करें:

DODO_PAYMENTS_API_KEY=your_api_key_here
DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_signing_key_here
DODO_PAYMENTS_RETURN_URL=http://localhost:3000
DODO_PAYMENTS_ENVIRONMENT=test_mode

Route handlers इन variables को पढ़ते हैं:

DODO_PAYMENTS_API_KEY checkout और Customer Portal handlers को authenticate करता है।
DODO_PAYMENTS_WEBHOOK_KEY webhook signatures को verify करता है।
DODO_PAYMENTS_RETURN_URL वह URL है जहाँ payment के बाद checkout customer को भेजता है।
DODO_PAYMENTS_ENVIRONMENT, test_mode या live_mode है।

अपनी .env file को version control में commit न करें। Repository की .gitignore पहले से इसे exclude करती है।

Add Your Products

src/lib/products.ts में sample products को अपने products से replace करें। प्रत्येक product_id को dashboard के Products में मौजूद किसी product की ID पर set करें:

export const products: Product[] = [
  {
    product_id: "pdt_001", // Replace with your product ID
    name: "Basic Plan",
    description: "Get access to basic features and support",
    price: 9999, // in cents
    features: [
      "Access to basic features",
      "Email support",
      "1 Team member",
      "Basic analytics",
    ],
  },
  // ... add more products
];

Pricing page इस file से name, description, price और features display करता है। Checkout Dodo Payments में product पर set price charge करता है, इसलिए price को उसके साथ sync रखें।

Run the Development Server

npm run dev

अपना pricing page देखने के लिए http://localhost:3000 खोलें।

Project Structure

Checkout, Customer Portal और webhook route handlers src/app/api/ के अंतर्गत रहते हैं:

src/
├── app/
│   ├── api/
│   │   ├── checkout/          # Checkout session handler
│   │   ├── customer-portal/   # Customer portal redirect
│   │   └── webhook/           # Webhook event handler
│   ├── components/
│   │   ├── Footer.tsx         # Reusable footer
│   │   ├── Header.tsx         # Navigation header
│   │   └── ProductCard.tsx    # Product pricing card
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Pricing page (home)
└── lib/
    └── products.ts            # Product definitions

Customization

Product Information अपडेट करें

इन चीज़ों को बदलने के लिए src/lib/products.ts edit करें:

Product IDs, जो आपके Dodo Payments dashboard के Products से हैं
Prices
Features
Descriptions

Customer Data पहले से भरें

src/app/components/ProductCard.tsx प्रत्येक checkout request के साथ hardcoded name और email भेजता है। इन्हें signed-in user की details से replace करें:

customer: {
  name: "John Doe",
  email: "john@example.com",
},

Customer Portal अपडेट करें

src/app/components/Header.tsx में मौजूद Customer Portal link hardcoded customer ID के साथ /api/customer-portal खोलता है। इसे signed-in user की Dodo Payments customer ID से replace करें:

const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID

Testing के लिए customer ID प्राप्त करने हेतु test purchase पूरा करें, फिर dashboard के Customers से customer की ID कॉपी करें। Production में ID अपने backend से प्राप्त करें।

Webhook Events

src/app/api/webhook/route.ts में मौजूद handler प्रत्येक request को DODO_PAYMENTS_WEBHOOK_KEY से verify करता है, फिर दो events handle करता है:

onSubscriptionActive तब चलता है जब subscription active हो जाती है (subscription.active)।
onPaymentSucceeded तब चलता है जब payment सफल हो जाता है (payment.succeeded)।

इन handlers के अंदर अपना business logic जोड़ें:

onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},

अधिक events handle करने के लिए उनके handlers जोड़ें, जैसे onSubscriptionCancelled। Next.js Adaptor सभी supported handlers की सूची देता है। Dodo Payments localhost तक नहीं पहुँच सकता। Local development के लिए अपने local server को expose करने हेतु ngrok जैसे tunnel का उपयोग करें और tunnel URL को अपने webhook endpoint के रूप में इस्तेमाल करें।

Deployment

Production के लिए Build करें

npm run build
npm start

Vercel पर Deploy करें

[

](https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate) Vercel dashboard में चारों environment variables जोड़ें और DODO_PAYMENTS_RETURN_URL को अपने production URL पर set करें।

Webhook URL अपडेट करें

Deploy करने के बाद Dodo Payments Dashboard में अपना production webhook URL जोड़ें और example.com की जगह अपना domain डालें:

https://example.com/api/webhook

प्रत्येक endpoint का अपना signing secret होता है। नए endpoint का secret अपने production environment में DODO_PAYMENTS_WEBHOOK_KEY में कॉपी करें।

Troubleshooting

Module not found or build errors

node_modules और package-lock.json delete करें, फिर dependencies reinstall करें:

rm -rf node_modules package-lock.json
npm install

Checkout redirect fails

इन common causes की जाँच करें:

Product ID आपके Dodo Payments dashboard में मौजूद नहीं है।
.env में API key या DODO_PAYMENTS_ENVIRONMENT गलत है। Test mode key केवल test_mode के साथ काम करती है।

Browser console और npm run dev चलाने वाले terminal में error देखें।

Webhooks not receiving events

Local testing के लिए अपने server को expose करने हेतु ngrok का उपयोग करें:

ngrok http 3000

अपने Dodo dashboard में ngrok HTTPS URL के बाद /api/webhook लगाकर endpoint जोड़ें। उस endpoint का signing secret अपनी .env file में DODO_PAYMENTS_WEBHOOK_KEY में कॉपी करें।

Customer portal link doesn't work

src/app/components/Header.tsx में hardcoded CUSTOMER_ID को अपने Dodo Payments dashboard में मौजूद customer की ID से replace करें।Production में इसके बजाय customer ID अपने authentication system और database से प्राप्त करें।

अधिक जानकारी

Dodo Payments Documentation
Checkout Sessions Documentation
Webhooks Documentation
Next.js Adaptor: Checkout, CustomerPortal और Webhooks handlers के options

सहायता

Boilerplate में सहायता के लिए:

Discord community में प्रश्न पूछें।
GitHub repository में issues report करें और updates follow करें।
Support team को email करें।

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Next.js न्यूनतम बुनियाद

अवलोकन

विशेषताएँ

आवश्यकताएँ

Quick Start

Project Structure

Customization

Product Information अपडेट करें

Customer Data पहले से भरें

Customer Portal अपडेट करें

Webhook Events

Deployment

Production के लिए Build करें

Vercel पर Deploy करें

Webhook URL अपडेट करें

Troubleshooting

अधिक जानकारी

सहायता

​अवलोकन

​विशेषताएँ

​आवश्यकताएँ

​Quick Start

​Project Structure

​Customization

​Product Information अपडेट करें

​Customer Data पहले से भरें

​Customer Portal अपडेट करें

​Webhook Events

​Deployment

​Production के लिए Build करें

​Vercel पर Deploy करें

​Webhook URL अपडेट करें

​Troubleshooting

​अधिक जानकारी

​सहायता

अवलोकन

विशेषताएँ

आवश्यकताएँ

Quick Start

Project Structure

Customization

Product Information अपडेट करें

Customer Data पहले से भरें

Customer Portal अपडेट करें

Webhook Events

Deployment

Production के लिए Build करें

Vercel पर Deploy करें

Webhook URL अपडेट करें

Troubleshooting

अधिक जानकारी

सहायता