Astro Minimal Boilerplate

अवलोकन

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

यह boilerplate TypeScript, Tailwind CSS 4 और @dodopayments/astro adaptor के साथ Astro 5 का उपयोग करता है। किसी मौजूदा app में वही API routes जोड़ने के लिए Astro Adaptor देखें।

विशेषताएँ

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

त्वरित Setup: clone से चलने वाले pricing page तक लगभग पाँच मिनट में पहुँचें।
Checkout: @dodopayments/astro पर बना 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 का एक LTS version, जिसकी Astro 5 को आवश्यकता है।
Dodo Payments account, dashboard में API key और webhook signing secret बनाने के लिए।

त्वरित शुरुआत

Clone the Repository

git clone https://github.com/dodopayments/dodo-astro-minimal-boilerplate.git
cd dodo-astro-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 copy करें। 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

Root directory में एक .env file बनाने के लिए example file को copy करें:

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:4321/
DODO_PAYMENTS_ENVIRONMENT=test_mode

.env.example, DODO_PAYMENTS_RETURN_URL को port 3000 पर set करता है। इसे 4321 में बदलें, जो Astro dev server द्वारा उपयोग किया जाने वाला port है, ताकि checkout के बाद customer आपके app पर वापस आ सके।API routes इन variables को पढ़ते हैं:

DODO_PAYMENTS_API_KEY checkout और Customer Portal routes को authenticate करता है।
DODO_PAYMENTS_WEBHOOK_KEY webhook signatures को verify करता है।
DODO_PAYMENTS_RETURN_URL वह स्थान है जहाँ checkout payment के बाद 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:4321 खोलें।

Project Structure

Checkout, Customer Portal और webhook API routes src/pages/api/ के अंतर्गत मौजूद हैं:

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

Customization

Product Information अपडेट करें

बदलाव करने के लिए src/lib/products.ts edit करें:

Dodo Payments dashboard के Products से Product IDs
Prices
Features
Descriptions

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

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

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

Customer Portal अपडेट करें

src/components/Header.astro में मौजूद Customer Portal link hardcoded customer ID के साथ /api/customer-portal खोलता है। इसे अपने authentication system या database से customer ID के साथ replace करें:

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

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

Webhook Events

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

onSubscriptionActive तब चलता है जब subscription active हो जाती है (subscription.active)।
onSubscriptionCancelled तब चलता है जब subscription cancel हो जाती है (subscription.cancelled)।

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

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

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

Deployment

Astro pages को static output के रूप में build करता है और हर API route export const prerender = false set करता है, ताकि वह on demand render हो। On-demand routes के लिए आपके deployment platform का Astro adapter आवश्यक है:

Platform	Guide
Vercel	Deploy to Vercel
Netlify	Deploy to Netlify
Cloudflare	Deploy to Cloudflare

अन्य platforms के लिए Astro’s deployment guides देखें। अपने hosting platform में चारों environment variables जोड़ें और DODO_PAYMENTS_RETURN_URL को अपने production URL पर set करें।

Webhook URL अपडेट करें

Deploy करने के बाद Dodo Payments Dashboard में अपना production webhook URL जोड़ें:

https://your-domain.com/api/webhook

हर endpoint का अपना signing secret होता है। अपने production environment में DODO_PAYMENTS_WEBHOOK_KEY को इस endpoint के signing secret पर set करें।

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

इन सामान्य कारणों की जाँच करें:

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 4321

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

Customer portal link doesn't work

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

Build fails with adapter error

API routes on demand render होते हैं और repository में deployment adapter शामिल नहीं है। Production के लिए build करने से पहले अपने platform का Astro adapter install करें।विवरण के लिए Astro’s deployment guides देखें।

अधिक जानें

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

सहायता

Boilerplate के लिए सहायता पाने हेतु:

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

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

अवलोकन

विशेषताएँ

आवश्यकताएँ

त्वरित शुरुआत

Project Structure

Customization

Product Information अपडेट करें

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

Customer Portal अपडेट करें

Webhook Events

Deployment

Webhook URL अपडेट करें

Troubleshooting

अधिक जानें

सहायता

​अवलोकन

​विशेषताएँ

​आवश्यकताएँ

​त्वरित शुरुआत

​Project Structure

​Customization

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

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

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

​Webhook Events

​Deployment

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

​Troubleshooting

​अधिक जानें

​सहायता

अवलोकन

विशेषताएँ

आवश्यकताएँ

त्वरित शुरुआत

Project Structure

Customization

Product Information अपडेट करें

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

Customer Portal अपडेट करें

Webhook Events

Deployment

Webhook URL अपडेट करें

Troubleshooting

अधिक जानें

सहायता