ओवरले चेकआउट - Dodo Payments Documentation

अवलोकन

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

डेमो

Interactive Demo

हमारे लाइव डेमो के साथ ओवरले चेकआउट को क्रियाशील अवस्था में देखें।

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

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

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"
});

अपना चेकआउट URL create checkout session API से प्राप्त करें।

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

Install the SDK

अपने पसंदीदा पैकेज प्रबंधक का उपयोग करके Dodo Payments चेकआउट SDK स्थापित करें:

npm install dodopayments-checkout

yarn add dodopayments-checkout

pnpm add dodopayments-checkout

Initialize the SDK

अपने एप्लिकेशन में SDK को प्रारंभ करें, आमतौर पर आपके मुख्य घटक या ऐप के प्रवेश बिंदु में:

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;
    }
  },
});

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

Create a Checkout Button Component

एक घटक बनाएं जो चेकआउट ओवरले को खोलता है:

// 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>
  );
}

Add Checkout to Your Page

अपने एप्लिकेशन में चेकआउट बटन घटक का उपयोग करें:

// 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>
  );
}

Handle Success and Failure Pages

चेकआउट रीडायरेक्ट को संभालने के लिए पृष्ठ बनाएं:

// 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>
  );
}

Test Your Integration

अपने विकास सर्वर को प्रारंभ करें:

npm run dev

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

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

Go Live

जब आप उत्पादन के लिए तैयार हों:

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

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

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

