Zum Hauptinhalt springen

​
Übersicht

Das Astro Minimal Boilerplate bietet einen sofort einsatzbereiten Ausgangspunkt für die Integration von Dodo Payments in Ihre Astro-Anwendung. Diese Vorlage umfasst Checkout-Sitzungen, Webhook-Verarbeitung, Kundenportal und moderne UI-Komponenten, um Ihnen zu helfen, schnell Zahlungen zu akzeptieren.
Dieses Boilerplate verwendet Astro 5 mit TypeScript, Tailwind CSS 4 und dem @dodopayments/astro Adapter.

​
Funktionen

  • Schnelle Einrichtung - Starten Sie in weniger als 5 Minuten
  • Zahlungsintegration - Vorgekonfigurierter Checkout-Prozess mit @dodopayments/astro
  • Moderne UI - Saubere, dunkel gestaltete Preisgestaltungseite mit Tailwind CSS
  • Webhook-Handler - Bereitstehender Webhook-Endpunkt für Zahlungsereignisse
  • Kundenportal - Ein-Klick-Abonnementverwaltung
  • TypeScript - Vollständig typisiert mit minimalen, fokussierten Typen
  • Vorab ausgefüllter Checkout - Demonstriert das Übergeben von Kundendaten zur Verbesserung der Benutzererfahrung

​
Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:
  • Node.js LTS-Version (erforderlich für Astro 5)
  • Dodo Payments-Konto (um API- und Webhook-Keys vom Dashboard abzurufen)

​
Schnellstart

1

Repository klonen

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

Abhängigkeiten installieren

npm install
3

API-Anmeldeinformationen abrufen

Melden Sie sich bei Dodo Payments an und holen Sie sich Ihre Anmeldeinformationen vom Dashboard:
Stellen Sie sicher, dass Sie sich im Testmodus befinden, während Sie entwickeln!
4

Umgebungsvariablen konfigurieren

Erstellen Sie eine .env Datei im Stammverzeichnis:
cp .env.example .env
Aktualisieren Sie die Werte mit Ihren Dodo Payments-Anmeldeinformationen:
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
Verpflichten Sie niemals Ihre .env Datei zur Versionskontrolle. Sie ist bereits in .gitignore enthalten.
5

Ihre Produkte hinzufügen

Aktualisieren Sie src/lib/products.ts mit Ihren tatsächlichen Produkt-IDs von 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

Entwicklungsserver starten

npm run dev
Öffnen Sie http://localhost:4321, um Ihre Preisgestaltungseite zu sehen!

​
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

Bearbeiten Sie src/lib/products.ts, um Folgendes zu ändern:
  • Produkt-IDs (aus Ihrem Dodo-Dashboard)
  • Preise
  • Funktionen
  • Beschreibungen

​
Kundendaten vorab ausfüllen

In src/components/ProductCard.astro ersetzen Sie die fest codierten Werte durch Ihre tatsächlichen Benutzerdaten: 
customer: {
  name: "John Doe",
  email: "[email protected]",
},

​
Kundenportal aktualisieren

In src/components/Header.astro ersetzen Sie die fest codierte Kunden-ID durch die tatsächliche Kunden-ID aus Ihrem Authentifizierungssystem oder Ihrer Datenbank: 
const CUSTOMER_ID = "cus_001"; // Replace with actual customer ID
Sie können einen Testkauf abschließen, um die Kunden-ID für Tests zu erhalten.

​
Webhook-Ereignisse

Das Boilerplate demonstriert die Verarbeitung von Webhook-Ereignissen in src/pages/api/webhook.ts:
  • onSubscriptionActive - Ausgelöst, wenn ein Abonnement aktiv wird
  • onSubscriptionCancelled - Ausgelöst, wenn ein Abonnement storniert wird
Fügen Sie Ihre Geschäftslogik in diese Handler ein: 
onSubscriptionActive: async (payload) => {
  // Grant access to your product
  // Update user database
  // Send welcome email
},
Fügen Sie bei Bedarf weitere Webhook-Ereignisse hinzu. Für die lokale Entwicklung können Sie Tools wie ngrok verwenden, um einen sicheren Tunnel zu Ihrem lokalen Server zu erstellen und ihn als Ihre Webhook-URL zu verwenden.

​
Bereitstellung

Dieses Boilerplate verwendet statische Ausgaben mit bedarfsorientierter Rendering für API-Routen. Sie müssen einen Adapter für Ihre Bereitstellungsplattform installieren:
PlattformAnleitung
VercelBereitstellung auf Vercel
NetlifyBereitstellung auf Netlify
CloudflareBereitstellung auf Cloudflare
Siehe Astros Bereitstellungsanleitungen für alle Plattformen.

​
Webhook-URL aktualisieren

Nach der Bereitstellung aktualisieren Sie Ihre Webhook-URL im Dodo Payments Dashboard: 
https://your-domain.com/api/webhook
Denken Sie auch daran, die DODO_PAYMENTS_WEBHOOK_KEY Umgebungsvariable in Ihrer Produktionsumgebung zu aktualisieren, um mit dem Webhook-Signaturschlüssel für Ihre bereitgestellte Domain übereinzustimmen.

​
Fehlersuche

Löschen Sie node_modules und installieren Sie die Abhängigkeiten neu:
rm -rf node_modules package-lock.json
npm install
Häufige Ursachen:
  • Ungültige Produkt-ID - überprüfen Sie, ob sie in Ihrem Dodo-Dashboard vorhanden ist
  • Falscher API-Schlüssel oder Umgebungsparameter in .env
  • Überprüfen Sie die Browser-Konsole und das Terminal auf Fehler
Für lokale Tests verwenden Sie ngrok, um Ihren Server freizugeben:
ngrok http 4321
Aktualisieren Sie die Webhook-URL in Ihrem Dodo-Dashboard auf die ngrok-URL. Denken Sie daran, Ihre .env-Datei mit dem richtigen Webhook-Verifizierungsschlüssel zu aktualisieren.
Dieses Boilerplate verwendet statische Ausgaben mit bedarfsorientierten API-Routen. Sie müssen einen Adapter für die Bereitstellung installieren:Siehe Astros Bereitstellungsanleitungen für Details.

​
Erfahren Sie mehr

​
Unterstützung

Brauchen Sie Hilfe mit dem Boilerplate?