> ## 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.

# ओवरले चेकआउट

> Dodo Payments ओवरले चेकआउट को एम्बेड करने और रीयल-टाइम में चेकआउट घटनाओं को सुनने के लिए एक आधुनिक TypeScript पुस्तकालय।

## अवलोकन

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

<Frame>
  <img src="https://mintcdn.com/dodopayments/mOQO5ej_lx0yH9p-/images/cover-images/overlay-checkout.png?fit=max&auto=format&n=mOQO5ej_lx0yH9p-&q=85&s=15d90c695e92914a9d54b10509d6fe47" alt="Overlay Checkout Cover Image" style={{ maxHeight: '500px', width: 'auto' }} width="3826" height="2160" data-path="images/cover-images/overlay-checkout.png" />
</Frame>

## डेमो

<Card title="Interactive Demo" icon="play" href="https://atlas.dodopayments.com/pricing">
  हमारे लाइव डेमो के साथ ओवरले चेकआउट को क्रियाशील अवस्था में देखें।
</Card>

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

कुछ कोड की पंक्तियों में Dodo Payments चेकआउट SDK के साथ शुरू करें:

```typescript theme={null}
import { DodoPayments } from "dodopayments-checkout";

// Initialize the SDK
DodoPayments.Initialize({
  mode: "test", // 'test' or 'live'
  displayType: "overlay", // Optional: defaults to 'overlay' for overlay checkout
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

// Open checkout
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
});
```

<Tip>
  अपना चेकआउट URL [create checkout session API](/api-reference/checkout-sessions/create) से प्राप्त करें।
</Tip>

## चरण-दर-चरण एकीकरण गाइड

<Steps>
  <Step title="Install the SDK">
    अपने पसंदीदा पैकेज प्रबंधक का उपयोग करके Dodo Payments चेकआउट SDK स्थापित करें:

    <CodeGroup>
      ```bash npm theme={null}
      npm install dodopayments-checkout
      ```

      ```bash yarn theme={null}
      yarn add dodopayments-checkout
      ```

      ```bash pnpm theme={null}
      pnpm add dodopayments-checkout
      ```
    </CodeGroup>
  </Step>

  <Step title="Initialize the SDK">
    अपने एप्लिकेशन में SDK को प्रारंभ करें, आमतौर पर आपके मुख्य घटक या ऐप के प्रवेश बिंदु में:

    ```typescript theme={null}
    import { DodoPayments } from "dodopayments-checkout";

    DodoPayments.Initialize({
      mode: "test", // Change to 'live' for production
      displayType: "overlay", // Optional: defaults to 'overlay' for overlay checkout
      onEvent: (event) => {
        console.log("Checkout event:", event);
        
        // Handle different events
        switch (event.event_type) {
          case "checkout.opened":
            // Checkout overlay has been opened
            break;
          case "checkout.closed":
            // Checkout has been closed
            break;
          case "checkout.error":
            // Handle errors
            console.error("Checkout error:", event.data?.message);
            break;
        }
      },
    });
    ```

    <Warning>
      चेकआउट खोलने का प्रयास करने से पहले हमेशा SDK को इनिशियलाइज़ करें। इनिशियलाइज़ेशन आपके एप्लिकेशन के लोड होने पर एक बार होना चाहिए।
    </Warning>
  </Step>

  <Step title="Create a Checkout Button Component">
    एक घटक बनाएं जो चेकआउट ओवरले को खोलता है:

    ```typescript theme={null}
    // components/CheckoutButton.tsx
    "use client";

    import { Button } from "@/components/ui/button";
    import { DodoPayments } from "dodopayments-checkout";
    import { useEffect, useState } from "react";

    export function CheckoutButton() {
      const [isLoading, setIsLoading] = useState(false);

      useEffect(() => {
        // Initialize the SDK
        DodoPayments.Initialize({
          mode: "test",
          displayType: "overlay",
          onEvent: (event) => {
            switch (event.event_type) {
              case "checkout.opened":
                setIsLoading(false);
                break;
              case "checkout.error":
                setIsLoading(false);
                console.error("Checkout error:", event.data?.message);
                break;
            }
          },
        });
      }, []);

      const handleCheckout = async () => {
        try {
          setIsLoading(true);
          await DodoPayments.Checkout.open({
            checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
          });
        } catch (error) {
          console.error("Failed to open checkout:", error);
          setIsLoading(false);
        }
      };

      return (
        <Button 
          onClick={handleCheckout}
          disabled={isLoading}
        >
          {isLoading ? "Loading..." : "Checkout Now"}
        </Button>
      );
    }
    ```
  </Step>

  <Step title="Add Checkout to Your Page">
    अपने एप्लिकेशन में चेकआउट बटन घटक का उपयोग करें:

    ```typescript theme={null}
    // app/page.tsx
    import { CheckoutButton } from "@/components/CheckoutButton";

    export default function Home() {
      return (
        <main className="flex min-h-screen flex-col items-center justify-center p-24">
          <h1>Welcome to Our Store</h1>
          <CheckoutButton />
        </main>
      );
    }
    ```
  </Step>

  <Step title="Handle Success and Failure Pages">
    चेकआउट रीडायरेक्ट को संभालने के लिए पृष्ठ बनाएं:

    ```typescript theme={null}
    // app/success/page.tsx
    export default function SuccessPage() {
      return (
        <div className="flex min-h-screen flex-col items-center justify-center">
          <h1>Payment Successful!</h1>
          <p>Thank you for your purchase.</p>
        </div>
      );
    }

    // app/failure/page.tsx
    export default function FailurePage() {
      return (
        <div className="flex min-h-screen flex-col items-center justify-center">
          <h1>Payment Failed</h1>
          <p>Please try again or contact support.</p>
        </div>
      );
    }
    ```
  </Step>

  <Step title="Test Your Integration">
    1. अपने विकास सर्वर को प्रारंभ करें:

    ```bash theme={null}
    npm run dev
    ```

    2. चेकआउट प्रवाह का परीक्षण करें:
       * चेकआउट बटन पर क्लिक करें
       * सत्यापित करें कि ओवरले प्रकट होता है
       * परीक्षण क्रेडेंशियल्स का उपयोग करके भुगतान प्रवाह का परीक्षण करें
       * पुष्टि करें कि रीडायरेक्ट सही ढंग से काम करते हैं

    <Check>
      आपको अपने ब्राउज़र कंसोल में चेकआउट ईवेंट लॉग होते हुए दिखाई देने चाहिए।
    </Check>
  </Step>

  <Step title="Go Live">
    जब आप उत्पादन के लिए तैयार हों:

    1. मोड को `'live'` में बदलें:

    ```typescript theme={null}
    DodoPayments.Initialize({
      mode: "live",
      displayType: "overlay",
      onEvent: (event) => {
        console.log("Checkout event:", event);
      }
    });
    ```

    2. अपने चेकआउट URLs को अपने बैकएंड से लाइव चेकआउट सत्रों का उपयोग करने के लिए अपडेट करें
    3. उत्पादन में पूर्ण प्रवाह का परीक्षण करें
    4. घटनाओं और त्रुटियों की निगरानी करें
  </Step>
