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

अवलोकन

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

विशेषताएँ

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

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

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

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

1

Clone the Repository

git clone https://github.com/dodopayments/dodo-astro-minimal-boilerplate.git
cd dodo-astro-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:4321/
DODO_PAYMENTS_ENVIRONMENT=test_mode
अपनी .env फ़ाइल को वर्शन कंट्रोल में कभी कमिट न करें। यह पहले से ही .gitignore में शामिल है।
5

Add Your Products

अपने वास्तविक Dodo Payments उत्पाद आईडी के साथ 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: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 को संपादित करें ताकि आप निम्न को संशोधित कर सकें:
  • अपने Dodo डैशबोर्ड से उत्पाद आईडी
  • मूल्य निर्धारण
  • विशेषताएँ
  • विवरण

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

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

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

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

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

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

तैनाती

यह बॉयलरप्लेट API मार्गों के लिए मांग पर रेंडरिंग के साथ स्थैतिक आउटपुट का उपयोग करता है। आपको अपने तैनाती प्लेटफ़ॉर्म के लिए एक एडेप्टर स्थापित करने की आवश्यकता होगी: सभी प्लेटफार्मों के लिए 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
Common causes:
  • अमान्य उत्पाद आईडी - सुनिश्चित करें कि यह आपके Dodo डैशबोर्ड में मौजूद है
  • .env में गलत API कुंजी या पर्यावरण सेटिंग
  • त्रुटियों के लिए ब्राउज़र कंसोल और टर्मिनल जांचें
लोकल परीक्षण के लिए, अपने सर्वर को एक्सपोज़ करने के लिए ngrok का उपयोग करें:
ngrok http 4321
अपने Dodo dashboard में वेबहुक URL को ngrok URL में अपडेट करें। सही वेबहुक सत्यापन कुंजी के साथ अपने .env फ़ाइल को अपडेट करना न भूलें।
यह बॉयलरप्लेट ऑन-डिमांड API रूट्स के साथ स्टैटिक आउटपुट का उपयोग करता है। आपको डिप्लॉयमेंट के लिए एक एडाप्टर इंस्टॉल करना होगा:विस्तार के लिए Astro’s deployment guides देखें।

अधिक जानें

सहायता

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