> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Astro Minimal Boilerplate

> अपने Astro एप्लिकेशन में Dodo Payments को एकीकृत करने के लिए हमारे न्यूनतम Astro बॉयलरप्लेट के साथ जल्दी शुरू करें

## अवलोकन

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

<Info>
  यह बॉयलरप्लेट Astro 5, TypeScript, Tailwind CSS 4, और `@dodopayments/astro` एडाप्टर का उपयोग करता है।
</Info>

### विशेषताएँ

* **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 और वेबहुक कुंजी तक पहुँचने के लिए)

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

<Steps>
  <Step title="Clone the Repository">
    ```bash theme={null}
    git clone https://github.com/dodopayments/dodo-astro-minimal-boilerplate.git
    cd dodo-astro-minimal-boilerplate
    ```
  </Step>

  <Step title="Install Dependencies">
    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Get API Credentials">
    [Dodo Payments](https://dodopayments.com/) पर साइन अप करें और डैशबोर्ड से अपनी क्रेडेंशियल्स प्राप्त करें:

    * **API कुंजी:** [डैशबोर्ड → डेवलपर → API कुंजी](https://app.dodopayments.com/developer/api-keys)
    * **वेबहुक कुंजी:** [डैशबोर्ड → डेवलपर → वेबहुक](https://app.dodopayments.com/developer/webhooks)

    <Tip>
      डेवलप करते समय सुनिश्चित करें कि आप **Test Mode** में हैं!
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    रूट डायरेक्टरी में `.env` फ़ाइल बनाएँ:

    ```bash theme={null}
    cp .env.example .env
    ```

    अपने Dodo Payments क्रेडेंशियल के साथ मान अपडेट करें:

    ```env theme={null}
    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
    ```

    <Warning>
      अपनी `.env` फ़ाइल को वर्शन कंट्रोल में कभी कमिट न करें। यह पहले से ही `.gitignore` में शामिल है।
    </Warning>
  </Step>

  <Step title="Add Your Products">
    अपने वास्तविक Dodo Payments उत्पाद आईडी के साथ `src/lib/products.ts` को अपडेट करें:

    ```typescript theme={null}
    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
    ];
    ```
  </Step>

  <Step title="Run the Development Server">
    ```bash theme={null}
    npm run dev
    ```

    [http://localhost:4321](http://localhost:4321) खोलें और अपने प्राइसिंग पेज को देखें!
  </Step>
</Steps>

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

```text theme={null}
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` में, हार्डकोड किए गए मानों को अपने वास्तविक उपयोगकर्ता डेटा से बदलें:

```typescript theme={null}
customer: {
  name: "John Doe",
  email: "john@example.com",
},
```

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

`src/components/Header.astro` में, हार्डकोड ग्राहक आईडी को अपने ऑथ सिस्टम या डेटाबेस से वास्तविक ग्राहक आईडी से बदलें:

```typescript theme={null}
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
```

आप परीक्षण के लिए ग्राहक ID प्राप्त करने के लिए एक परीक्षण खरीदारी पूरी कर सकते हैं।

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

यह बॉयलरप्लेट `src/pages/api/webhook.ts` में वेबहुक ईवेंट्स को हैंडल करने का प्रदर्शन करता है:

* `onSubscriptionActive` - जब एक सब्सक्रिप्शन सक्रिय हो जाता है तब ट्रिगर

* `onSubscriptionCancelled` - जब एक सब्सक्रिप्शन रद्द किया जाता है तब ट्रिगर

* `onSubscriptionActive` - जब एक सदस्यता सक्रिय होती है तो ट्रिगर किया जाता है

* `onSubscriptionCancelled` - जब एक सदस्यता रद्द की जाती है तो ट्रिगर किया जाता है

इन हैंडलरों के अंदर अपना व्यावसायिक तर्क जोड़ें:

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

आवश्यकतानुसार अधिक वेबहुक घटनाएँ जोड़ें।

स्थानीय विकास के लिए, आप अपने स्थानीय सर्वर के लिए एक सुरक्षित टनल बनाने के लिए [ngrok](https://ngrok.com/) जैसे उपकरणों का उपयोग कर सकते हैं और इसका उपयोग अपने वेबहुक URL के रूप में कर सकते हैं।

## तैनाती

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

| प्लेटफ़ॉर्म | गाइड                                                                              |
| ----------- | --------------------------------------------------------------------------------- |
| Vercel      | [Vercel पर तैनात करें](https://docs.astro.build/en/guides/deploy/vercel/)         |
| Netlify     | [Netlify पर तैनात करें](https://docs.astro.build/en/guides/deploy/netlify/)       |
| Cloudflare  | [Cloudflare पर तैनात करें](https://docs.astro.build/en/guides/deploy/cloudflare/) |

सभी प्लेटफार्मों के लिए [Astro के तैनाती गाइड](https://docs.astro.build/en/guides/deploy/) देखें।

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

तैनाती के बाद, अपने वेबहुक URL को [Dodo Payments डैशबोर्ड](https://app.dodopayments.com/developer/webhooks) में अपडेट करें:

```text theme={null}
https://your-domain.com/api/webhook
```

इसके अलावा, अपने तैनात डोमेन के वेबहुक साइनिंग की से मेल खाने के लिए अपने प्रोडक्शन वातावरण में `DODO_PAYMENTS_WEBHOOK_KEY` पर्यावरण चर को अपडेट करना न भूलें।

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

<AccordionGroup>
  <Accordion title="Module not found or build errors">
    `node_modules` को हटाएँ और डिपेंडेंसीज़ को फिर से इंस्टॉल करें:

    ```bash theme={null}
    rm -rf node_modules package-lock.json
    npm install
    ```
  </Accordion>

  <Accordion title="Checkout redirect fails">
    **Common causes:**

    * अमान्य उत्पाद आईडी - सुनिश्चित करें कि यह आपके Dodo डैशबोर्ड में मौजूद है
    * `.env` में गलत API कुंजी या पर्यावरण सेटिंग
    * त्रुटियों के लिए ब्राउज़र कंसोल और टर्मिनल जांचें
  </Accordion>

  <Accordion title="Webhooks not receiving events">
    लोकल परीक्षण के लिए, अपने सर्वर को एक्सपोज़ करने के लिए [ngrok](https://ngrok.com) का उपयोग करें:

    ```bash theme={null}
    ngrok http 4321
    ```

    अपने [Dodo dashboard](https://app.dodopayments.com/developer/webhooks) में वेबहुक URL को ngrok URL में अपडेट करें। सही वेबहुक सत्यापन कुंजी के साथ अपने .env फ़ाइल को अपडेट करना न भूलें।
  </Accordion>

  <Accordion title="Customer portal link doesn't work">
    `src/components/Header.astro` में हार्डकोड `CUSTOMER_ID` को अपने Dodo डैशबोर्ड से वास्तविक ग्राहक आईडी से बदलें।

    या अपने ऑथेंटिकेशन सिस्टम और डेटाबेस को इंटीग्रेट करें ताकि ग्राहक आईडी को डायनामिक रूप से प्राप्त किया जा सके।
  </Accordion>

  <Accordion title="Build fails with adapter error">
    यह बॉयलरप्लेट ऑन-डिमांड API रूट्स के साथ स्टैटिक आउटपुट का उपयोग करता है। आपको डिप्लॉयमेंट के लिए एक एडाप्टर इंस्टॉल करना होगा:

    विस्तार के लिए [Astro's deployment guides](https://docs.astro.build/en/guides/deploy/) देखें।
  </Accordion>
</AccordionGroup>

## अधिक जानें

* [डोडो पेमेंट्स प्रलेखन](https://docs.dodopayments.com/)
* [चेकआउट सत्र प्रलेखन](https://docs.dodopayments.com/developer-resources/checkout-session)
* [वेबहुक प्रलेखन](https://docs.dodopayments.com/developer-resources/webhooks)

## सहायता

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

* प्रश्नों और चर्चाओं के लिए हमारे [Discord समुदाय](https://discord.gg/bYqAp4ayYh) में शामिल हों
* मुद्दों और अपडेट के लिए [GitHub रिपॉजिटरी](https://github.com/dodopayments/dodo-astro-minimal-boilerplate) की जांच करें
* सहायता के लिए हमारी [सहायता टीम](mailto:support@dodopayments.com) से संपर्क करें