A TypeScript library for embedding Dodo Payments checkout (overlay and inline).


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.
- 🚀 TypeScript-first with full type definitions
- 🔄 Real-time event handling
- 🎨 Customizable themes (light/dark)
- 🔒 Secure and production-ready
- 📱 Responsive design
- 🌐 Cross-browser compatibility
- 📚 Overlay Checkout Documentation
- 📚 Inline Checkout Documentation (Beta)
- 🎮 Interactive Demo
- 💻 Demo Source Code
``bashUsing npm
npm install 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) |The SDK is written in TypeScript and includes comprehensive type definitions. All public APIs are fully typed for better developer experience.
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- IE11+
For support, please:
1. Check our documentation
2. Contact our support team at support@dodopayments.com