Zum Hauptinhalt springen

​
Übersicht

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

​
Funktionen

  • Schnelle Einrichtung – In weniger als 5 Minuten startklar
  • Zahlungsintegration – Vorgefertigter Checkout-Flow mit @dodopayments/nextjs
  • Moderne Oberfläche – Saubere, dunkel gehaltene Preisübersicht mit Tailwind CSS
  • Webhook-Handler – Bereit nutzbarer Webhook-Endpunkt für Zahlungsereignisse
  • Kundenportal – Ein-Klick-Verwaltung von Abonnements
  • TypeScript – Vollständig typisiert mit minimalen, fokussierten Typen
  • Vorbefüllter Checkout – Zeigt, wie Kundendaten zur Verbesserung der UX übergeben werden

​
Voraussetzungen

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

​
Schnellstart

1

Clone the Repository

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

Install Dependencies

npm install
3

Get API Credentials

Melde dich bei Dodo Payments an und hole dir deine Zugangsdaten über das Dashboard:
Stelle sicher, dass du dich beim Entwickeln im Testmodus befindest!
4

Configure Environment Variables

Erstelle 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:3000
DODO_PAYMENTS_ENVIRONMENT=test_mode
Committe deine .env-Datei niemals in die Versionskontrolle. Sie ist bereits in .gitignore enthalten.
5

Add Your Products

Aktualisiere src/lib/products.ts mit deinen 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

Run the Development Server

npm run dev
Öffne http://localhost:3000, um deine Preisübersicht zu sehen!

​
Projektstruktur

src/
├── app/
│   ├── api/
│   │   ├── checkout/          # Checkout session handler
│   │   ├── customer-portal/   # Customer portal redirect
│   │   └── webhook/           # Webhook event handler
│   ├── components/
│   │   ├── Footer.tsx         # Reusable footer
│   │   ├── Header.tsx         # Navigation header
│   │   └── ProductCard.tsx    # Product pricing card
│   ├── globals.css            # Global styles
│   ├── layout.tsx             # Root layout
│   └── page.tsx               # Pricing page (home)
└── lib/
    └── products.ts            # Product definitions

​
Anpassung

​
Produktinformationen aktualisieren

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

​
Kundendaten vorab ausfüllen

Ersetze in src/app/components/ProductCard.tsx die hartcodierten Werte durch deine tatsächlichen Benutzerdaten: 
customer: {
  name: "John Doe",
  email: "john@example.com",
},

​
Kundenportal aktualisieren

Ersetze in src/app/components/Header.tsx die hartcodierte Kunden-ID: 
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 Behandlung von zwei Webhook-Ereignissen in src/app/api/webhook/route.ts:
  • onSubscriptionActive – Wird ausgelöst, wenn ein Abonnement aktiv wird
  • onPaymentSucceeded – Wird ausgelöst, wenn eine Zahlung erfolgreich ist
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

​
Für die Produktion bauen

npm run build
npm start

​
Auf Vercel bereitstellen

[ Mit Vercel bereitstellen ](https://vercel.com/new/clone?repository-url=https://github.com/dodopayments/dodo-nextjs-minimal-boilerplate) Vergessen Sie nicht, Ihre Umgebungsvariablen im Vercel-Dashboard hinzuzufügen!

​
Webhook-URL aktualisieren

Nach der Bereitstellung aktualisieren Sie Ihre Webhook-URL im Dodo Payments Dashboard: 
https://example.com/api/webhook

​
Fehlersuche

Lösche node_modules und installiere die Abhängigkeiten neu:
rm -rf node_modules package-lock.json
npm install
Häufige Ursachen:
  • Ungültige Produkt-ID – überprüfe, ob sie in deinem Dodo-Dashboard existiert
  • Falscher API-Schlüssel oder Umgebungseinstellung in .env
  • Prüfe Browser-Konsole und Terminal auf Fehler
Für lokale Tests nutze ngrok, um deinen Server freizugeben:
ngrok http 3000
Aktualisiere die Webhook-URL in deinem Dodo-Dashboard auf die ngrok-URL. Denk daran, deine .env-Datei mit dem korrekten Webhook-Verifizierungsschlüssel zu aktualisieren.

​
Erfahren Sie mehr

​
Unterstützung

Brauchen Sie Hilfe mit dem Boilerplate?