Astro Minimal Boilerplate - Dodo Payments Documentation

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

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

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

Clone the Repository

git clone https://github.com/dodopayments/dodo-astro-minimal-boilerplate.git
cd dodo-astro-minimal-boilerplate

Install Dependencies

npm install

Get API Credentials

Registrera dig på Dodo Payments och hämta dina uppgifter från instrumentpanelen:

API-nyckel: Instrumentpanel → Utvecklare → API-nycklar
Webhook-nyckel: Instrumentpanel → Utvecklare → Webhooks

Se till att du är i Test Mode under utvecklingen!

Configure Environment Variables

Skapa en .env-fil i rotkatalogen:

cp .env.example .env

Uppdatera värdena med dina Dodo Payments-uppgifter:

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

Begå aldrig din .env-fil till versionshantering. Den ingår redan i .gitignore.

Add Your Products

Uppdatera src/lib/products.ts med dina faktiska produkt-ID:n från Dodo Payments:

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
];

Run the Development Server

npm run dev

Öppna http://localhost:4321 för att se din prissättningssida!

Projektstruktur

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:

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:

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:

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 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
Netlify	Distribuera till Netlify
Cloudflare	Distribuera till Cloudflare

Se Astros distributionsguider för alla plattformar.

Uppdatera Webhook-URL

Efter distribution, uppdatera din webhook-URL i Dodo Payments Dashboard:

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

Module not found or build errors

Ta bort node_modules och installera om beroenden:

rm -rf node_modules package-lock.json
npm install

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

Webhooks not receiving events

För lokal testning, använd ngrok för att exponera din server:

ngrok http 4321

Uppdatera webhook-URL:en i din Dodo-instrumentpanel till ngrok-URL:en. Kom ihåg att uppdatera din .env-fil med korrekt webhook-verifieringsnyckel.

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.

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 för detaljer.

Lär dig mer

Support

Behöver du hjälp med boilerplate?

Gå med i vår Discord-community för frågor och diskussioner
Kolla in GitHub-repositoriet för problem och uppdateringar
Kontakta vårt supportteam för hjälp

​Översikt

​Funktioner

​Förutsättningar

​Snabbstart

​Projektstruktur

​Anpassning

​Uppdatera produktinformation

​Förifyll kunddata

​Uppdatera kundportalen

​Webhook-händelser

​Distribution

​Uppdatera Webhook-URL

​Felsökning

​Lär dig mer

​Support

Översikt

Funktioner

Förutsättningar

Snabbstart

Projektstruktur

Anpassning

Uppdatera produktinformation

Förifyll kunddata

Uppdatera kundportalen

Webhook-händelser

Distribution

Uppdatera Webhook-URL

Felsökning

Lär dig mer

Support