</Steps>

## API संदर्भ

### कॉन्फ़िगरेशन

#### प्रारंभ विकल्प

```typescript theme={null}
interface InitializeOptions {
  mode: "test" | "live";
  displayType?: "overlay" | "inline";
  onEvent: (event: CheckoutEvent) => void;
}
```

| विकल्प        | प्रकार                  | आवश्यक | विवरण                                                                                      |
| ------------- | ----------------------- | ------ | ------------------------------------------------------------------------------------------ |
| `mode`        | `"test" \| "live"`      | हाँ    | Environment mode: `'test'` विकास के लिए, `'live'` उत्पादन के लिए                           |
| `displayType` | `"overlay" \| "inline"` | नहीं   | Display type: `'overlay'` मोडल चेकआउट (डिफ़ॉल्ट) के लिए, `'inline'` एम्बेडेड चेकआउट के लिए |
| `onEvent`     | `function`              | हाँ    | किस्‍म के ईवेंट्स को संभालने के लिए कॉलबैक फ़ंक्शन                                         |

#### चेकआउट विकल्प

```typescript theme={null}
interface CheckoutOptions {
  checkoutUrl: string;
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
  };
}
```

| विकल्प                      | प्रकार    | आवश्यक | विवरण                                                                                                                                                                     |
| --------------------------- | --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `checkoutUrl`               | `string`  | हां    | [चेकआउट सेशन API](/api-reference/checkout-sessions/create) से चेकआउट सेशन URL                                                                                             |
| `options.showTimer`         | `boolean` | नहीं   | चेकआउट टाइमर को दिखाएं या छिपाएं। डिफ़ॉल्ट रूप से इसे `true` पर सेट किया गया है। जब निष्क्रिय हो, तो आपको सेशन समाप्त होने पर `checkout.link_expired` इवेंट प्राप्त होगा। |
| `options.showSecurityBadge` | `boolean` | नहीं   | सुरक्षा बैज को दिखाएं या छिपाएं। डिफ़ॉल्ट रूप से इसे `true` पर सेट किया गया है।                                                                                           |

