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

# Astro Minimal Boilerplate

> Kom igång snabbt med vår minimala Astro boilerplate för att integrera Dodo Payments i din Astro-applikation

## Översikt

Astro minimal boilerplate ger en färdig att använda startpunkt för att integrera Dodo Payments med din Astro-applikation. Denna mall inkluderar kassa-sessioner, webhook-hantering, kundportal och moderna UI-komponenter för att hjälpa dig att börja ta emot betalningar snabbt.

<Info>
  Denna boilerplate använder Astro 5 med TypeScript, Tailwind CSS 4 och `@dodopayments/astro`-adaptern.
</Info>

### Funktioner

* **Quick Setup** - Kom igång på under 5 minuter
* **Payment Integration** - Förkonfigurerat kassaflöde med `@dodopayments/astro`
* **Modern UI** - Ren, mörk prissättningssida med Tailwind CSS
* **Webhook Handler** - Färdig webhook-endpoint för betalningshändelser
* **Customer Portal** - Hantering av prenumerationer med ett klick
* **TypeScript** - Fullt typad med minimala, fokuserade typer
* **Pre-filled Checkout** - Visar hur kunddata skickas för att förbättra användarupplevelsen

## Förutsättningar

Innan du börjar, se till att du har:

* **Node.js LTS-version** (krävs för Astro 5)
* **Dodo Payments-konto** (för att få tillgång till API och Webhook-nycklar från instrumentpanelen)

## Snabbstart