API संदर्भ

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

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

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`	हाँ	किस्‍म के ईवेंट्स को संभालने के लिए कॉलबैक फ़ंक्शन

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

interface CheckoutOptions {
  checkoutUrl: string;
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
  };
}

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

विधियाँ

चेकआउट खोलें

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

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

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

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

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

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

DodoPayments.Checkout.close();

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

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

const isOpen = DodoPayments.Checkout.isOpen();
// Returns: boolean

इवेंट्स

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

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 के माध्यम से इंस्टॉल करें जैसा कि चरण-दर-चरण एकीकरण गाइड में दिखाया गया है।

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

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

<!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 ऑब्जेक्ट पास किया जाए। थीम कॉन्फ़िगरेशन लाइट और डार्क मोड दोनों का समर्थन करता है, जिससे आप रंग, सीमाएं, पाठ, बटन और सीमा त्रिज्या को अनुकूलित कर सकते हैं।

Checkout SDK का client-side themeConfig विकल्प deprecated है और Checkout SDK के अगले major version (v2.0.0) में हटा दिया जाएगा। इसे पास करने पर browser console में deprecation warning लॉग होती है। इसके बजाय API के माध्यम से checkout session बनाते समय अपनी theme configure करें, इसके लिए customization.theme_config parameter का उपयोग करें — Checkout Theme Customization देखें — या dashboard के Design page पर इसे visually configure करें। Session-configured themes overlay, inline और hosted checkout, सभी पर लागू होती हैं।

यह section Checkout SDK का उपयोग करके deprecated client-side theme configuration को कवर करता है। Recommended approach यह है कि API के माध्यम से checkout session बनाते समय server-side themes configure करें और theme_config parameter का उपयोग करें। API-level configuration के लिए Checkout Theme Customization देखें, या live preview के साथ themes को visually configure करने के लिए dashboard में Design page का उपयोग करें।

Basic Theme Configuration

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",
    },
  },
});

Complete Theme Configuration

सभी उपलब्ध theme properties:

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
    },
  },
});

Light Mode Only

यदि आप केवल light theme को customize करना चाहते हैं:

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

Dark Mode Only

यदि आप केवल dark theme को customize करना चाहते हैं:

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

Partial Theme Override

आप केवल specific properties को override कर सकते हैं। जिन properties को आप specify नहीं करेंगे, checkout उनके लिए default values का उपयोग करेगा:

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
    },
  },
});

Theme Configuration with Other Options

आप theme configuration को checkout के अन्य options के साथ combine कर सकते हैं:

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 Types

TypeScript users के लिए सभी theme configuration types export किए जाते हैं:

import { ThemeConfig, ThemeModeConfig } from "dodopayments-checkout";

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

Error Handling

SDK event system के माध्यम से detailed error information प्रदान करता है। अपने onEvent callback में हमेशा उचित error handling implement करें:

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");
    }
  }
});

Errors होने पर अच्छा user experience प्रदान करने के लिए हमेशा checkout.error event को handle करें।

Best Practices

Initialize once: Application load होने पर SDK को एक बार initialize करें, हर checkout attempt पर नहीं
Error handling: अपने event callback में हमेशा उचित error handling implement करें
Test mode: Development के दौरान test mode का उपयोग करें और production के लिए तैयार होने पर ही live पर switch करें
Event handling: Complete user experience के लिए सभी relevant events को handle करें
Valid URLs: हमेशा create checkout session API से प्राप्त valid checkout URLs का उपयोग करें
TypeScript: बेहतर type safety और developer experience के लिए TypeScript का उपयोग करें
Loading states: UX बेहतर बनाने के लिए checkout खुलते समय loading states दिखाएं
Timer management: यदि आप session expiration को manually handle करना चाहते हैं, तो timer (showTimer: false) को disable करें

Troubleshooting

Checkout not opening

संभावित कारण:

open() को call करने से पहले SDK initialize नहीं किया गया
Invalid checkout URL
Console में JavaScript errors
Network connectivity issues

समाधान:

Verify करें कि checkout खोलने से पहले SDK initialization हो रहा है
Console errors की जाँच करें
सुनिश्चित करें कि checkout URL valid है और create checkout session API से प्राप्त हुआ है
Network connectivity verify करें

Events not firing

संभावित कारण:

Event handler सही ढंग से set up नहीं किया गया
Event propagation को रोकने वाले JavaScript errors
SDK सही ढंग से initialize नहीं किया गया

समाधान:

Confirm करें कि Initialize() में event handler सही ढंग से configured है
JavaScript errors के लिए browser console की जाँच करें
Verify करें कि SDK initialization सफलतापूर्वक पूरा हुआ है
पहले एक simple event handler के साथ test करें

Styling issues

संभावित कारण:

CSS आपके application styles के साथ conflict कर रहा है
Theme settings सही ढंग से apply नहीं हुईं
Responsive design issues

समाधान:

Browser DevTools में CSS conflicts की जाँच करें
Verify करें कि theme settings सही हैं
अलग-अलग screen sizes पर test करें
सुनिश्चित करें कि overlay के साथ कोई z-index conflict नहीं है

Digital Wallets सक्षम करना

Google Pay और अन्य digital wallets सेट up करने की detailed information के लिए Digital Wallets page देखें।

Apple Pay अभी overlay checkout में supported नहीं है। Apple Pay का support जल्द आ रहा है।

Browser Support

Dodo Payments Checkout SDK निम्नलिखित browsers को support करता है:

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)
IE11+

Overlay vs Inline Checkout

अपने use case के लिए सही checkout type चुनें:

Feature	Overlay Checkout	Inline Checkout
Integration depth	Page के ऊपर modal	Page में fully embedded
Layout control	Limited	Full control
Branding	Page से अलग	Seamless
Implementation effort	Lower	Higher
Best for	Quick integration, existing pages	Custom checkout pages, high-conversion flows

मौजूदा pages में minimal changes के साथ faster integration के लिए overlay checkout का उपयोग करें। जब आप checkout experience पर maximum control और seamless branding चाहते हों, तब inline checkout का उपयोग करें।

Inline Checkout

Fully integrated experiences के लिए checkout को सीधे अपने page में embed करें।

Checkout Sessions API

अपने checkout experiences को power करने के लिए checkout sessions create करें।

Webhooks

Webhooks के साथ payment events को server-side handle करें।

Integration Guide

Dodo Payments को integrate करने की complete guide।

अधिक सहायता के लिए हमारे Discord community पर जाएँ या हमारी developer support team से संपर्क करें।

अंतिम संशोधन 31 जुलाई 2026

​अवलोकन

​डेमो

Interactive Demo

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

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

​API संदर्भ

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

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

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

​विधियाँ

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

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

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

​इवेंट्स

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

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

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

​थीम अनुकूलन

​Basic Theme Configuration

​Complete Theme Configuration

​Light Mode Only

​Dark Mode Only

​Partial Theme Override

​Theme Configuration with Other Options

​TypeScript Types

​Error Handling

​Best Practices

​Troubleshooting

​Digital Wallets सक्षम करना

​Browser Support

​Overlay vs Inline Checkout

​संबंधित Resources

Inline Checkout

Checkout Sessions API

Webhooks

Integration Guide

अवलोकन

डेमो

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

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

API संदर्भ

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

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

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

विधियाँ

चेकआउट खोलें

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

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

इवेंट्स

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

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

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

थीम अनुकूलन

Basic Theme Configuration

Complete Theme Configuration

Light Mode Only

Dark Mode Only

Partial Theme Override

Theme Configuration with Other Options

TypeScript Types

Error Handling

Best Practices

Troubleshooting

Digital Wallets सक्षम करना

Browser Support

Overlay vs Inline Checkout

संबंधित Resources