> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Framework Adaptors Overview

> Pre-built adaptors for popular web frameworks to integrate Dodo Payments in minutes with minimal code

Dodo Payments provides official framework adaptors that simplify payment integration. Each adaptor is designed to work seamlessly with your framework's conventions, offering checkout, customer portal, and webhook handling out of the box.

<Tip>
  Framework adaptors let you integrate Dodo Payments in under 10 lines of code. They handle authentication, request parsing, and response formatting automatically.
</Tip>

## Available Framework Adaptors

Choose the adaptor that matches your framework:

<CardGroup cols={2}>
  <Card title="Next.js" icon="react" href="/developer-resources/nextjs-adaptor">
    App Router support with route handlers for checkout, portal, and webhooks
  </Card>

  <Card title="Nuxt" icon="vuejs" href="/developer-resources/nuxt-adaptor">
    Vue-based full-stack framework with server routes integration
  </Card>

  <Card title="Express" icon="node-js" href="/developer-resources/express-adaptor">
    Middleware-based handlers for the popular Node.js framework
  </Card>

  <Card title="Fastify" icon="bolt" href="/developer-resources/fastify-adaptor">
    High-performance Node.js framework with plugin architecture
  </Card>

  <Card title="Hono" icon="cloud" href="/developer-resources/hono-adaptor">
    Ultrafast web framework for the edge, Cloudflare Workers, and more
  </Card>

  <Card title="Astro" icon="star" href="/developer-resources/astro-adaptor">
    Content-focused framework with server endpoints support
  </Card>

  <Card title="SvelteKit" icon="code" href="/developer-resources/sveltekit-adaptor">
    Full-stack Svelte framework with server hooks integration
  </Card>

  <Card title="Remix" icon="react" href="/developer-resources/remix-adaptor">
    Full-stack React framework with loader and action handlers
  </Card>

  <Card title="TanStack Start" icon="chart-line" href="/developer-resources/tanstack-adaptor">
    Type-safe full-stack React framework with server functions
  </Card>

  <Card title="Better Auth" icon="shield" href="/developer-resources/better-auth-adaptor">
    Authentication framework plugin for seamless auth + payments
  </Card>

  <Card title="Convex" icon="database" href="/developer-resources/convex-component">
    Backend-as-a-Service component for real-time payment sync
  </Card>

  <Card title="Bun" icon="bolt" href="/developer-resources/bun-adaptor">
    Native Bun.serve() handlers for checkout, portal, and webhooks
  </Card>
</CardGroup>

## Core Features

All framework adaptors provide these built-in capabilities:

| Feature                | Description                                                   |
| ---------------------- | ------------------------------------------------------------- |
| **Checkout Handler**   | Support for static, dynamic, and session-based checkout flows |
| **Customer Portal**    | Pre-built handler for subscription and billing management     |
| **Webhook Handler**    | Secure signature verification with typed event handlers       |
| **Environment Config** | Simple setup via environment variables                        |
| **Type Safety**        | Full TypeScript support with typed payloads                   |

## Quick Start

Get started with any framework adaptor in three steps:

