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

# Visão Geral dos Adaptadores de Framework

> Adaptadores pré-construídos para frameworks web populares para integrar Dodo Payments em minutos com código mínimo

Dodo Payments fornece adaptadores de framework oficiais que simplificam a integração de pagamentos. Cada adaptador é projetado para funcionar perfeitamente com as convenções do seu framework, oferecendo checkout, portal do cliente e manipulação de webhook prontos para uso.

<Tip>
  Adaptadores de framework permitem integrar o Dodo Payments em menos de 10 linhas de código. Eles lidam automaticamente com autenticação, análise de requisições e formatação de respostas.
</Tip>

## Adaptadores de Framework Disponíveis

Escolha o adaptador que corresponde ao seu framework:

<CardGroup cols={2}>
  <Card title="Next.js" icon="react" href="/developer-resources/nextjs-adaptor">
    Suporte ao App Router com manipuladores de rota para checkout, portal e webhooks
  </Card>

  <Card title="Nuxt" icon="vuejs" href="/developer-resources/nuxt-adaptor">
    Framework full-stack baseado em Vue com integração de rotas de servidor
  </Card>

  <Card title="Express" icon="node-js" href="/developer-resources/express-adaptor">
    Manipuladores baseados em middleware para o popular framework Node.js
  </Card>

  <Card title="Fastify" icon="bolt" href="/developer-resources/fastify-adaptor">
    Framework Node.js de alta performance com arquitetura de plugins
  </Card>

  <Card title="Hono" icon="cloud" href="/developer-resources/hono-adaptor">
    Framework web ultrarrápido para edge, Cloudflare Workers e mais
  </Card>

  <Card title="Astro" icon="star" href="/developer-resources/astro-adaptor">
    Framework com foco em conteúdo e suporte a endpoints de servidor
  </Card>

  <Card title="SvelteKit" icon="code" href="/developer-resources/sveltekit-adaptor">
    Framework full-stack Svelte com integração de hooks de servidor
  </Card>

  <Card title="Remix" icon="react" href="/developer-resources/remix-adaptor">
    Framework full-stack React com manipuladores de loader e action
  </Card>

  <Card title="TanStack Start" icon="chart-line" href="/developer-resources/tanstack-adaptor">
    Framework full-stack React type-safe com funções de servidor
  </Card>

  <Card title="Better Auth" icon="shield" href="/developer-resources/better-auth-adaptor">
    Plugin de framework de autenticação para autenticação e pagamentos fluídos
  </Card>

  <Card title="Convex" icon="database" href="/developer-resources/convex-component">
    Componente Backend-as-a-Service para sincronização de pagamentos em tempo real
  </Card>

  <Card title="Bun" icon="bolt" href="/developer-resources/bun-adaptor">
    Manipuladores nativos Bun.serve() para checkout, portal e webhooks
  </Card>
</CardGroup>

## Recursos Principais

Todos os adaptadores de framework fornecem estas capacidades integradas:

| Feature                | Description                                                               |
| ---------------------- | ------------------------------------------------------------------------- |
| **Checkout Handler**   | Suporte para fluxos de checkout estáticos, dinâmicos e baseados em sessão |
| **Customer Portal**    | Manipulador pronto para gestão de assinaturas e faturamento               |
| **Webhook Handler**    | Verificação segura de assinatura com manipuladores de eventos tipados     |
| **Environment Config** | Configuração simples via variáveis de ambiente                            |
| **Type Safety**        | Suporte completo ao TypeScript com payloads tipados                       |

## Início Rápido

Comece com qualquer adaptador de framework em três etapas:

<Steps>
  <Step title="Install the Adaptor">
    Use o gerenciador de pacotes para instalar o adaptador específico do framework:

    <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">
    Adicione suas credenciais do Dodo Payments ao seu ambiente:

    ```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>
      Nunca faça commit do seu `.env` ou segredos no controle de versão.
    </Warning>
  </Step>

  <Step title="Create Route Handlers">
    Configure suas rotas de checkout, portal do cliente e webhooks:

    <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>
      Agora você está pronto para processar pagamentos! Visite as páginas individuais dos adaptadores para guias detalhados e todas as opções disponíveis.
    </Check>
  </Step>
</Steps>

## Tipos de Fluxo de Checkout

Todos os adaptadores suportam três tipos de fluxo de checkout:

<AccordionGroup>
  <Accordion title="Static Checkout (GET)">
    Use checkout estático para links de pagamento simples e compartilháveis. Passe o ID do produto como parâmetro de consulta:

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

    Suporta preenchimento e personalização opcionais do cliente por meio de parâmetros de consulta.
  </Accordion>

  <Accordion title="Dynamic Checkout (POST)">
    Use checkout dinâmico para criar pagamentos programaticamente com detalhes personalizados:

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

    Suporta pagamentos únicos e assinaturas.
  </Accordion>

  <Accordion title="Checkout Sessions (POST)">
    Use sessões de checkout para a experiência mais flexível com suporte a carrinho:

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

    Saiba mais no [Guia de Sessões de Checkout](/developer-resources/checkout-session).
  </Accordion>
</AccordionGroup>

## Manipulação de Eventos de Webhook

Todos os adaptadores proporcionam tratamento de webhooks com segurança de tipos e callbacks de eventos granulares:

```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>
  Todos os manipuladores de webhook verificam automaticamente assinaturas e validam payloads usando esquemas Zod. Requisições inválidas são rejeitadas com códigos de erro apropriados.
</Info>

## Escolhendo o Adaptador Certo

| Framework          | Best For                                    | Runtime        |
| ------------------ | ------------------------------------------- | -------------- |
| **Next.js**        | Aplicações React full-stack com App Router  | Node.js, Edge  |
| **Nuxt**           | Aplicações Vue.js full-stack                | Node.js        |
| **Express**        | APIs REST e apps Node.js tradicionais       | Node.js        |
| **Fastify**        | APIs de alta performance                    | Node.js        |
| **Hono**           | Deployments em edge, Cloudflare Workers     | Edge, Node.js  |
| **Astro**          | Sites de conteúdo com endpoints de servidor | Node.js, Edge  |
| **SvelteKit**      | Aplicações Svelte full-stack                | Node.js        |
| **Remix**          | React full-stack com rotas aninhadas        | Node.js        |
| **TanStack Start** | React full-stack type-safe                  | Node.js        |
| **Better Auth**    | Apps que já usam Better Auth                | Diversos       |
| **Convex**         | Apps que utilizam Convex no backend         | Convex Runtime |
| **Bun**            | Aplicações com servidor nativo Bun          | Bun            |

## Obter Ajuda

Precisa de assistência com adaptadores de framework?

* **Discord**: Participe do nosso [servidor comunitário](https://discord.gg/bYqAp4ayYh) para ajuda em tempo real
* **Email**: Entre em contato pelo [support@dodopayments.com](mailto:support@dodopayments.com)
* **GitHub**: Abra uma issue no repositório do adaptador correspondente
* **Documentação**: Visite nossa [referência de API](/api-reference/introduction)