Hoppa till huvudinnehåll

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

​
Funktioner

  • Snabb installation - Kom igång på mindre än 5 minuter
  • Betalningsintegration - Förkonfigurerad kassa-flöde med @dodopayments/astro
  • Modern UI - Ren, mörk-temad prissida med Tailwind CSS
  • Webhook-hanterare - Färdig att använda webhook-endpoint för betalningsevenemang
  • Kundportal - Enklicks hantering av prenumerationer
  • TypeScript - Fullt typad med minimala, fokuserade typer
  • Förifylld kassa - Visar hur man skickar kunddata för att förbättra UX

​
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

1

Klona Repositoriet

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

Installera beroenden

npm install
3

Få API-uppgifter

Registrera dig på Dodo Payments och få dina uppgifter från instrumentpanelen:
Se till att du är i Testläge medan du utvecklar!
4

Konfigurera miljövariabler

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
Kom ihåg att aldrig begå din .env fil till versionskontroll. Den är redan inkluderad i .gitignore.
5

Lägg till dina produkter

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

Kör utvecklingsservern

npm run dev
Öppna http://localhost:4321 för att se din prissida!

​
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)
  • Priser
  • 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: "[email protected]",
},

​
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 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

Boilerplate visar hur man hanterar webhook-händelser i src/pages/api/webhook.ts:
  • onSubscriptionActive - Utlöses när en prenumeration blir aktiv
  • onSubscriptionCancelled - Utlöses när en prenumeration avbryts
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:
PlattformGuide
VercelDistribuera till Vercel
NetlifyDistribuera till Netlify
CloudflareDistribuera 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 DODO_PAYMENTS_WEBHOOK_KEY miljövariabeln i din produktionsmiljö för att matcha webhook-signaturnyckeln för din distribuerade domän.

​
Felsökning

Ta bort node_modules och installera om beroenden:
rm -rf node_modules package-lock.json
npm install
Vanliga orsaker:
  • Ogiltigt produkt-ID - verifiera att det finns i din Dodo-instrumentpanel
  • Fel API-nyckel eller miljöinställning i .env
  • Kontrollera webbläsarens konsol och terminalen för fel
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 den korrekta webhook-verifieringsnyckeln.
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 databas för att hämta kund-ID:t dynamiskt.
Denna boilerplate använder statisk utdata med on-demand API-rutter. Du behöver installera en adapter för distribution:Se Astros distributionsguider för detaljer.

​
Lär dig mer

​
Support

Behöver du hjälp med boilerplate?