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

# Panoramica degli Adattatori del Framework

> Adattatori predefiniti per i framework web più popolari per integrare Dodo Payments in pochi minuti con codice minimo

Dodo Payments fornisce adattatori ufficiali per framework che semplificano l'integrazione dei pagamenti. Ogni adattatore è progettato per funzionare senza problemi con le convenzioni del tuo framework, offrendo checkout, portale clienti e gestione dei webhook pronti all'uso.

<Tip>
  Gli adattatori dei framework ti consentono di integrare Dodo Payments in meno di 10 righe di codice. Gestiscono automaticamente l'autenticazione, l'analisi delle richieste e la formattazione delle risposte.
</Tip>

## Adattatori del Framework Disponibili

Scegli l'adattatore che corrisponde al tuo framework:

<CardGroup cols={2}>
  <Card title="Next.js" icon="react" href="/developer-resources/nextjs-adaptor">
    Supporto App Router con gestori di route per checkout, portale e webhook
  </Card>

  <Card title="Nuxt" icon="vuejs" href="/developer-resources/nuxt-adaptor">
    Framework full-stack basato su Vue con integrazione di route server
  </Card>

  <Card title="Express" icon="node-js" href="/developer-resources/express-adaptor">
    Gestori basati su middleware per il popolare framework Node.js
  </Card>

  <Card title="Fastify" icon="bolt" href="/developer-resources/fastify-adaptor">
    Framework Node.js ad alte prestazioni con architettura a plugin
  </Card>

  <Card title="Hono" icon="cloud" href="/developer-resources/hono-adaptor">
    Framework web ultrarapido per edge, Cloudflare Workers e altro ancora
  </Card>

  <Card title="Astro" icon="star" href="/developer-resources/astro-adaptor">
    Framework incentrato sui contenuti con supporto per endpoint server
  </Card>

  <Card title="SvelteKit" icon="code" href="/developer-resources/sveltekit-adaptor">
    Framework full-stack Svelte con integrazione di hook server
  </Card>

  <Card title="Remix" icon="react" href="/developer-resources/remix-adaptor">
    Framework full-stack React con loader e gestori di azioni
  </Card>

  <Card title="TanStack Start" icon="chart-line" href="/developer-resources/tanstack-adaptor">
    Framework full-stack React con tipizzazione forte e funzioni server
  </Card>

  <Card title="Better Auth" icon="shield" href="/developer-resources/better-auth-adaptor">
    Plugin per framework di autenticazione per auth + pagamenti senza interruzioni
  </Card>

  <Card title="Convex" icon="database" href="/developer-resources/convex-component">
    Componente Backend-as-a-Service per la sincronizzazione in tempo reale dei pagamenti
  </Card>

  <Card title="Bun" icon="bolt" href="/developer-resources/bun-adaptor">
    Gestori nativi Bun.serve() per checkout, portale e webhook
  </Card>
</CardGroup>

## Funzionalità principali

Tutti gli adattatori dei framework offrono queste capacità integrate:

| Funzionalità                | Descrizione                                                                |
| --------------------------- | -------------------------------------------------------------------------- |
| **Gestore Checkout**        | Supporto per flussi di checkout statici, dinamici e basati su sessione     |
| **Portale Cliente**         | Gestore predefinito per la gestione degli abbonamenti e della fatturazione |
| **Gestore Webhook**         | Verifica sicura delle firme con gestori di eventi tipizzati                |
| **Configurazione Ambiente** | Configurazione semplice tramite variabili d'ambiente                       |
| **Sicurezza dei Tipi**      | Supporto completo a TypeScript con payload tipizzati                       |

## Avvio rapido

Inizia con qualsiasi adattatore del framework in tre passaggi:

<Steps>
  <Step title="Install the Adaptor">
    Usa il tuo gestore di pacchetti per installare l'adattatore specifico 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">
    Aggiungi le tue credenziali di Dodo Payments al tuo 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>
      Non commettere mai il file `.env` o segreti nel controllo di versione.
    </Warning>
  </Step>

  <Step title="Create Route Handlers">
    Configura le tue route di checkout, portale cliente e webhook:

    <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>
      Ora sei pronto per elaborare i pagamenti! Visita le pagine degli adattatori individuali per guide dettagliate e tutte le opzioni disponibili.
    </Check>
  </Step>
</Steps>

## Tipi di flusso di checkout

Tutti gli adattatori supportano tre tipi di flusso di checkout:

<AccordionGroup>
  <Accordion title="Static Checkout (GET)">
    Usa il checkout statico per link di pagamento semplici e condivisibili. Passa l'ID del prodotto come parametro di query:

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

    Supporta l'auto-compilazione facoltativa del cliente e la personalizzazione tramite parametri di query.
  </Accordion>

  <Accordion title="Dynamic Checkout (POST)">
    Usa il checkout dinamico per creare programmaticamente pagamenti con dettagli personalizzati:

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

    Supporta sia pagamenti una tantum sia abbonamenti.
  </Accordion>

  <Accordion title="Checkout Sessions (POST)">
    Usa le sessioni di checkout per l'esperienza di checkout più flessibile con supporto al carrello:

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

    Scopri di più nella [Checkout Sessions Guide](/developer-resources/checkout-session).
  </Accordion>
</AccordionGroup>

## Gestione degli eventi webhook

Tutti gli adattatori offrono gestione dei webhook con tipizzazione sicura e callback per eventi granulari:

```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>
  Tutti i gestori webhook verificano automaticamente le firme e convalidano i payload utilizzando schemi Zod. Le richieste non valide vengono rifiutate con codici di errore appropriati.
</Info>

## Scegliere l'adattatore giusto

| Framework          | Ideale per                              | Runtime        |
| ------------------ | --------------------------------------- | -------------- |
| **Next.js**        | App React full-stack con App Router     | Node.js, Edge  |
| **Nuxt**           | Applicazioni Vue.js full-stack          | Node.js        |
| **Express**        | API REST e app Node.js tradizionali     | Node.js        |
| **Fastify**        | API ad alte prestazioni                 | Node.js        |
| **Hono**           | Deployment su edge, Cloudflare Workers  | Edge, Node.js  |
| **Astro**          | Siti di contenuti con endpoint server   | Node.js, Edge  |
| **SvelteKit**      | Applicazioni Svelte full-stack          | Node.js        |
| **Remix**          | React full-stack con routing nidificato | Node.js        |
| **TanStack Start** | React full-stack con tipizzazione forte | Node.js        |
| **Better Auth**    | App già basate su Better Auth           | Vari           |
| **Convex**         | App che usano Convex per il backend     | Convex Runtime |
| **Bun**            | Applicazioni server native su Bun       | Bun            |

## Ottenere supporto

Hai bisogno di assistenza con gli adattatori dei framework?

* **Discord**: Unisciti al nostro [server della community](https://discord.gg/bYqAp4ayYh) per aiuto in tempo reale

* **Email**: Contattaci a [support@dodopayments.com](mailto:support@dodopayments.com)

* **GitHub**: Apri una issue nel repository dell'adattatore pertinente

* **Documentazione**: Visita la nostra [API reference](/api-reference/introduction)

* **Discord**: Unisciti al nostro [server della community](https://discord.gg/bYqAp4ayYh) per aiuto in tempo reale

* **Email**: Contattaci a [support@dodopayments.com](mailto:support@dodopayments.com)

* **GitHub**: Apri un problema nel rispettivo repository dell'adattatore

* **Documentazione**: Visita la nostra [riferimento API](/api-reference/introduction)

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