### विधियाँ

#### चेकआउट खोलें

निर्दिष्ट चेकआउट सत्र URL के साथ चेकआउट ओवरले खोलता है।

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
});
```

आप चेकआउट व्यवहार को अनुकूलित करने के लिए अतिरिक्त विकल्प भी पास कर सकते हैं:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    showTimer: false,
    showSecurityBadge: false,
  },
});
```

#### चेकआउट बंद करें

प्रोग्रामेटिक रूप से चेकआउट ओवरले को बंद करता है।

```typescript theme={null}
DodoPayments.Checkout.close();
```

#### स्थिति जांचें

जांचता है कि चेकआउट ओवरले वर्तमान में खुला है या नहीं।

```typescript theme={null}
const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean
```

### इवेंट्स

SDK रीयल-टाइम इवेंट्स प्रदान करता है जिन्हें आप `onEvent` कॉलबैक के माध्यम से सुन सकते हैं:

```typescript theme={null}
DodoPayments.Initialize({
  onEvent: (event: CheckoutEvent) => {
    switch (event.event_type) {
      case "checkout.opened":
        // Checkout overlay has been opened
        break;
      case "checkout.form_ready":
        // Checkout form is ready for user input
        break;
      case "checkout.payment_page_opened":
        // Payment page has been displayed
        break;
      case "checkout.customer_details_submitted":
        // Customer and billing details submitted
        break;
      case "checkout.closed":
        // Checkout has been closed
        break;
      case "checkout.redirect":
        // Checkout will perform a redirect
        break;
      case "checkout.error":
        // An error occurred
        console.error("Error:", event.data?.message);
        break;
      case "checkout.link_expired":
        // Checkout session has expired (only when showTimer is false)
        break;
    }
  }
});
```

| इवेंट प्रकार                          | विवरण                                                                                                    |
| ------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| `checkout.opened`                     | चेकआउट ओवरले खोला गया                                                                                    |
| `checkout.form_ready`                 | चेकआउट फॉर्म उपयोगकर्ता इनपुट को प्राप्त करने के लिए तैयार है। लोडिंग स्टेट्स छिपाने के लिए उपयोगी।      |
| `checkout.payment_page_opened`        | भुगतान पृष्ठ प्रदर्शित किया गया                                                                          |
| `checkout.customer_details_submitted` | ग्राहक और बिलिंग विवरण सबमिट किये गए                                                                     |
| `checkout.closed`                     | चेकआउट ओवरले बंद किया गया                                                                                |
| `checkout.redirect`                   | चेकआउट एक रीडायरेक्ट करेगा                                                                               |
| `checkout.error`                      | चेकआउट के दौरान एक त्रुटि आई                                                                             |
| `checkout.link_expired`               | फायर तब होता है जब चेकआउट सेशन समाप्त होता है। केवल तब प्राप्त होता है जब `showTimer` `false` पर सेट हो। |

## कार्यान्वयन विकल्प

### पैकेज मैनेजर इंस्टॉलेशन

