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

# Descripción general de los adaptadores de frameworks

> Adaptadores prediseñados para frameworks web populares que permiten integrar Dodo Payments en minutos con un mínimo de código

Dodo Payments proporciona adaptadores oficiales de frameworks que simplifican la integración de pagos. Cada adaptador está diseñado para funcionar a la perfección con las convenciones de tu framework, ofreciendo checkout, Customer Portal y gestión de webhooks desde el primer momento.

<Tip>
  Los adaptadores de frameworks te permiten integrar Dodo Payments con menos de 10 líneas de código. Gestionan automáticamente la autenticación, el análisis de solicitudes y el formato de respuestas.
</Tip>

## Adaptadores de frameworks disponibles

Elige el adaptador que corresponda a tu framework:

<CardGroup cols={2}>
  <Card title="Next.js" icon="react" href="/developer-resources/nextjs-adaptor">
    Compatibilidad con App Router mediante route handlers para checkout, portal y webhooks
  </Card>

  <Card title="Nuxt" icon="vuejs" href="/developer-resources/nuxt-adaptor">
    Framework full-stack basado en Vue con integración de server routes
  </Card>

  <Card title="Express" icon="node-js" href="/developer-resources/express-adaptor">
    Handlers basados en middleware para el popular framework de Node.js
  </Card>

  <Card title="Fastify" icon="bolt" href="/developer-resources/fastify-adaptor">
    Framework de Node.js de alto rendimiento con arquitectura de plugins
  </Card>

  <Card title="Hono" icon="cloud" href="/developer-resources/hono-adaptor">
    Framework web ultrarrápido para el edge, Cloudflare Workers y mucho más
  </Card>

  <Card title="Astro" icon="star" href="/developer-resources/astro-adaptor">
    Framework centrado en contenido con compatibilidad con server endpoints
  </Card>

  <Card title="SvelteKit" icon="code" href="/developer-resources/sveltekit-adaptor">
    Framework full-stack de Svelte con integración de server hooks
  </Card>

  <Card title="Remix" icon="react" href="/developer-resources/remix-adaptor">
    Framework full-stack de React con handlers de loader y action
  </Card>

  <Card title="TanStack Start" icon="chart-line" href="/developer-resources/tanstack-adaptor">
    Framework full-stack de React con seguridad de tipos y server functions
  </Card>

  <Card title="Better Auth" icon="shield" href="/developer-resources/better-auth-adaptor">
    Plugin de framework de autenticación para una autenticación y pagos fluidos
  </Card>

  <Card title="Convex" icon="database" href="/developer-resources/convex-component">
    Componente Backend-as-a-Service para la sincronización de pagos en tiempo real
  </Card>

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

## Funciones principales

Todos los adaptadores de frameworks ofrecen estas capacidades integradas:

| Función | Descripción |
| - | - |
| **Handler de checkout** | Compatibilidad con flujos de checkout estáticos, dinámicos y basados en sesiones |
| **Customer Portal** | Handler prediseñado para la gestión de suscripciones y facturación |
| **Handler de webhook** | Verificación segura de firmas con event handlers tipados |
| **Configuración del entorno** | Configuración sencilla mediante variables de entorno |
| **Seguridad de tipos** | Compatibilidad completa con TypeScript y payloads tipados |

## Inicio rápido

Empieza a usar cualquier adaptador de framework en tres pasos:

