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

# Översikt över ramverksadaptrar

> Förbyggda adaptrar för populära webbramverk för att integrera Dodo Payments på några minuter med minimal kod

Dodo Payments tillhandahåller officiella ramverksadaptrar som förenklar betalningsintegration. Varje adapter är utformad för att fungera sömlöst med ditt ramverks konventioner och erbjuder kassa, kundportal och webhook-hantering direkt ur lådan.

<Tip>
  Rammeradaptrar låter dig integrera Dodo Payments med under 10 kodrader. De hanterar autentisering, förfrågningsanalys och svarformatering automatiskt.
</Tip>

## Tillgängliga ramverksadaptrar

Välj den adapter som matchar ditt ramverk:

<CardGroup cols={2}>
  <Card title="Next.js" icon="react" href="/developer-resources/nextjs-adaptor">
    App Router-stöd med route-handlers för checkout, portal och webhookar
  </Card>

  <Card title="Nuxt" icon="vuejs" href="/developer-resources/nuxt-adaptor">
    Vue-baserat fullstackramverk med integration för serverrutter
  </Card>

  <Card title="Express" icon="node-js" href="/developer-resources/express-adaptor">
    Mellanvarubaserade hanterare för det populära Node.js-ramverket
  </Card>

  <Card title="Fastify" icon="bolt" href="/developer-resources/fastify-adaptor">
    Högpresterande Node.js-ramverk med pluginarkitektur
  </Card>

  <Card title="Hono" icon="cloud" href="/developer-resources/hono-adaptor">
    Ultrafast webb-ramverk för edge, Cloudflare Workers och mer
  </Card>

  <Card title="Astro" icon="star" href="/developer-resources/astro-adaptor">
    Innehållsfokuserat ramverk med stöd för serverendpoints
  </Card>

  <Card title="SvelteKit" icon="code" href="/developer-resources/sveltekit-adaptor">
    Fullstack Svelte-ramverk med integration för serverhooks
  </Card>

  <Card title="Remix" icon="react" href="/developer-resources/remix-adaptor">
    Fullstack React-ramverk med loader- och actionhanterare
  </Card>

  <Card title="TanStack Start" icon="chart-line" href="/developer-resources/tanstack-adaptor">
    Typsäkert fullstack React-ramverk med serverfunktioner
  </Card>

  <Card title="Better Auth" icon="shield" href="/developer-resources/better-auth-adaptor">
    Autentiseringsramverksplugin för sömlös auth + betalningar
  </Card>

  <Card title="Convex" icon="database" href="/developer-resources/convex-component">
    Backend-as-a-Service-komponent för synkronisering av betalningar i realtid
  </Card>

  <Card title="Bun" icon="bolt" href="/developer-resources/bun-adaptor">
    Native Bun.serve()-hanterare för checkout, portal och webhookar
  </Card>
</CardGroup>

## Kärnfunktioner

Alla ramverksadaptrar erbjuder dessa inbyggda funktioner:

| Funktion               | Beskrivning                                                       |
| ---------------------- | ----------------------------------------------------------------- |
| **Checkout Handler**   | Stöd för statiska, dynamiska och sessionsbaserade checkout-flöden |
| **Customer Portal**    | Förbyggd handler för prenumerations- och faktureringshantering    |
| **Webhook Handler**    | Säker signaturverifiering med typade händelsehanterare            |
| **Environment Config** | Enkel konfiguration via miljövariabler                            |
| **Type Safety**        | Fullt TypeScript-stöd med typade payloads                         |

## Kom igång snabbt

Kom igång med valfri ramverksadapter i tre steg:

<Steps>
  <Step title="Install the Adaptor">
    Använd din pakethanterare för att installera den ramverksspecifika adaptern:

    <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">
    Lägg till dina Dodo Payments-uppgifter i din miljö:

    ```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>
      Låt aldrig `.env`-filen eller hemligheter hamna i versionskontroll.
    </Warning>
  </Step>

  <Step title="Create Route Handlers">
    Konfigurera dina checkout-, kundportal- och webhookrutter:

    <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>
      Nu är du redo att behandla betalningar! Besök de individuella adapteridorna för detaljerade guider och alla tillgängliga alternativ.
    </Check>
  </Step>
</Steps>

## Typer av checkout-flöden

Alla adaptrar stöder tre typer av checkout-flöden:

<AccordionGroup>
  <Accordion title="Static Checkout (GET)">
    Använd statisk checkout för enkla, delbara betalningslänkar. Skicka produkt-ID:t som en query-parameter:

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

    Stöder valfri förifyllning av kund och anpassning via query-parametrar.
  </Accordion>

  <Accordion title="Dynamic Checkout (POST)">
    Använd dynamisk checkout för att programatiskt skapa betalningar med anpassade detaljer:

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

    Stöder både engångsbetalningar och prenumerationer.
  </Accordion>

  <Accordion title="Checkout Sessions (POST)">
    Använd checkout-sessioner för den mest flexibla checkout-upplevelsen med kundvagnsstöd:

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

    Läs mer i [Checkout Sessions Guide](/developer-resources/checkout-session).
  </Accordion>
</AccordionGroup>

## Webhook-händelsehantering

Alla adaptrar erbjuder typsäker webhook-hantering med granulära händelseåteranrop:

```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>
  Alla webhook-hanterare verifierar automatiskt signaturer och validerar payloads med Zod-scheman. Ogiltiga begäran avvisas med lämpliga felkoder.
</Info>

## Välja rätt adapter

| Ramverk            | Bäst för                                    | Körmiljö       |
| ------------------ | ------------------------------------------- | -------------- |
| **Next.js**        | Full-stack React-appar med App Router       | Node.js, Edge  |
| **Nuxt**           | Full-stack Vue.js-applikationer             | Node.js        |
| **Express**        | REST-API:er och traditionella Node.js-appar | Node.js        |
| **Fastify**        | Högpresterande API:er                       | Node.js        |
| **Hono**           | Edge-distributioner, Cloudflare Workers     | Edge, Node.js  |
| **Astro**          | Innehållssajter med serverendpoints         | Node.js, Edge  |
| **SvelteKit**      | Full-stack Svelte-applikationer             | Node.js        |
| **Remix**          | Full-stack React med nästlad routing        | Node.js        |
| **TanStack Start** | Typsäker full-stack React                   | Node.js        |
| **Better Auth**    | Appar som redan använder Better Auth        | Various        |
| **Convex**         | Appar som använder Convex för backend       | Convex Runtime |
| **Bun**            | Native Bun-serverapplikationer              | Bun            |

## Få hjälp

Behöver du hjälp med ramverksadaptrar?

* **Discord**: Gå med i vår [community server](https://discord.gg/bYqAp4ayYh) för livehjälp
* **Email**: Kontakta oss på [support@dodopayments.com](mailto:support@dodopayments.com)
* **GitHub**: Öppna en issue i respektive adapterrepository
* **Documentation**: Besök vår [API reference](/api-reference/introduction)