npm, yarn, या pnpm के माध्यम से इंस्टॉल करें जैसा कि [चरण-दर-चरण एकीकरण गाइड](#step-by-step-integration-guide) में दिखाया गया है।

### CDN कार्यान्वयन

बिना किसी निर्माण चरण के त्वरित एकीकरण के लिए, आप हमारे CDN का उपयोग कर सकते हैं:

```html theme={null}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dodo Payments Checkout</title>
    
    <!-- Load DodoPayments -->
    <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
    <script>
        // Initialize the SDK
        DodoPaymentsCheckout.DodoPayments.Initialize({
            mode: "test", // Change to 'live' for production
            displayType: "overlay",
            onEvent: (event) => {
                console.log('Checkout event:', event);
            }
        });
    </script>
</head>
<body>
    <button onclick="openCheckout()">Checkout Now</button>

    <script>
        function openCheckout() {
            DodoPaymentsCheckout.DodoPayments.Checkout.open({
                checkoutUrl: "https://checkout.dodopayments.com/session/cks_123"
            });
        }
    </script>
</body>
</html>
```

### थीम अनुकूलन

आप चेकआउट की उपस्थिति को अनुकूलित कर सकते हैं ताकि जब चेकआउट खोला जाए तब `options` पैरामीटर में एक `themeConfig` ऑब्जेक्ट पास किया जाए। थीम कॉन्फ़िगरेशन लाइट और डार्क मोड दोनों का समर्थन करता है, जिससे आप रंग, सीमाएं, पाठ, बटन और सीमा त्रिज्या को अनुकूलित कर सकते हैं।

<Info>
  यह खंड **क्लाइंट-साइड** थीम कॉन्फ़िगरेशन को कवर करता है जो चेकआउट SDK का उपयोग करके किया गया है। आप API का उपयोग करते समय चेकआउट सेशन बनाते समय **सर्वर-साइड** पर भी थीम्स को कॉन्फ़िगर कर सकते हैं `theme_config` पैरामीटर का उपयोग करके। API-स्तरीय कॉन्फ़िगरेशन के लिए [चेकआउट थीम अनुकूलन](/features/checkout#checkout-theme-customization) देखें, या [डिज़ाइन पृष्ठ](/features/design) का उपयोग करके डैशबोर्ड में थिम्स को विज़ुअली कॉन्फ़िगर करें और लाइव पूर्वावलोकन प्राप्त करें।
</Info>

#### बुनियादी थीम कॉन्फ़िगरेशन

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        textPrimary: "#344054",
        buttonPrimary: "#A6E500",
      },
      dark: {
        bgPrimary: "#0D0D0D",
        textPrimary: "#FFFFFF",
        buttonPrimary: "#A6E500",
      },
      radius: "8px",
    },
  },
});
```

#### पूर्ण थीम कॉन्फ़िगरेशन

सभी उपलब्ध थीम गुण:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        // Background colors
        bgPrimary: "#FFFFFF",        // Primary background color
        bgSecondary: "#F9FAFB",      // Secondary background color (e.g., tabs)
        
        // Border colors
        borderPrimary: "#D0D5DD",     // Primary border color
        borderSecondary: "#6B7280",  // Secondary border color
        
        // Text colors
        textPrimary: "#344054",       // Primary text color
        textSecondary: "#6B7280",    // Secondary text color
        textPlaceholder: "#667085",  // Placeholder text color
        textError: "#D92D20",        // Error text color
        textSuccess: "#10B981",      // Success text color
        
        // Button colors
        buttonPrimary: "#A6E500",           // Primary button background
        buttonPrimaryHover: "#8CC500",      // Primary button hover state
        buttonTextPrimary: "#0D0D0D",       // Primary button text color
        buttonSecondary: "#F3F4F6",         // Secondary button background
        buttonSecondaryHover: "#E5E7EB",     // Secondary button hover state
        buttonTextSecondary: "#344054",     // Secondary button text color
      },
      dark: {
        // Background colors
        bgPrimary: "#0D0D0D",
        bgSecondary: "#1A1A1A",
        
        // Border colors
        borderPrimary: "#323232",
        borderSecondary: "#D1D5DB",
        
        // Text colors
        textPrimary: "#FFFFFF",
        textSecondary: "#909090",
        textPlaceholder: "#9CA3AF",
        textError: "#F97066",
        textSuccess: "#34D399",
        
        // Button colors
        buttonPrimary: "#A6E500",
        buttonPrimaryHover: "#8CC500",
        buttonTextPrimary: "#0D0D0D",
        buttonSecondary: "#2A2A2A",
        buttonSecondaryHover: "#3A3A3A",
        buttonTextSecondary: "#FFFFFF",
      },
      radius: "8px", // Border radius for inputs, buttons, and tabs
    },
  },
});
```

#### केवल लाइट मोड

यदि आप केवल लाइट थीम को अनुकूलित करना चाहते हैं:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        textPrimary: "#000000",
        buttonPrimary: "#0070F3",
      },
      radius: "12px",
    },
  },
});
```

#### केवल डार्क मोड

यदि आप केवल डार्क थीम को अनुकूलित करना चाहते हैं:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      dark: {
        bgPrimary: "#000000",
        textPrimary: "#FFFFFF",
        buttonPrimary: "#0070F3",
      },
      radius: "12px",
    },
  },
});
```

#### आंशिक थीम ओवरराइड