<Steps>
  <Step title="Install the Adaptor">
    Usa tu gestor de paquetes para instalar el adaptador específico del 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">
    Añade tus credenciales de Dodo Payments a tu entorno:

    ```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 confirmes tu archivo `.env` ni tus secretos en el control de versiones.
    </Warning>
  </Step>

  <Step title="Create Route Handlers">
    Configura tus rutas de checkout, Customer Portal y 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>
      ¡Ya puedes procesar pagos! Visita las páginas individuales de los adaptadores para consultar guías detalladas y todas las opciones disponibles.
    </Check>
  </Step>
</Steps>

## Tipos de flujo de checkout

Todos los adaptadores admiten tres tipos de flujo de checkout:

<AccordionGroup>
  <Accordion title="Static Checkout (GET)">
    Usa el checkout estático para enlaces de pago sencillos y fáciles de compartir. Pasa el ID del producto como parámetro de consulta:

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

    Admite el autocompletado y la personalización opcionales del cliente mediante parámetros de consulta.
  </Accordion>

  <Accordion title="Dynamic Checkout (POST)">
    Usa el checkout dinámico para crear pagos mediante programación con detalles personalizados:

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

    Admite pagos únicos y suscripciones.
  </Accordion>

  <Accordion title="Checkout Sessions (POST)">
    Usa sesiones de checkout para disfrutar de la experiencia de checkout más flexible, con compatibilidad con carritos:

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

    Obtén más información en la [guía de Checkout Sessions](/developer-resources/checkout-session).
  </Accordion>
</AccordionGroup>

## Gestión de eventos de webhook

Todos los adaptadores ofrecen gestión de webhooks con seguridad de tipos y 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 los handlers de webhook verifican automáticamente las firmas y validan los payloads mediante esquemas de Zod. Las solicitudes no válidas se rechazan con los códigos de error correspondientes.
</Info>

## Cómo elegir el adaptador adecuado

| Framework | Ideal para | Runtime |
| - | - | - |
| **Next.js** | Aplicaciones React full-stack con App Router | Node.js, Edge |
| **Nuxt** | Aplicaciones Vue.js full-stack | Node.js |
| **Express** | API REST y aplicaciones Node.js tradicionales | Node.js |
| **Fastify** | API de alto rendimiento | Node.js |
| **Hono** | Implementaciones en Edge, Cloudflare Workers | Edge, Node.js |
| **Astro** | Sitios de contenido con server endpoints | Node.js, Edge |
| **SvelteKit** | Aplicaciones Svelte full-stack | Node.js |
| **Remix** | React full-stack con routing anidado | Node.js |
| **TanStack Start** | React full-stack con seguridad de tipos | Node.js |
| **Better Auth** | Aplicaciones que ya utilizan Better Auth | Varios |
| **Convex** | Aplicaciones que utilizan Convex para el backend | Convex Runtime |
| **Bun** | Aplicaciones de servidor nativas de Bun | Bun |

## Obtener ayuda

¿Necesitas ayuda con los adaptadores de frameworks?

* **Discord**: Únete a nuestro [servidor de la comunidad](https://discord.gg/bYqAp4ayYh) para recibir ayuda en tiempo real
* **Email**: Contáctanos en [support@dodopayments.com](mailto:support@dodopayments.com)
* **GitHub**: Abre un issue en el repositorio del adaptador correspondiente
* **Documentación**: Visita nuestra [referencia de API](/api-reference/introduction)

| Framework | Ideal para | Entorno de ejecución |
| - | - | - |
| **Next.js** | Aplicaciones React full-stack con App Router | Node.js, Edge |
| **Nuxt** | Aplicaciones Vue.js full-stack | Node.js |
| **Express** | API REST y aplicaciones Node.js tradicionales | Node.js |
| **Fastify** | API de alto rendimiento | Node.js |
| **Hono** | Implementaciones en Edge, Cloudflare Workers | Edge, Node.js |
| **Astro** | Sitios de contenido con endpoints de servidor | Node.js, Edge |
| **SvelteKit** | Aplicaciones Svelte full-stack | Node.js |
| **Remix** | React full-stack con enrutamiento anidado | Node.js |
| **TanStack Start** | React full-stack con seguridad de tipos | Node.js |
| **Better Auth** | Aplicaciones que ya usan Better Auth | Varios |
| **Convex** | Aplicaciones que usan Convex para el backend | Convex Runtime |
| **Bun** | Aplicaciones de servidor nativas de Bun | Bun |

## Obtener ayuda

Para obtener ayuda con un adaptador de framework:

* **Discord**: Pregunta en el [servidor de la comunidad](https://discord.gg/bYqAp4ayYh).
* **Correo electrónico**: Contacta con [support@dodopayments.com](mailto:support@dodopayments.com).
* **GitHub**: Abre un issue en el [repositorio dodo-adapters](https://github.com/dodopayments/dodo-adapters), que contiene todos los adaptadores.
* **Documentación**: Consulta la [referencia de la API](/api-reference/introduction).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.