Overlay Checkout

Overview

The Dodo Payments Checkout SDK provides a seamless way to integrate our payment overlay into your web application. Built with TypeScript and modern web standards, it offers a robust solution for handling payments with real-time event handling and customizable themes.

Demo

Interactive Demo

See the overlay checkout in action with our live demo.

Quick Start

Get started with the Dodo Payments Checkout SDK in just a few lines of code:

import { DodoPayments } from "dodopayments-checkout";

// Initialize the SDK
DodoPayments.Initialize({
  mode: "test", // 'test' or 'live'
  onEvent: (event) => {
    console.log("Checkout event:", event);
  },
});

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

Get your checkout URL from the create checkout session API.

Step-by-Step Integration Guide

Install the SDK

Install the Dodo Payments Checkout SDK using your preferred package manager:

npm install dodopayments-checkout

Initialize the SDK

Initialize the SDK in your application, typically in your main component or app entry point:

import { DodoPayments } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test", // Change to 'live' for production
  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;
    }
  },
});

Always initialize the SDK before attempting to open the checkout. Initialization should happen once when your application loads.

Create a Checkout Button Component

Create a component that opens the checkout overlay:

// 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",
      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

Use the checkout button component in your application:

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

Create pages to handle checkout redirects:

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

Start your development server:

npm run dev

Test the checkout flow:
- Click the checkout button
- Verify the overlay appears
- Test the payment flow using test credentials
- Confirm redirects work correctly

You should see checkout events logged in your browser console.

Go Live

When you’re ready for production:

Change the mode to 'live':

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

Update your checkout URLs to use live checkout sessions from your backend
Test the complete flow in production
Monitor events and errors

API Reference

Configuration

Initialize Options

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

Option	Type	Required	Description
`mode`	`"test" \| "live"`	Yes	Environment mode: `'test'` for development, `'live'` for production
`onEvent`	`function`	Yes	Callback function for handling checkout events

Checkout Options

interface CheckoutOptions {
  checkoutUrl: string;
}

Option	Type	Required	Description
`checkoutUrl`	`string`	Yes	Checkout session URL from the create checkout session API

Methods

Open Checkout

Opens the checkout overlay with the specified checkout session URL.

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

Close Checkout

Programmatically closes the checkout overlay.

DodoPayments.Checkout.close();

Check Status

Returns whether the checkout overlay is currently open.

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

Events

The SDK provides real-time events that you can listen to through the onEvent callback:

DodoPayments.Initialize({
  onEvent: (event: CheckoutEvent) => {
    switch (event.event_type) {
      case "checkout.opened":
        // Checkout overlay has been opened
        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;
    }
  }
});

Event Type	Description
`checkout.opened`	Checkout overlay has been opened
`checkout.payment_page_opened`	Payment page has been displayed
`checkout.customer_details_submitted`	Customer and billing details have been submitted
`checkout.closed`	Checkout overlay has been closed
`checkout.redirect`	Checkout will perform a redirect
`checkout.error`	An error occurred during checkout

Implementation Options

Package Manager Installation

Install via npm, yarn, or pnpm as shown in the Step-by-Step Integration Guide.

CDN Implementation

For quick integration without a build step, you can use our 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
            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>

TypeScript Support

The SDK is written in TypeScript and includes comprehensive type definitions. All public APIs are fully typed for better developer experience and IntelliSense support.

import { DodoPayments, CheckoutEvent } from "dodopayments-checkout";

DodoPayments.Initialize({
  mode: "test",
  onEvent: (event: CheckoutEvent) => {
    // event is fully typed
    console.log(event.event_type, event.data);
  },
});

Error Handling

The SDK provides detailed error information through the event system. Always implement proper error handling in your onEvent callback:

DodoPayments.Initialize({
  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
    }
  }
});

Always handle the checkout.error event to provide a good user experience when errors occur.

Best Practices

Initialize once: Initialize the SDK once when your application loads, not on every checkout attempt
Error handling: Always implement proper error handling in your event callback
Test mode: Use test mode during development and switch to live only when ready for production
Event handling: Handle all relevant events for a complete user experience
Valid URLs: Always use valid checkout URLs from the create checkout session API
TypeScript: Use TypeScript for better type safety and developer experience
Loading states: Show loading states while the checkout is opening to improve UX

Troubleshooting

Checkout not opening

Possible causes:

SDK not initialized before calling open()
Invalid checkout URL
JavaScript errors in console
Network connectivity issues

Solutions:

Verify SDK initialization happens before opening checkout
Check for console errors
Ensure checkout URL is valid and from the create checkout session API
Verify network connectivity

Events not firing

Possible causes:

Event handler not properly set up
JavaScript errors preventing event propagation
SDK not initialized correctly

Solutions:

Confirm event handler is properly configured in Initialize()
Check browser console for JavaScript errors
Verify SDK initialization completed successfully
Test with a simple event handler first

Styling issues

Possible causes:

CSS conflicts with your application styles
Theme settings not applied correctly
Responsive design issues

Solutions:

Check for CSS conflicts in browser DevTools
Verify theme settings are correct
Test on different screen sizes
Ensure no z-index conflicts with overlay

Browser Support

The Dodo Payments Checkout SDK supports the following browsers:

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

Apple Pay is not currently supported in the overlay checkout experience. We plan to add support for Apple Pay in a future release.

For more help, visit our Discord community or contact our developer support team.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Overview

Demo

Interactive Demo

Quick Start

Step-by-Step Integration Guide

API Reference

Configuration

Initialize Options

Checkout Options

Methods

Open Checkout

Close Checkout

Check Status

Events

Implementation Options

Package Manager Installation

CDN Implementation

TypeScript Support

Error Handling

Best Practices

Troubleshooting

Browser Support

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

​Overview

​Demo

Interactive Demo

​Quick Start

​Step-by-Step Integration Guide

​API Reference

​Configuration

​Initialize Options

​Checkout Options

​Methods

​Open Checkout

​Close Checkout

​Check Status

​Events

​Implementation Options

​Package Manager Installation

​CDN Implementation

​TypeScript Support

​Error Handling

​Best Practices

​Troubleshooting

​Browser Support

Overview

Demo

Quick Start

Step-by-Step Integration Guide

API Reference

Configuration

Initialize Options

Checkout Options

Methods

Open Checkout

Close Checkout

Check Status

Events

Implementation Options

Package Manager Installation

CDN Implementation

TypeScript Support

Error Handling

Best Practices

Troubleshooting

Browser Support