ओवरले चेकआउट

Overlay checkout आपके पेज के ऊपर एक modal window खोलता है। ग्राहक modal में अपनी payment details दर्ज करते हैं, जबकि आपका पेज इसके पीछे दिखाई देता रहता है। जब वे modal बंद करते हैं, तो नियंत्रण आपके पेज पर वापस आ जाता है। Payment पूरा करने पर उन्हें return_url पर redirect किया जाता है।

Overlay checkout modal displayed on top of a product page

Interactive Demo

हमारे live demo के साथ overlay checkout को काम करते हुए देखें।

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

SDK इंस्टॉल करें, उसे initialize करें और create checkout session API से प्राप्त checkout URL के साथ checkout खोलें:

import { DodoPayments } from "dodopayments-checkout";

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

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

चरण-दर-चरण integration

Install the SDK

npm, yarn या pnpm के ज़रिए इंस्टॉल करें:

npm install dodopayments-checkout

yarn add dodopayments-checkout

pnpm add dodopayments-checkout

Initialize the SDK

जब आपका app लोड हो, तब Initialize को एक बार call करें। आमतौर पर इसे अपने main component या app entry point में रखा जाता है:

import { DodoPayments } from "dodopayments-checkout";

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

Checkout खोलने से पहले SDK को हमेशा initialize करें। अपने application के लोड होने पर इसे एक बार initialize करें, हर checkout attempt से पहले नहीं।

Create a Checkout Button

एक ऐसा component बनाएं जो checkout modal खोले:

// 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(() => {
    DodoPayments.Initialize({
      mode: "test",
      displayType: "overlay",
      onEvent: (event) => {
        if (event.event_type === "checkout.opened") {
          setIsLoading(false);
        }
        if (event.event_type === "checkout.error") {
          setIsLoading(false);
          console.error("Checkout error:", event.data?.message);
        }
      },
    });
  }, []);

  const handleCheckout = async () => {
    setIsLoading(true);
    try {
      await DodoPayments.Checkout.open({
        checkoutUrl: "https://test.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 the Button to Your Page

अपने application में checkout button component का उपयोग करें:

// 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 Redirects

Payment के बाद checkout redirects को संभालने के लिए 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

अपना development server शुरू करें:

npm run dev

Checkout flow का परीक्षण करें:
- Checkout button पर click करें
- सुनिश्चित करें कि modal दिखाई दे रहा है
- Test credentials का उपयोग करके payment flow का परीक्षण करें
- पुष्टि करें कि redirects सही तरीके से काम कर रहे हैं

आपको अपने browser console में checkout events log होते दिखाई देने चाहिए।

Go Live

Production के लिए तैयार होने पर:

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

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

अपने checkout URLs को backend से प्राप्त live checkout sessions का उपयोग करने के लिए अपडेट करें
Production में पूरे flow का परीक्षण करें
Events और errors की निगरानी करें

API reference

Initialize करें

SDK सेट अप करने के लिए Initialize को एक बार call करें:

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

DodoPayments.Initialize(options);

विकल्प	Type	आवश्यक	विवरण
`mode`	`"test" \| "live"`	हाँ	Environment mode: development के लिए `"test"`, production के लिए `"live"`
`displayType`	`"overlay" \| "inline"`	नहीं	Display type: modal checkout के लिए `"overlay"` (default), embedded checkout के लिए `"inline"`
`onEvent`	`function`	हाँ	Checkout events को संभालने वाला callback function

Checkout खोलें

Checkout modal खोलें:

interface CheckoutOptions {
  checkoutUrl: string;
  options?: {
    showTimer?: boolean;
    showSecurityBadge?: boolean;
    manualRedirect?: boolean;
    themeConfig?: ThemeConfig;
    payButtonText?: string;
    fontSize?: FontSize;
    fontWeight?: FontWeight;
  };
}

DodoPayments.Checkout.open(options);

विकल्प	Type	आवश्यक	विवरण
`checkoutUrl`	`string`	हाँ	create checkout session API से प्राप्त checkout session URL
`options.showTimer`	`boolean`	नहीं	Session timer दिखाएं या छिपाएं। Default रूप से `true` रहता है। अक्षम होने पर session समाप्त होने पर आपको `checkout.link_expired` event प्राप्त होता है।
`options.showSecurityBadge`	`boolean`	नहीं	Security badge दिखाएं या छिपाएं। Default रूप से `true` रहता है
`options.manualRedirect`	`boolean`	नहीं	जब `true` हो, तो automatic redirects रोकें। Checkout payment outcome के साथ `checkout.status` और खोलने के लिए URL के साथ `checkout.redirect_requested` emit करता है; navigation आपको संभालना होगा
`options.themeConfig`	`ThemeConfig`	नहीं	Deprecated। इसके बजाय checkout session बनाते समय server-side theme configure करें
`options.payButtonText`	`string`	नहीं	Pay button के लिए custom text
`options.fontSize`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	नहीं	Checkout के लिए global font size
`options.fontWeight`	`"normal" \| "medium" \| "bold" \| "extraBold"`	नहीं	Checkout के लिए global font weight

Checkout बंद करें

Modal को programmatically बंद करें:

DodoPayments.Checkout.close();

Status जांचें

जांचें कि modal वर्तमान में खुला है या नहीं:

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

Events

Initialize को दिए गए onEvent callback के ज़रिए checkout events सुनें:

DodoPayments.Initialize({
  onEvent: (event: CheckoutEvent) => {
    switch (event.event_type) {
      case "checkout.opened":
        // Modal has opened
        break;
      case "checkout.form_ready":
        // Form is ready for user input
        break;
      case "checkout.payment_page_opened":
        // Payment page is displayed
        break;
      case "checkout.customer_details_submitted":
        // Customer details submitted
        break;
      case "checkout.closed":
        // Modal has closed
        break;
      case "checkout.redirect":
        // Checkout will redirect
        break;
      case "checkout.error":
        console.error("Error:", event.data?.message);
        break;
      case "checkout.link_expired":
        // Session expired (only when showTimer is false)
        break;
    }
  }
});

Event	विवरण
`checkout.opened`	Modal खुल गया है
`checkout.form_ready`	User input के लिए form तैयार है। Loading states छिपाने के लिए इसका उपयोग करें
`checkout.payment_page_opened`	Payment page दिखाई जा रही है
`checkout.customer_details_submitted`	Customer और billing details submit की गई हैं
`checkout.closed`	Modal बंद हो गया है
`checkout.redirect`	Checkout redirect करेगा (उदाहरण के लिए, bank page पर)
`checkout.error`	Checkout के दौरान error हुआ
`checkout.link_expired`	Checkout session समाप्त हो गया। यह केवल तब प्राप्त होता है जब `showTimer` को `false` पर सेट किया गया हो।

CDN implementation

Build step के बिना quick integration के लिए SDK को CDN से load करें:

<!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>
  
  <script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
  <script>
    DodoPaymentsCheckout.DodoPayments.Initialize({
      mode: "test",
      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://test.checkout.dodopayments.com/session/cks_123"
      });
    }
  </script>
</body>
</html>

Theme customization

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

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

यदि आपको client-side theme configuration का उपयोग करना आवश्यक है, तो options parameter में themeConfig pass करें:

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

Theme properties

Light और dark modes के लिए उपलब्ध सभी theme properties:

interface ThemeConfig {
  light?: {
    bgPrimary?: string;              // Primary background
    bgSecondary?: string;            // Secondary background (tabs, etc.)
    borderPrimary?: string;          // Primary border
    borderSecondary?: string;        // Secondary border
    textPrimary?: string;            // Primary text
    textSecondary?: string;          // Secondary text
    textPlaceholder?: string;        // Placeholder text
    textError?: string;              // Error text
    textSuccess?: string;            // Success text
    buttonPrimary?: string;          // Primary button background
    buttonPrimaryHover?: string;     // Primary button hover
    buttonTextPrimary?: string;      // Primary button text
    buttonSecondary?: string;        // Secondary button background
    buttonSecondaryHover?: string;   // Secondary button hover
    buttonTextSecondary?: string;    // Secondary button text
    inputFocusBorder?: string;       // Input focus border
  };
  dark?: {
    // Same properties as light mode
  };
  radius?: string;                   // Border radius (e.g., "8px")
}

Error handling

अपने onEvent callback में हमेशा error handling लागू करें:

DodoPayments.Initialize({
  mode: "test",
  displayType: "overlay",
  onEvent: (event: CheckoutEvent) => {
    if (event.event_type === "checkout.error") {
      console.error("Checkout error:", event.data?.message);
      // Show user-friendly error message
      // Optionally retry the checkout
    }
    if (event.event_type === "checkout.link_expired") {
      console.warn("Checkout session has expired");
      // Create a new checkout session and try again
    }
  }
});

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

Best practices

एक बार initialize करें: App लोड होने पर Initialize को एक बार call करें, हर checkout से पहले नहीं
Error handling: अपने event callback में उचित error handling लागू करें
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

Events not firing

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

Event handler सही तरीके से सेट अप नहीं किया गया
JavaScript errors event propagation को रोक रहे हैं
SDK सही तरीके से initialize नहीं किया गया

समाधान:

पुष्टि करें कि Initialize() में event handler सही तरीके से configure किया गया है
JavaScript errors के लिए browser console जांचें
सुनिश्चित करें कि SDK initialization सफलतापूर्वक पूरा हुआ है
पहले एक simple event handler के साथ परीक्षण करें

Styling issues

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

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

समाधान:

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

Digital wallets

Google Pay और अन्य digital wallets सेट अप करने की विस्तृत जानकारी के लिए Digital Wallets page देखें।

Apple Pay अभी overlay checkout में समर्थित नहीं है।

Browser support

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

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

Overlay बनाम Inline Checkout

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

Feature	Overlay	Inline
Integration depth	Page के ऊपर modal	Page में fully embedded
Layout control	सीमित	पूर्ण नियंत्रण
Branding	Page से अलग	आपके page से मेल खाता है
Implementation effort	कम	अधिक
Best for	Quick integration, existing pages	Custom checkout pages, high-conversion flows

अपने existing pages में न्यूनतम बदलावों के साथ तेज़ integration के लिए overlay checkout का उपयोग करें। जब आपको checkout experience पर अधिकतम नियंत्रण और consistent branding चाहिए, तब inline checkout का उपयोग करें।

Inline Checkout

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

Checkout Sessions API

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

Webhooks

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

Integration Guide

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

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

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Interactive Demo

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

चरण-दर-चरण integration

API reference

Initialize करें

Checkout खोलें

Checkout बंद करें

Status जांचें

Events

CDN implementation

Theme customization

Theme properties

Error handling

Best practices

Troubleshooting

Digital wallets

Browser support

Overlay बनाम Inline Checkout

Inline Checkout

Checkout Sessions API

Webhooks

Integration Guide

Interactive Demo

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

​चरण-दर-चरण integration

​API reference

​Initialize करें

​Checkout खोलें

​Checkout बंद करें

​Status जांचें

​Events

​CDN implementation

​Theme customization

​Theme properties

​Error handling

​Best practices

​Troubleshooting

​Digital wallets

​Browser support

​Overlay बनाम Inline Checkout

​Related resources

Inline Checkout

Checkout Sessions API

Webhooks

Integration Guide

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

चरण-दर-चरण integration

API reference

Initialize करें

Checkout खोलें

Checkout बंद करें

Status जांचें

Events

CDN implementation

Theme customization

Theme properties

Error handling

Best practices

Troubleshooting

Digital wallets

Browser support

Overlay बनाम Inline Checkout

Related resources