आप केवल विशिष्ट गुणों को ओवरराइड कर सकते हैं। चेकआउट उन गुणों के लिए डिफ़ॉल्ट मान का उपयोग करेगा जिन्हें आप निर्दिष्ट नहीं करते:

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    themeConfig: {
      light: {
        buttonPrimary: "#FF6B6B", // Only override primary button color
      },
      radius: "16px", // Override border radius
    },
  },
});
```

#### अन्य विकल्पों के साथ थीम कॉन्फ़िगरेशन

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

```typescript theme={null}
DodoPayments.Checkout.open({
  checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
  options: {
    showTimer: true,
    showSecurityBadge: true,
    themeConfig: {
      light: {
        bgPrimary: "#FFFFFF",
        buttonPrimary: "#A6E500",
      },
      dark: {
        bgPrimary: "#0D0D0D",
        buttonPrimary: "#A6E500",
      },
      radius: "8px",
    },
  },
});
```

#### टाइपस्क्रिप्ट प्रकार

टाइपस्क्रिप्ट उपयोगकर्ताओं के लिए, सभी थीम कॉन्फ़िगरेशन प्रकार निर्यात किए जाते हैं:

```typescript theme={null}
import { ThemeConfig, ThemeModeConfig } from "dodopayments-checkout";

