Astro Minimal Boilerplate

​

Übersicht

​

Funktionen

• Schnelle Einrichtung: Vom Klonen bis zu einer laufenden Preisseite in etwa fünf Minuten.
• Checkout: Ein vorkonfigurierter Checkout-Ablauf auf Basis von @dodopayments/astro.
• Preisseite: Eine dunkel gehaltene Preisseite mit Tailwind CSS.
• Webhook-Handler: Ein Endpunkt, der jede Webhook-Signatur überprüft und Ihren Code für das Ereignis ausführt.
• Customer Portal: Ein Link in der Kopfzeile, der das Customer Portal öffnet, in dem Kunden ihre Abonnements verwalten.
• TypeScript: Typisierte Produktdefinitionen und Handler.
• Vorausgefüllter Checkout: Übermittelt den Namen und die E-Mail-Adresse des Kunden an den Checkout, damit der Kunde sie nicht erneut eingeben muss.

​

Voraussetzungen

• Eine Node.js-LTS-Version, die von Astro 5 vorausgesetzt wird.
• Ein Dodo Payments-Konto, um im Dashboard einen API-Key und ein Webhook-Signaturgeheimnis zu erstellen.

​

Schnellstart

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

npm install

cp .env.example .env

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

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

npm run dev

​

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

​

Anpassung

​

Produktinformationen aktualisieren

• Produkt-IDs aus dem Products-Bereich Ihres Dodo Payments-Dashboards
• Preise
• Funktionen
• Beschreibungen

​

Kundendaten vorausfüllen

customer: {
  name: "John Doe",
  email: "john@example.com",
},

​

Customer Portal aktualisieren

const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID

​

Webhook-Ereignisse

• onSubscriptionActive wird ausgeführt, wenn ein Abonnement aktiv wird (subscription.active).
• onSubscriptionCancelled wird ausgeführt, wenn ein Abonnement gekündigt wird (subscription.cancelled).

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

​

Bereitstellung

​

Webhook-URL aktualisieren

https://your-domain.com/api/webhook

​

Fehlerbehebung

rm -rf node_modules package-lock.json
npm install

ngrok http 4321

​

Weitere Informationen

• Dodo Payments-Dokumentation
• Dokumentation zu Checkout Sessions
• Webhooks-Dokumentation
• Astro Adaptor: Optionen für die Checkout-, CustomerPortal- und Webhooks-Handler
• Astro-Dokumentation

​

Support

• Stellen Sie Fragen in der Discord-Community.
• Melden Sie Probleme und verfolgen Sie Aktualisierungen im GitHub-Repository.
• Schreiben Sie eine E-Mail an das Support-Team.