# Dodo Payments Checkout

[![npm version](https://img.shields.io/npm/v/dodopayments-checkout.svg)](https://www.npmjs.com/package/dodopayments-checkout)

[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)

A modern TypeScript library for embedding Dodo Payments overlay checkout 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

- 📚 [Integration Documentation](https://docs.dodopayments.com/api-reference/overlay-checkout)
- 🎮 [Interactive Demo](https://atlas.dodopayments.com#overlay-checkout)
- 💻 [Demo Source Code](https://github.com/dodopayments/dodo-checkout-demo/blob/main/src/components/Home/OverlayCheckout.tsx)

## 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](https://www.jsdelivr.com/) using the published npm package:

```html
<script src="https://cdn.jsdelivr.net/npm/dodopayments-checkout@latest/dist/index.js"></script>
```

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

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

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

// Open checkout
DodoPayments.Checkout.open({
  products: [
    {
      productId: "pdt_your_product_id",
      quantity: 1,
    },
  ],
  redirectUrl: "https://your-website.com/success",
});
```

## API Reference

### Initialization

```typescript
DodoPayments.Initialize({
  mode: "test" | "live",
  onEvent: (event: CheckoutEvent) => void,
  theme?: "light" | "dark",
  linkType?: "static" | "dynamic"
});
```

### Checkout Methods

#### Open Checkout

```typescript
// For static products
DodoPayments.Checkout.open({
  products: [
    {
      productId: string,
      quantity: number,
    },
  ],
  redirectUrl: string,
});

// For dynamic payment links
DodoPayments.Checkout.open({
  paymentLink: string,
});
```

#### Close Checkout

```typescript
DodoPayments.Checkout.close();
```

#### Check Status

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

### Event Types

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

## 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](https://docs.dodopayments.com)
2. Contact our support team at support@dodopayments.com