const themeConfig: ThemeConfig = {
  light: {
    bgPrimary: "#FFFFFF",
    // ... other properties
  },
  dark: {
    bgPrimary: "#0D0D0D",
    // ... other properties
  },
  radius: "8px",
};
```

## त्रुटि हैंडलिंग

SDK इवेंट सिस्टम के माध्यम से विस्तृत त्रुटि जानकारी प्रदान करता है। हमेशा अपने `onEvent` कॉलबैक में उचित त्रुटि हैंडलिंग लागू करें:

```typescript theme={null}
DodoPayments.Initialize({
  mode: "test",
  displayType: "overlay",
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Handle error appropriately
      // You may want to show a user-friendly error message
      // or retry the checkout process
    }
    if (event.event_type === "checkout.link_expired") {
      // Handle expired checkout session
      console.warn("Checkout session has expired");
    }
  }
});
```

<Warning>
  जब त्रुटियाँ होती हैं, तो एक अच्छा उपयोगकर्ता अनुभव प्रदान करने के लिए हमेशा `checkout.error` इवेंट को संभालें।
</Warning>

## सर्वोत्तम प्रथाएँ

1. **एक बार प्रारंभ करें**: आपके एप्लिकेशन लोड होने पर SDK को एक बार प्रारंभ करें, न कि हर चेकआउट प्रयास पर
2. **त्रुटि हैंडलिंग**: हमेशा अपने इवेंट कॉलबैक में उचित त्रुटि हैंडलिंग लागू करें
3. **टेस्ट मोड**: विकास के दौरान `test` मोड का उपयोग करें और केवल जब उत्पादन के लिए तैयार हो जाए तब `live` पर स्विच करें
4. **इवेंट हैंडलिंग**: एक संपूर्ण उपयोगकर्ता अनुभव के लिए सभी प्रासंगिक इवेंट्स को हैंडल करें
5. **मान्य URLs**: हमेशा चेकआउट URL का उपयोग करें जो [चेकआउट सेशन API](/api-reference/checkout-sessions/create) से मान्य हो
6. **टाइपस्क्रिप्ट**: बेहतर प्रकार सुरक्षा और डेवलपर अनुभव के लिए टाइपस्क्रिप्ट का उपयोग करें
7. **लोडिंग स्टेट्स**: UX को बेहतर बनाने के लिए जब चेकआउट खुल रहा हो तब लोडिंग स्टेट दिखाएं
8. **टाइमर मैनेजमेंट**: अगर आप सेशन समाप्ति को मैनुअल रूप से हैंडल करना चाहते हैं तो टाइमर (`showTimer: false`) को निष्क्रिय करें

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

<AccordionGroup>
  <Accordion title="Checkout not opening">
    **संभावित कारण:**

    * `open()` को कॉल करने से पहले SDK प्रारंभ नहीं किया गया
    * अमान्य चेकआउट URL
    * कंसोल में जावास्क्रिप्ट त्रुटियाँ
    * नेटवर्क कनेक्टिविटी समस्याएँ

    **समाधान:**

    * सुनिश्चित करें कि चेकआउट खोलने से पहले SDK प्रारंभ होता है
    * कंसोल त्रुटियों की जाँच करें
    * सुनिश्चित करें कि चेकआउट URL मान्य है और [चेकआउट सेशन API](/api-reference/checkout-sessions/create) से है
    * नेटवर्क कनेक्टिविटी की जाँच करें
  </Accordion>

  <Accordion title="Events not firing">
    **संभावित कारण:**

    * इवेंट हैंडलर सही तरह से सेट नहीं किया गया
    * जावास्क्रिप्ट त्रुटियाँ जो इवेंट प्रसार को रोक रही हैं
    * SDK सही तरह से प्रारंभ नहीं हुआ

    **समाधान:**

    * सुनिश्चित करें कि इवेंट हैंडलर `Initialize()` में सही तरह से कॉन्फ़िगर किया गया है
    * कंसोल में जावास्क्रिप्ट त्रुटियों की जाँच करें
    * सुनिश्चित करें कि SDK प्रारंभ सफलतापूर्वक पूरा हुआ
    * पहले एक साधारण इवेंट हैंडलर के साथ परीक्षण करें
  </Accordion>

  <Accordion title="Styling issues">
    **संभावित कारण:**

    * आपके एप्लिकेशन के स्टाइल्स के साथ CSS संघर्ष
    * थीम सेटिंग्स सही तरह से लागू नहीं हुईं
    * उत्तरदायी डिज़ाइन समस्याएँ

    **समाधान:**

    * ब्राउज़र DevTools में CSS संघर्षों की जाँच करें
    * सुनिश्चित करें कि थीम सेटिंग्स सही हैं
    * विभिन्न स्क्रीन आकारों पर परीक्षण करें
    * ओवरले के साथ z-index संघर्ष सुनिश्चित न हो
  </Accordion>
</AccordionGroup>

## डिजिटल वॉलेट सक्षम करना

Google Pay और अन्य डिजिटल वॉलेट्स की सेटअप के बारे में विस्तृत जानकारी के लिए <a href="/features/payment-methods/digital-wallets">डिजिटल वॉलेट्स</a> पृष्ठ देखें।

<Note>
  ओवरले चेकआउट में Apple Pay अभी तक समर्थित नहीं है। Apple Pay के लिए समर्थन जल्द आ रहा है।
</Note>

## ब्राउज़र समर्थन

Dodo Payments Checkout SDK निम्नलिखित ब्राउज़रों का समर्थन करता है:

* Chrome (नवीनतम)
* Firefox (नवीनतम)
* Safari (नवीनतम)
* Edge (नवीनतम)
* IE11+

## ओवरले बनाम इनलाइन चेकआउट

अपने उपयोग के मामले के लिए सही चेकआउट प्रकार चुनें:

| विशेषता            | ओवरले चेकआउट                | इनलाइन चेकआउट                            |
| ------------------ | --------------------------- | ---------------------------------------- |
| एकीकरण की गहराई    | पृष्ठ के ऊपर मॉड्यूल        | पृष्ठ में पूरी तरह से अंतर्निहित         |
| लेआउट नियंत्रण     | सीमित                       | पूर्ण नियंत्रण                           |
| ब्रांडिंग          | पृष्ठ से अलग                | सहज                                      |
| कार्यान्वयन प्रयास | कम                          | अधिक                                     |
| सर्वश्रेष्ठ के लिए | त्वरित एकीकरण, मौजूदा पृष्ठ | कस्टम चेकआउट पृष्ठ, उच्च-रूपांतरण प्रवाह |

<Tip>
  तेज़ एकीकरण के लिए **ओवरले चेकआउट** का उपयोग करें आपके मौजूदा पृष्ठों में न्यूनतम परिवर्तन के साथ। **इनलाइन चेकआउट** का उपयोग करें जब आप चेकआउट अनुभव और सहज ब्रांडिंग पर अधिकतम नियंत्रण चाहते हैं।
</Tip>

## संबंधित संसाधन

<CardGroup cols={2}>
  <Card title="Inline Checkout" icon="credit-card" href="/developer-resources/inline-checkout">
    अपने पृष्ठ पर सीधे चेकआउट एम्बेड करें पूरी तरह से एकीकृत अनुभवों के लिए।
  </Card>

  <Card title="Checkout Sessions API" icon="code" href="/api-reference/checkout-sessions/create">
    चेकआउट अनुभवों को संचालित करने के लिए चेकआउट सत्र बनाएं।
  </Card>

  <Card title="Webhooks" icon="webhook" href="/developer-resources/webhooks">
    वेबहुक्स के माध्यम से सर्वर-साइड भुगतान इवेंट्स को संभालें।
  </Card>

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    Dodo Payments को एकीकृत करने के लिए पूरी गाइड।
  </Card>
</CardGroup>

अधिक सहायता के लिए, हमारे [Discord समुदाय](https://discord.gg/bYqAp4ayYh) पर जाएँ या हमारी डेवलपर समर्थन टीम से संपर्क करें।