Dodo Payments Checkout


A modern TypeScript library for embedding Dodo Payments checkout (overlay and inline) and listening to checkout events in real-time. Built with developer experience in mind.

Features

- 🚀 TypeScript-first with full type definitions
- 🔄 Real-time event handling
- 🎨 Customizable themes (light/dark)
- 🔒 Secure and production-ready
- 📱 Responsive design
- 🌐 Cross-browser compatibility

Resources

- 📚 Overlay Checkout Documentation
- 📚 Inline Checkout Documentation (Beta)
- 🎮 Interactive Demo
- 💻 Demo Source Code

Installation

``bash


Using npm

npm install dodopayments-checkout

Using yarn

yarn add dodopayments-checkout

Using pnpm

pnpm add dodopayments-checkout
`

CDN

Load the library from jsDelivr using the published npm package:

`html

`

Replace @latest with a specific version if desired. This script creates a global DodoPaymentsCheckout object with the same API as the module import.

Quick Start

$3

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

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

// Open checkout
DodoPayments.Checkout.open({
checkoutUrl: "https://checkout.dodopayments.com/session/cks_123" // Get this url from create checkout session api
});
`

$3

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

// Initialize the SDK with inline display type
DodoPayments.Initialize({
mode: "live",
displayType: "inline", // Beta
onEvent: (event) => {
console.log("Checkout event:", event);
},
});

// Open inline checkout in a specific element
DodoPayments.Checkout.open({
checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
elementId: "checkout-container" // ID of the element where checkout should be embedded
});
`

`html




`

API Reference

$3

`typescript
DodoPayments.Initialize({
mode: "test" | "live",
displayType?: "overlay" | "inline", // "overlay" is default, "inline" is beta
onEvent: (event: CheckoutEvent) => void,
});
`

$3

#### Open Checkout

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

// Inline checkout (beta) - requires elementId
DodoPayments.Checkout.open({
checkoutUrl: "https://checkout.dodopayments.com/session/cks_123",
elementId: "checkout-container" // Required for inline checkout
});
`

#### Close Checkout

`typescript
DodoPayments.Checkout.close();
`

#### Check Status

`typescript
const isOpen = DodoPayments.Checkout.isOpen();
`

$3

| Event | 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 |
| checkout.closed | Checkout has been closed |
| checkout.error | An error occurred |
| checkout.redirect | Checkout will perform a redirect |
| checkout.breakdown` | Checkout pricing breakdown (subtotal, tax, discount, total) |

TypeScript Support

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

Browser Support

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

Support

For support, please:

1. Check our documentation
2. Contact our support team at support@dodopayments.com