मुख्य सामग्री पर जाएं

​
अवलोकन

Next.js न्यूनतम बुनियाद आपके Next.js एप्लिकेशन के साथ Dodo Payments को एकीकृत करने के लिए एक तैयार-से-उपयोग प्रारंभिक बिंदु प्रदान करता है। इस टेम्पलेट में चेकआउट सत्र, वेबहुक हैंडलिंग, ग्राहक पोर्टल, और आधुनिक UI घटक शामिल हैं जो आपको जल्दी से भुगतान स्वीकार करने में मदद करते हैं।
यह boilerplate Next.js 16 App Router को TypeScript, Tailwind CSS 4, और @dodopayments/nextjs एडेप्टर के साथ उपयोग करता है।

​
विशेषताएँ

  • Quick Setup - 5 मिनट से कम में शुरू करें
  • Payment Integration - Pre-configured checkout flow using @dodopayments/nextjs
  • Modern UI - Tailwind CSS के साथ साफ़, डार्क-थीम वाली प्राइसिंग पेज
  • Webhook Handler - भुगतान ईवेंट्स के लिए तुरंत उपयोग योग्य webhook endpoint
  • Customer Portal - एक-क्लिक सब्सक्रिप्शन प्रबंधन
  • TypeScript - न्यूनतम, केंद्रित प्रकारों के साथ पूर्ण रूप से टाइप किया गया
  • Pre-filled Checkout - UX सुधारने के लिए ग्राहक डेटा पास करने का प्रदर्शन करता है

​
पूर्वापेक्षाएँ

शुरू करने से पहले, सुनिश्चित करें कि आपके पास है:
  • Node.js 20.9+ (Next.js 16 के लिए आवश्यक)
  • Dodo Payments खाता (डैशबोर्ड से API और वेबहुक कुंजी तक पहुँचने के लिए)

​
त्वरित प्रारंभ

1

Clone the Repository

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

Install Dependencies

npm install
3

Get API Credentials

Dodo Payments पर साइन अप करें और डैशबोर्ड से अपनी क्रेडेंशियल प्राप्त करें:
डेवलपमेंट के दौरान सुनिश्चित करें कि आप Test Mode में हैं!
4

Configure Environment Variables

रूट डायरेक्टरी में .env फ़ाइल बनाएँ:
cp .env.example .env
अपने Dodo Payments क्रेडेंशियल के साथ मान अपडेट करें:
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
कभी भी अपनी .env फ़ाइल को वर्शन कंट्रोल में कमिट न करें। यह पहले से .gitignore में शामिल है।
5

Add Your Products

Dodo Payments से अपने वास्तविक उत्पाद IDs के साथ src/lib/products.ts को अपडेट करें:
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
];
6

Run the Development Server

npm run dev
अपना प्राइसिंग पेज देखने के लिए http://localhost:3000 खोलें!

​
परियोजना संरचना

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

​
अनुकूलन

​
उत्पाद जानकारी अपडेट करें

Inline_CODE_PLACEHOLDER_9bcd8be2fcab8dfc_END को संशोधित करने के लिए संपादित करें:
  • Product IDs (अपने Dodo डैशबोर्ड से)
  • मूल्य निर्धारण
  • सुविधाएँ
  • विवरण

​
ग्राहक डेटा पूर्व-भरे

src/app/components/ProductCard.tsx में हार्डकोड किए गए मानों को अपने वास्तविक उपयोगकर्ता डेटा से बदलें: 
customer: {
  name: "John Doe",
  email: "john@example.com",
},

​
ग्राहक पोर्टल अपडेट करें

src/app/components/Header.tsx में हार्डकोड किए गए ग्राहक ID को बदलें: 
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
आप परीक्षण के लिए ग्राहक ID प्राप्त करने के लिए एक परीक्षण खरीदारी पूरी कर सकते हैं।

​
वेबहुक घटनाएँ

यह boilerplate src/app/api/webhook/route.ts में दो webhook ईवेंट्स को संभालने का प्रदर्शन करता है:
  • onSubscriptionActive - जब एक सब्सक्रिप्शन सक्रिय हो जाए तो ट्रिगर होता है
  • onPaymentSucceeded - जब भुगतान सफल हो जाए तो ट्रिगर होता है
इन हैंडलरों के अंदर अपना व्यावसायिक लॉजिक जोड़ें: 
onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},
आवश्यकतानुसार अधिक वेबहुक घटनाएँ जोड़ें। स्थानीय विकास के लिए, आप अपने स्थानीय सर्वर के लिए एक सुरक्षित टनल बनाने के लिए ngrok जैसे उपकरणों का उपयोग कर सकते हैं और इसे अपने वेबहुक URL के रूप में उपयोग कर सकते हैं।

​
तैनाती

​
उत्पादन के लिए निर्माण करें

npm run build
npm start

​
Vercel पर तैनात करें

[ Vercel के साथ तैनात करें ](https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate) अपने Vercel डैशबोर्ड में अपने पर्यावरण चर जोड़ना न भूलें!

​
वेबहुक URL अपडेट करें

तैनाती के बाद, अपने वेबहुक URL को Dodo Payments डैशबोर्ड में अपडेट करें: 
https://example.com/api/webhook

​
समस्या निवारण

node_modules को हटाएँ और निर्भरताएँ पुनः इंस्टॉल करें:
rm -rf node_modules package-lock.json
npm install
सामान्य कारण:
  • अमान्य उत्पाद ID - सुनिश्चित करें कि यह आपके Dodo डैशबोर्ड में मौजूद है
  • .env में गलत API key या environment सेटिंग
  • त्रुटियों के लिए ब्राउज़र कंसोल और टर्मिनल की जांच करें
स्थानीय परीक्षण के लिए, अपने सर्वर को एक्सपोज़ करने के लिए ngrok का उपयोग करें:
ngrok http 3000
अपने Dodo dashboard में webhook URL को ngrok URL पर अपडेट करें। सही webhook verification key के साथ अपनी .env फ़ाइल को अपडेट करना न भूलें।

​
अधिक जानें

​
सहायता

बुनियाद के साथ मदद चाहिए?