<Steps>
  <Step title="Clone the Repository">
    ```bash theme={null}
    git clone https://github.com/dodopayments/dodo-astro-minimal-boilerplate.git
    cd dodo-astro-minimal-boilerplate
    ```
  </Step>

  <Step title="Install Dependencies">
    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Get API Credentials">
    Registrera dig på [Dodo Payments](https://dodopayments.com/) och hämta dina uppgifter från instrumentpanelen:

    * **API-nyckel:** [Instrumentpanel → Utvecklare → API-nycklar](https://app.dodopayments.com/developer/api-keys)
    * **Webhook-nyckel:** [Instrumentpanel → Utvecklare → Webhooks](https://app.dodopayments.com/developer/webhooks)

    <Tip>
      Se till att du är i **Test Mode** under utvecklingen!
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    Skapa en `.env`-fil i rotkatalogen:

    ```bash theme={null}
    cp .env.example .env
    ```

    Uppdatera värdena med dina Dodo Payments-uppgifter:

    ```env theme={null}
    DODO_PAYMENTS_API_KEY=your_api_key_here
    DODO_PAYMENTS_WEBHOOK_KEY=your_webhook_signing_key_here
    DODO_PAYMENTS_RETURN_URL=http://localhost:4321/
    DODO_PAYMENTS_ENVIRONMENT=test_mode
    ```

    <Warning>
      Begå aldrig din `.env`-fil till versionshantering. Den ingår redan i `.gitignore`.
    </Warning>
  </Step>

  <Step title="Add Your Products">
    Uppdatera `src/lib/products.ts` med dina faktiska produkt-ID:n från Dodo Payments:

    ```typescript theme={null}
    export const products: Product[] = [
      {
        product_id: "pdt_001", // Replace with your product ID
        name: "Basic Plan",
        description: "Get access to basic features and support",
        price: 9999, // in cents
        features: [
          "Access to basic features",
          "Email support",
          "1 Team member",
          "Basic analytics",
        ],
      },
      // ... add more products
    ];
    ```
  </Step>

  <Step title="Run the Development Server">
    ```bash theme={null}
    npm run dev
    ```

    Öppna [http://localhost:4321](http://localhost:4321) för att se din prissättningssida!
  </Step>
</Steps>

## Projektstruktur

```text theme={null}
src/
├── components/
│   ├── Footer.astro           # Reusable footer
│   ├── Header.astro           # Navigation header
│   └── ProductCard.astro      # Product pricing card
├── layouts/
│   └── Layout.astro           # Root layout
├── lib/
│   └── products.ts            # Product definitions
├── pages/
│   ├── index.astro            # Pricing page (home)
│   └── api/
│       ├── checkout.ts        # Checkout session handler
│       ├── customer-portal.ts # Customer portal redirect
│       └── webhook.ts         # Webhook event handler
└── styles/
    └── global.css             # Global styles with Tailwind
```

## Anpassning

### Uppdatera produktinformation

Redigera `src/lib/products.ts` för att ändra:

* Produkt-ID:n (från din Dodo-instrumentpanel)
* Prissättning
* Funktioner
* Beskrivningar

### Förifyll kunddata

I `src/components/ProductCard.astro`, ersätt de hårdkodade värdena med dina faktiska användardata:

```typescript theme={null}
customer: {
  name: "John Doe",
  email: "john@example.com",
},
```

### Uppdatera kundportalen

I `src/components/Header.astro`, ersätt det hårdkodade kund-ID:t med det faktiska kund-ID:t från ditt autentiseringssystem eller din databas:

```typescript theme={null}
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
```

Du kan genomföra ett testköp för att få kund-ID:t för testning.

## Webhook-händelser

Boilerplaten visar hur webhook-händelser hanteras i `src/pages/api/webhook.ts`:

* `onSubscriptionActive` - Triggas när en prenumeration blir aktiv
* `onSubscriptionCancelled` - Triggas när en prenumeration avslutas

Lägg till din affärslogik inuti dessa hanterare:

```typescript theme={null}
onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},
```

Lägg till fler webhook-händelser vid behov.

För lokal utveckling kan du använda verktyg som [ngrok](https://ngrok.com/) för att skapa en säker tunnel till din lokala server och använda den som din webhook-URL.

## Distribution

Denna boilerplate använder statisk utdata med on-demand rendering för API-rutter. Du behöver installera en adapter för din distributionsplattform:

| Plattform  | Guide                                                                                |
| ---------- | ------------------------------------------------------------------------------------ |
| Vercel     | [Distribuera till Vercel](https://docs.astro.build/en/guides/deploy/vercel/)         |
| Netlify    | [Distribuera till Netlify](https://docs.astro.build/en/guides/deploy/netlify/)       |
| Cloudflare | [Distribuera till Cloudflare](https://docs.astro.build/en/guides/deploy/cloudflare/) |

Se [Astros distributionsguider](https://docs.astro.build/en/guides/deploy/) för alla plattformar.

### Uppdatera Webhook-URL

Efter distribution, uppdatera din webhook-URL i [Dodo Payments Dashboard](https://app.dodopayments.com/developer/webhooks):

```text theme={null}
https://your-domain.com/api/webhook
```

Kom också ihåg att uppdatera miljövariabeln `DODO_PAYMENTS_WEBHOOK_KEY` i din produktionsmiljö för att matcha webhookens signeringsnyckel för din distribuerade domän.

## Felsökning

<AccordionGroup>
  <Accordion title="Module not found or build errors">
    Ta bort `node_modules` och installera om beroenden:

    ```bash theme={null}
    rm -rf node_modules package-lock.json
    npm install
    ```
  </Accordion>

  <Accordion title="Checkout redirect fails">
    **Vanliga orsaker:**

    * Ogiltigt produkt-ID – kontrollera att det finns i din Dodo-instrumentpanel
    * Fel API-nyckel eller miljöinställning i `.env`
    * Kontrollera webbläsarkonsolen och terminalen för fel
  </Accordion>

  <Accordion title="Webhooks not receiving events">
    För lokal testning, använd [ngrok](https://ngrok.com) för att exponera din server:

    ```bash theme={null}
    ngrok http 4321
    ```

    Uppdatera webhook-URL:en i din [Dodo-instrumentpanel](https://app.dodopayments.com/developer/webhooks) till ngrok-URL:en. Kom ihåg att uppdatera din .env-fil med korrekt webhook-verifieringsnyckel.
  </Accordion>

  <Accordion title="Customer portal link doesn't work">
    Ersätt den hårdkodade `CUSTOMER_ID` i `src/components/Header.astro` med ett faktiskt kund-ID från din Dodo-instrumentpanel.

    Eller integrera ditt autentiseringssystem och din databas för att hämta kund-ID:t dynamiskt.
  </Accordion>

  <Accordion title="Build fails with adapter error">
    Denna boilerplate använder statisk output med API-rutter på begäran. Du måste installera en adapter för distribution:

    Se [Astro's deployment guides](https://docs.astro.build/en/guides/deploy/) för detaljer.
  </Accordion>
</AccordionGroup>

## Lär dig mer

* [Dodo Payments-dokumentation](https://docs.dodopayments.com/)
* [Dokumentation för Checkout Sessions](https://docs.dodopayments.com/developer-resources/checkout-session)
* [Webhooks-dokumentation](https://docs.dodopayments.com/developer-resources/webhooks)

## Support

Behöver du hjälp med boilerplate?

* Gå med i vår [Discord-community](https://discord.gg/bYqAp4ayYh) för frågor och diskussioner
* Kolla in [GitHub-repositoriet](https://github.com/dodopayments/dodo-astro-minimal-boilerplate) för problem och uppdateringar
* Kontakta vårt [supportteam](mailto:support@dodopayments.com) för hjälp