<Steps>
  <Step title="Install the Adaptor">
    Use your package manager to install the framework-specific adaptor:

    <Tabs>
      <Tab title="Next.js">
        ```bash theme={null}
        npm install @dodopayments/nextjs
        ```
      </Tab>

      <Tab title="Nuxt">
        ```bash theme={null}
        npm install @dodopayments/nuxt
        ```
      </Tab>

      <Tab title="Express">
        ```bash theme={null}
        npm install @dodopayments/express
        ```
      </Tab>

      <Tab title="Hono">
        ```bash theme={null}
        npm install @dodopayments/hono
        ```
      </Tab>

      <Tab title="Astro">
        ```bash theme={null}
        npm install @dodopayments/astro
        ```
      </Tab>

      <Tab title="SvelteKit">
        ```bash theme={null}
        npm install @dodopayments/sveltekit
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Configure Environment Variables">
    Add your Dodo Payments credentials to your environment:

    ```env theme={null}
    DODO_PAYMENTS_API_KEY=your-api-key
    DODO_PAYMENTS_WEBHOOK_KEY=your-webhook-secret
    DODO_PAYMENTS_RETURN_URL=https://yourdomain.com/checkout/success
    DODO_PAYMENTS_ENVIRONMENT="test_mode" # or "live_mode"
    ```

    <Warning>
      Never commit your `.env` file or secrets to version control.
    </Warning>
  </Step>

  <Step title="Create Route Handlers">
    Set up your checkout, customer portal, and webhook routes:

    <Tabs>
      <Tab title="Next.js">
        ```typescript theme={null}
        // app/checkout/route.ts
        import { Checkout } from "@dodopayments/nextjs";

        export const GET = Checkout({
          bearerToken: process.env.DODO_PAYMENTS_API_KEY,
          returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
          environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
        });
        ```
      </Tab>

      <Tab title="Express">
        ```typescript theme={null}
        import { checkoutHandler } from '@dodopayments/express';

        app.get('/api/checkout', checkoutHandler({
          bearerToken: process.env.DODO_PAYMENTS_API_KEY,
          returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
          environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
        }));
        ```
      </Tab>

      <Tab title="Hono">
        ```typescript theme={null}
        import { Checkout } from "@dodopayments/hono";

        app.get('/checkout', Checkout({
          bearerToken: process.env.DODO_PAYMENTS_API_KEY,
          returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
          environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
        }));
        ```
      </Tab>
    </Tabs>

    <Check>
      You're now ready to process payments! Visit the individual adaptor pages for detailed guides and all available options.
    </Check>
  </Step>
</Steps>

## Checkout Flow Types

All adaptors support three checkout flow types:

<AccordionGroup>
  <Accordion title="Static Checkout (GET)">
    Use static checkout for simple, shareable payment links. Pass the product ID as a query parameter:

    ```
    /api/checkout?productId=pdt_xxx&quantity=1
    ```

    Supports optional customer prefill and customization via query parameters.
  </Accordion>

  <Accordion title="Dynamic Checkout (POST)">
    Use dynamic checkout to programmatically create payments with custom details:

    ```json theme={null}
    {
      "product_id": "pdt_xxx",
      "customer": {
        "email": "customer@example.com",
        "name": "John Doe"
      },
      "quantity": 1
    }
    ```

    Supports both one-time payments and subscriptions.
  </Accordion>

  <Accordion title="Checkout Sessions (POST)">
    Use checkout sessions for the most flexible checkout experience with cart support:

    ```json theme={null}
    {
      "product_cart": [
        { "product_id": "pdt_xxx", "quantity": 1 },
        { "product_id": "pdt_yyy", "quantity": 2 }
      ],
      "customer": {
        "email": "customer@example.com"
      }
    }
    ```

    Learn more in the [Checkout Sessions Guide](/developer-resources/checkout-session).
  </Accordion>
</AccordionGroup>

## Webhook Event Handling

All adaptors provide type-safe webhook handling with granular event callbacks:

```typescript theme={null}
Webhooks({
  webhookKey: process.env.DODO_PAYMENTS_WEBHOOK_KEY,
  onPayload: async (payload) => {
    // Handle any webhook event
  },
  onPaymentSucceeded: async (payload) => {
    // Handle successful payments
  },
  onSubscriptionActive: async (payload) => {
    // Handle new subscriptions
  },
  // ... 20+ event types supported
});
```

<Info>
  All webhook handlers automatically verify signatures and validate payloads using Zod schemas. Invalid requests are rejected with appropriate error codes.
</Info>

## Choosing the Right Adaptor

| Framework          | Best For                               | Runtime        |
| ------------------ | -------------------------------------- | -------------- |
| **Next.js**        | Full-stack React apps with App Router  | Node.js, Edge  |
| **Nuxt**           | Full-stack Vue.js applications         | Node.js        |
| **Express**        | REST APIs and traditional Node.js apps | Node.js        |
| **Fastify**        | High-performance APIs                  | Node.js        |
| **Hono**           | Edge deployments, Cloudflare Workers   | Edge, Node.js  |
| **Astro**          | Content sites with server endpoints    | Node.js, Edge  |
| **SvelteKit**      | Full-stack Svelte applications         | Node.js        |
| **Remix**          | Full-stack React with nested routing   | Node.js        |
| **TanStack Start** | Type-safe full-stack React             | Node.js        |
| **Better Auth**    | Apps already using Better Auth         | Various        |
| **Convex**         | Apps using Convex for backend          | Convex Runtime |
| **Bun**            | Native Bun server applications         | Bun            |

## Getting Help

Need assistance with framework adaptors?

* **Discord**: Join our [community server](https://discord.gg/bYqAp4ayYh) for real-time help
* **Email**: Contact us at [support@dodopayments.com](mailto:support@dodopayments.com)
* **GitHub**: Open an issue on the respective adaptor repository
* **Documentation**: Visit our [API reference](/api-reference/introduction)