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

​
अवलोकन

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

​
विशेषताएँ

  • त्वरित सेटअप - 5 मिनट से कम समय में शुरू करें
  • भुगतान एकीकरण - @dodopayments/astro का उपयोग करके पूर्व-कॉन्फ़िगर किया गया चेकआउट प्रवाह
  • आधुनिक UI - Tailwind CSS के साथ साफ, डार्क-थीम वाला मूल्य निर्धारण पृष्ठ
  • वेबहुक हैंडलर - भुगतान घटनाओं के लिए तैयार-से-उपयोग वेबहुक एंडपॉइंट
  • ग्राहक पोर्टल - एक-क्लिक सदस्यता प्रबंधन
  • TypeScript - न्यूनतम, केंद्रित प्रकारों के साथ पूरी तरह से टाइप किया गया
  • पूर्व-भरा चेकआउट - UX में सुधार के लिए ग्राहक डेटा पास करने का प्रदर्शन

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

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

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

1

गिट रिपॉजिटरी क्लोन करें

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

निर्भरता स्थापित करें

npm install
3

API क्रेडेंशियल प्राप्त करें

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

पर्यावरण चर कॉन्फ़िगर करें

रूट निर्देशिका में एक .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:4321/
DODO_PAYMENTS_ENVIRONMENT=test_mode
कभी भी अपने .env फ़ाइल को संस्करण नियंत्रण में कमिट न करें। यह पहले से ही .gitignore में शामिल है।
5

अपने उत्पाद जोड़ें

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

विकास सर्वर चलाएँ

npm run dev
अपने मूल्य निर्धारण पृष्ठ को देखने के लिए http://localhost:4321 खोलें!

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

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

​
अनुकूलन

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

src/lib/products.ts को संपादित करें:
  • उत्पाद IDs (आपके Dodo डैशबोर्ड से)
  • मूल्य निर्धारण
  • विशेषताएँ
  • विवरण

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

src/components/ProductCard.astro में, हार्डकोडेड मानों को अपने वास्तविक उपयोगकर्ता डेटा के साथ बदलें: 
customer: {
  name: "John Doe",
  email: "[email protected]",
},

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

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

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

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

​
तैनाती

यह बॉयलरप्लेट API मार्गों के लिए मांग पर रेंडरिंग के साथ स्थैतिक आउटपुट का उपयोग करता है। आपको अपने तैनाती प्लेटफ़ॉर्म के लिए एक एडेप्टर स्थापित करने की आवश्यकता होगी:
प्लेटफ़ॉर्मगाइड
VercelVercel पर तैनात करें
NetlifyNetlify पर तैनात करें
CloudflareCloudflare पर तैनात करें
सभी प्लेटफार्मों के लिए Astro के तैनाती गाइड देखें।

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

तैनाती के बाद, अपने वेबहुक URL को Dodo Payments डैशबोर्ड में अपडेट करें: 
https://your-domain.com/api/webhook
इसके अलावा, अपने उत्पादन वातावरण में DODO_PAYMENTS_WEBHOOK_KEY पर्यावरण चर को अपडेट करना न भूलें ताकि यह आपके तैनात डोमेन के लिए वेबहुक साइनिंग कुंजी से मेल खाता हो।

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

node_modules को हटा दें और निर्भरताएँ फिर से स्थापित करें:
rm -rf node_modules package-lock.json
npm install
सामान्य कारण:
  • अमान्य उत्पाद ID - सत्यापित करें कि यह आपके Dodo डैशबोर्ड में मौजूद है
  • .env में गलत API कुंजी या पर्यावरण सेटिंग
  • त्रुटियों के लिए ब्राउज़र कंसोल और टर्मिनल की जांच करें
स्थानीय परीक्षण के लिए, अपने सर्वर को उजागर करने के लिए ngrok का उपयोग करें:
ngrok http 4321
अपने Dodo डैशबोर्ड में वेबहुक URL को ngrok URL पर अपडेट करें। सही वेबहुक सत्यापन कुंजी के साथ अपने .env फ़ाइल को अपडेट करना न भूलें।
CUSTOMER_ID को src/components/Header.astro में हार्डकोडेड के बजाय अपने Dodo डैशबोर्ड से वास्तविक ग्राहक ID के साथ बदलें।या ग्राहक ID को गतिशील रूप से लाने के लिए अपने प्रमाणीकरण प्रणाली और डेटाबेस को एकीकृत करें।
यह बॉयलरप्लेट मांग पर API मार्गों के साथ स्थैतिक आउटपुट का उपयोग करता है। तैनाती के लिए आपको एक एडेप्टर स्थापित करने की आवश्यकता है:तथ्यों के लिए Astro के तैनाती गाइड देखें।

​
अधिक जानें

​
सहायता

बॉयलरप्लेट के साथ मदद चाहिए?