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

# Übersicht der Framework-Adapter

> Fertige Adapter für beliebte Web-Frameworks, um Dodo Payments in wenigen Minuten mit minimalem Code zu integrieren

Dodo Payments bietet offizielle Framework-Adapter, die die Zahlungsintegration vereinfachen. Jeder Adapter ist so konzipiert, dass er nahtlos mit den Konventionen Ihres Frameworks funktioniert und Checkout, Kundenportal und Webhook-Verarbeitung sofort bereitstellt.

<Tip>
  Framework-Adapter ermöglichen die Integration von Dodo Payments mit weniger als 10 Codezeilen. Sie übernehmen automatisch Authentifizierung, Anfrageanalyse und Antwortformatierung.
</Tip>

## Verfügbare Framework-Adapter

Wählen Sie den Adapter, der zu Ihrem Framework passt:

<CardGroup cols={2}>
  <Card title="Next.js" icon="react" href="/developer-resources/nextjs-adaptor">
    App-Router-Unterstützung mit Route-Handlern für Checkout, Portal und Webhooks
  </Card>

  <Card title="Nuxt" icon="vuejs" href="/developer-resources/nuxt-adaptor">
    Vue-basiertes Full-Stack-Framework mit Integration von Serverrouten
  </Card>

  <Card title="Express" icon="node-js" href="/developer-resources/express-adaptor">
    Middleware-basierte Handler für das beliebte Node.js-Framework
  </Card>

  <Card title="Fastify" icon="bolt" href="/developer-resources/fastify-adaptor">
    Leistungsstarkes Node.js-Framework mit Plugin-Architektur
  </Card>

  <Card title="Hono" icon="cloud" href="/developer-resources/hono-adaptor">
    Ultraschnelles Webframework für Edge, Cloudflare Workers und mehr
  </Card>

  <Card title="Astro" icon="star" href="/developer-resources/astro-adaptor">
    Content-fokussiertes Framework mit Unterstützung für Serverendpunkte
  </Card>

  <Card title="SvelteKit" icon="code" href="/developer-resources/sveltekit-adaptor">
    Full-Stack-Svelte-Framework mit Integration von Server-Hooks
  </Card>

  <Card title="Remix" icon="react" href="/developer-resources/remix-adaptor">
    Full-Stack-React-Framework mit Loader- und Action-Handlern
  </Card>

  <Card title="TanStack Start" icon="chart-line" href="/developer-resources/tanstack-adaptor">
    Typensicheres Full-Stack-React-Framework mit Serverfunktionen
  </Card>

  <Card title="Better Auth" icon="shield" href="/developer-resources/better-auth-adaptor">
    Authentifizierungs-Framework-Plugin für nahtlose Authentifizierung und Zahlungen
  </Card>

  <Card title="Convex" icon="database" href="/developer-resources/convex-component">
    Backend-as-a-Service-Komponente für die Echtzeit-Synchronisation von Zahlungen
  </Card>

  <Card title="Bun" icon="bolt" href="/developer-resources/bun-adaptor">
    Native Bun.serve()-Handler für Checkout, Portal und Webhooks
  </Card>
</CardGroup>

## Kernfunktionen

Alle Framework-Adapter bieten diese integrierten Funktionen:

| Feature                | Description                                                                 |
| ---------------------- | --------------------------------------------------------------------------- |
| **Checkout Handler**   | Unterstützung für statische, dynamische und sitzungsbasierte Checkout-Flows |
| **Customer Portal**    | Vorgefertigter Handler für Abonnement- und Abrechnungsverwaltung            |
| **Webhook Handler**    | Sichere Signaturprüfung mit typisierten Ereignishandlern                    |
| **Environment Config** | Einfache Einrichtung über Umgebungsvariablen                                |
| **Type Safety**        | Vollständige TypeScript-Unterstützung mit typisierten Payloads              |

## Schnellstart

Starten Sie mit jedem Framework-Adapter in drei Schritten:

<Steps>
  <Step title="Install the Adaptor">
    Verwenden Sie Ihren Paketmanager, um den frameworkspezifischen Adapter zu installieren:

    <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">
    Fügen Sie Ihre Dodo Payments-Zugangsdaten zu Ihrer Umgebung hinzu:

    ```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>
      Committen Sie niemals Ihre `.env`-Datei oder Geheimnisse in die Versionskontrolle.
    </Warning>
  </Step>

  <Step title="Create Route Handlers">
    Richten Sie Ihre Checkout-, Kundenportal- und Webhook-Routen ein:

    <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>
      Sie sind nun bereit, Zahlungen zu verarbeiten! Besuchen Sie die einzelnen Adapterseiten für detaillierte Anleitungen und alle verfügbaren Optionen.
    </Check>
  </Step>
</Steps>

## Checkout-Flussarten

Alle Adapter unterstützen drei Checkout-Flussarten:

<AccordionGroup>
  <Accordion title="Static Checkout (GET)">
    Verwenden Sie statischen Checkout für einfache, teilbare Zahlungslinks. Übergeben Sie die Produkt-ID als Abfrageparameter:

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

    Unterstützt optionales Vorausfüllen des Kunden und Anpassungen über Abfrageparameter.
  </Accordion>

  <Accordion title="Dynamic Checkout (POST)">
    Verwenden Sie dynamischen Checkout, um Zahlungen programmatisch mit individuellen Details zu erstellen:

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

    Unterstützt Einmalzahlungen und Abonnements.
  </Accordion>

  <Accordion title="Checkout Sessions (POST)">
    Verwenden Sie Checkout-Sessions für die flexibelste Checkout-Erfahrung mit Warenkorb-Unterstützung:

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

    Erfahren Sie mehr im [Checkout Sessions Guide](/developer-resources/checkout-session).
  </Accordion>
</AccordionGroup>

## Webhook-Ereignisverarbeitung

Alle Adapter bieten typgesicherte Webhook-Verarbeitung mit granularer Ereignis-Callback-Steuerung:

```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>
  Alle Webhook-Handler verifizieren automatisch Signaturen und validieren Payloads mithilfe von Zod-Schemata. Ungültige Anfragen werden mit entsprechenden Fehlercodes abgelehnt.
</Info>

## Die richtige Adapterwahl

| Framework          | Best For                                           | Runtime        |
| ------------------ | -------------------------------------------------- | -------------- |
| **Next.js**        | Full-Stack-React-Apps mit App Router               | Node.js, Edge  |
| **Nuxt**           | Full-Stack-Vue.js-Anwendungen                      | Node.js        |
| **Express**        | REST-APIs und traditionelle Node.js-Apps           | Node.js        |
| **Fastify**        | Hochleistungs-APIs                                 | Node.js        |
| **Hono**           | Edge-Bereitstellungen, Cloudflare Workers          | Edge, Node.js  |
| **Astro**          | Content-Sites mit Serverendpunkten                 | Node.js, Edge  |
| **SvelteKit**      | Full-Stack-Svelte-Anwendungen                      | Node.js        |
| **Remix**          | Full-Stack-React mit verschachtelter Routing-Logik | Node.js        |
| **TanStack Start** | Typensicheres Full-Stack-React                     | Node.js        |
| **Better Auth**    | Apps, die bereits Better Auth verwenden            | Verschiedene   |
| **Convex**         | Apps, die Convex für das Backend nutzen            | Convex Runtime |
| **Bun**            | Native Bun-Serveranwendungen                       | Bun            |

## Hilfe erhalten

Benötigen Sie Hilfe mit Framework-Adaptern?

* **Discord**: Treten Sie unserem [Community-Server](https://discord.gg/bYqAp4ayYh) für Echtzeit-Hilfe bei
* **E-Mail**: Kontaktieren Sie uns unter [support@dodopayments.com](mailto:support@dodopayments.com)
* **GitHub**: Öffnen Sie ein Issue im jeweiligen Adapter-Repository
* **Dokumentation**: Besuchen Sie unsere [API-Referenz](/api-reference/introduction)