Zum Hauptinhalt springen
In diesem Tutorial lernen Sie, wie Sie sitzplatzbasierte Preisgestaltung mit Dodo Payments-Add-Ons implementieren. Wir erstellen ein Abonnementprodukt mit Add-Ons für zusätzliche Sitze und zeigen Ihnen, wie Sie Zahlungslinks mit benutzerdefinierten Add-On-Mengen generieren.
Dieses Tutorial bietet Beispielimplementierungscode für eine Node.js/Express-Anwendung. Sie können diesen Code für Ihr spezifisches Framework (Next.js, React, Vue usw.) anpassen und die Benutzeroberfläche gemäß den Anforderungen Ihrer Anwendung anpassen.
Am Ende dieses Tutorials wissen Sie, wie Sie:
  • Abonnementprodukte mit sitzplatzbasierter Preisgestaltung erstellen
  • Add-Ons für zusätzliche Sitze einrichten
  • Zahlungslinks mit benutzerdefinierten Add-On-Mengen generieren
  • Checkout-Sitzungen mit dynamischen Sitzplatzanzahlen verwalten

​
Was wir erstellen

Lassen Sie uns ein Modell für sitzplatzbasierte Preisgestaltung erstellen:
  • Basisplan: 49 $/Monat für bis zu 5 Teammitglieder
  • Sitz-Add-On: 2 $/Monat pro zusätzlichem Sitz
  • Zahlungslinks: Dynamischer Checkout mit benutzerdefinierten Sitzplatzmengen
Bevor wir beginnen, stellen Sie sicher, dass Sie:
  • Ein Dodo Payments-Konto haben
  • Grundkenntnisse in TypeScript/Node.js haben

​
Schritt 1: Erstellen Sie Ihr Sitz-Add-On

Jetzt müssen wir ein Add-On erstellen, das zusätzliche Sitze darstellt. Dieses Add-On wird an unser Basisabonnement angehängt und ermöglicht es den Kunden, zusätzliche Sitze zu kaufen.
Erstellen des Basisabonnementprodukts
Was wir erstellen: Ein Add-On, das 2 $/Monat pro Sitz kostet und zu jedem Basisabonnement hinzugefügt werden kann.
1

Navigieren Sie zu Add-Ons

  1. Gehen Sie in Ihrem Dodo Payments-Dashboard zum Abschnitt Produkte
  2. Klicken Sie auf die Registerkarte Add-Ons
  3. Klicken Sie auf Add-On erstellen
Dies öffnet das Formular zur Erstellung von Add-Ons.
2

Geben Sie die Add-On-Details ein

Füllen Sie diese Werte für unser Sitz-Add-On aus:Add-On Name: Additional Team SeatBeschreibung: Add extra team members to your workspace with full access to all featuresPreis: Eingeben → 2.00Währung: Muss mit der Währung Ihres Basisabonnements übereinstimmenSteuerkategorie: Wählen Sie die geeignete Kategorie für Ihr Produkt aus.
3

Speichern Sie Ihr Add-On

  1. Überprüfen Sie alle Ihre Einstellungen:
    • Name: Zusätzlicher Team-Sitz
    • Preis: 2,00 $/Monat
  2. Klicken Sie auf Add-On erstellen
Add-On erstellt! Ihr Sitz-Add-On ist jetzt verfügbar, um an Abonnements angehängt zu werden.

​
Schritt 2: Erstellen Sie Ihr Basisabonnementprodukt

Wir beginnen mit der Erstellung eines Basisabonnementprodukts, das 5 Teammitglieder umfasst. Dies wird die Grundlage unseres Modells für sitzplatzbasierte Preisgestaltung sein.
Erstellen des Basisabonnementprodukts
1

Navigieren Sie zu Produkten

  1. Melden Sie sich in Ihrem Dodo Payments-Dashboard an
  2. Klicken Sie auf Produkte in der linken Seitenleiste
  3. Klicken Sie auf die Schaltfläche Produkt erstellen
  4. Wählen Sie Abonnement als Produkttyp aus
Sie sollten ein Formular sehen, in dem wir unser Basisabonnement konfigurieren.
2

Füllen Sie die Abonnementdetails aus

Jetzt geben wir die spezifischen Details für unseren Basisplan ein:Produktname: MotionBeschreibung: Where your team's documentation lives.Wiederkehrender Preis: Eingeben → 49.00Abrechnungszyklus: Auswählen → MonthlyWährung: Wählen Sie Ihre bevorzugte Währung (z.B. USD)

​
Schritt 3: Verbinden Sie das Add-On mit dem Abonnement

Jetzt müssen wir unser Sitz-Add-On mit dem Basisabonnement verknüpfen, damit die Kunden während des Checkouts zusätzliche Sitze kaufen können.
1

Fügen Sie das Sitz-Add-On hinzu

Hinzufügen des Add-Ons zum Abonnement
  1. Scrollen Sie zum Abschnitt Add-Ons
  2. Klicken Sie auf Add-Ons hinzufügen
  3. Wählen Sie aus dem Dropdown-Menü Ihr Sitz-Add-On aus
  4. Bestätigen Sie, dass es in Ihrer Abonnementkonfiguration angezeigt wird
2

Änderungen am Abonnement speichern

  1. Überprüfen Sie Ihre vollständige Abonnementkonfiguration:
    • Basisplan: 49 $/Monat für 5 Sitze
    • Add-On: 2 $/Monat pro zusätzlichem Sitz
    • Kostenlose Testversion: 14 Tage
  2. Klicken Sie auf Änderungen speichern
Sitzplatzbasierte Preisgestaltung konfiguriert! Kunden können jetzt Ihren Basisplan kaufen und bei Bedarf zusätzliche Sitze hinzufügen.
Jetzt erstellen wir eine Express.js-Anwendung, die Zahlungslinks mit benutzerdefinierten Add-On-Mengen generiert. Hier kommt die wahre Kraft der sitzplatzbasierten Preisgestaltung ins Spiel - Sie können dynamisch Checkout-Sitzungen mit beliebig vielen zusätzlichen Sitzen erstellen.
1

Richten Sie Ihr Projekt ein

Erstellen Sie ein neues Node.js-Projekt und installieren Sie die erforderlichen Abhängigkeiten:
mkdir seat-based-pricing
cd seat-based-pricing
npm init -y
npm install dodopayments express dotenv
npm install -D @types/node @types/express typescript ts-node
Erstellen Sie eine tsconfig.json Datei:
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}
2

Erstellen Sie Ihre Umgebungsdatei

Erstellen Sie eine .env Datei mit Ihrem Dodo Payments API-Schlüssel:
DODO_PAYMENTS_API_KEY=your_actual_dodo_api_key_here
Verpflichten Sie niemals Ihren API-Schlüssel zur Versionskontrolle. Fügen Sie .env zu Ihrer .gitignore Datei hinzu.
3

Implementieren Sie die Erstellung der Checkout-Sitzung

Erstellen Sie eine src/server.ts Datei mit folgendem Code:
// Add this new endpoint for dynamic seat quantities
import 'dotenv/config';
import DodoPayments from 'dodopayments';
import express, { Request, Response } from 'express';

const app = express();

// Initialize the Dodo Payments client
const client = new DodoPayments({
  bearerToken: process.env.DODO_PAYMENTS_API_KEY,
  environment: 'test_mode'
});

async function createCheckoutSession(seatCount: number) {
  try {
    const session = await client.checkoutSessions.create({
      // Products to sell - use IDs from your Dodo Payments dashboard
      product_cart: [
        {
          product_id: 'pdt_7Rl9OWT2Mz4wwUTKz74iZ', // Replace with your actual product ID
          quantity: 1,
          addons: [
            {
              addon_id: 'adn_eKQbNakKrivDpaxmI8wKI', // Replace with your actual addon ID
              quantity: seatCount
            }
          ]
        }
      ],
      
      // Pre-fill customer information to reduce friction
      customer: {
        email: 'steve@example.com',
        name: 'Steve Irwin',
      },
      // Where to redirect after successful payment
      return_url: 'https://example.com/checkout/success',
    });

    // Redirect your customer to this URL to complete payment
    console.log('Checkout URL:', session.checkout_url);
    console.log('Session ID:', session.session_id);
    
    return session;
    
  } catch (error) {
    console.error('Failed to create checkout session:', error);
    throw error;
  }
}

// Example usage in an Express.js route
app.post('/create-checkout/:seatCount', async (req: Request, res: Response) => {
  try {
    const seatCount = parseInt(req.params.seatCount);
    const session = await createCheckoutSession(seatCount);
    res.json({ checkout_url: session.checkout_url });
  } catch (error) {
    res.status(500).json({ error: 'Failed to create checkout session' });
  }
});

// Add this line after your other middleware
app.use(express.static('public'));

// Add this route to serve the demo page
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/../public/index.html');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
4

Fügen Sie eine einfache Weboberfläche hinzu

Erstellen Sie eine public/index.html Datei für einfaches Testen:
<!DOCTYPE html>
<html>
<head>
    <title>Seat-Based Pricing Demo</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 600px; margin: 50px auto; padding: 20px; }
        .form-group { margin: 20px 0; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; }
        button { background: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
        button:hover { background: #0056b3; }
        .result { margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 4px; }
    </style>
</head>
<body>
    <h1>Seat-Based Pricing Demo</h1>
    <p>Generate checkout links with custom seat quantities:</p>
    
    <div class="form-group">
        <label for="seatCount">Number of Additional Seats:</label>
        <input type="number" id="seatCount" value="3" min="0" max="50">
    </div>
    
    <button onclick="createCheckout()">Generate Checkout Link</button>
    
    <div id="result" class="result" style="display: none;">
        <h3>Checkout Link Generated!</h3>
        <p><strong>Seat Count:</strong> <span id="seatCountDisplay"></span></p>
        <p><strong>Total Cost:</strong> $<span id="totalCost"></span>/month</p>
        <p><strong>Checkout URL:</strong></p>
        <a id="checkoutUrl" href="#" target="_blank">Click here to checkout</a>
    </div>

    <script>
        async function createCheckout() {
            const seatCount = document.getElementById('seatCount').value;
            
            try {
                const response = await fetch(`/create-checkout/${seatCount}`, {
                    method: 'POST'
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    document.getElementById('seatCountDisplay').textContent = seatCount;
                    document.getElementById('totalCost').textContent = data.total_cost;
                    document.getElementById('checkoutUrl').href = data.checkout_url;
                    document.getElementById('result').style.display = 'block';
                } else {
                    alert('Error: ' + data.error);
                }
            } catch (error) {
                alert('Error creating checkout session');
            }
        }
    </script>
</body>
</html>
Weboberfläche erstellt! Sie haben jetzt eine einfache Benutzeroberfläche, um verschiedene Sitzplatzmengen zu testen.
5

Statische Dateien bereitstellen

Fügen Sie dies zu Ihrem src/server.ts hinzu, um die HTML-Datei bereitzustellen:
// Add this line after your other middleware
app.use(express.static('public'));

// Add this route to serve the demo page
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/../public/index.html');
});
Statische Dateien konfiguriert! Besuchen Sie http://localhost:3000, um Ihre Demoberfläche zu sehen.

​
Schritt 5: Testen Sie Ihre Implementierung

Lassen Sie uns unsere Implementierung der sitzplatzbasierten Preisgestaltung testen, um sicherzustellen, dass alles korrekt funktioniert.
1

Starten Sie Ihren Server

  1. Stellen Sie sicher, dass Sie Ihre .env Datei mit dem richtigen API-Schlüssel haben
  2. Aktualisieren Sie die Produkt- und Add-On-IDs in Ihrem Code mit den tatsächlichen Werten aus Ihrem Dodo Payments-Dashboard
  3. Starten Sie Ihren Server:
npm run dev
Ihr Server sollte erfolgreich gestartet werden und “Server läuft auf http://localhost:3000” anzeigen.
2

Testen Sie die Weboberfläche

Erstellen des Basisabonnementprodukts
  1. Öffnen Sie Ihren Browser und gehen Sie zu http://localhost:3000
  2. Sie sollten die Demooberfläche für die sitzplatzbasierte Preisgestaltung sehen
  3. Probieren Sie verschiedene Sitzplatzmengen (0, 3, 10 usw.) aus
  4. Klicken Sie auf “Checkout-Link generieren” für jede Menge
  5. Überprüfen Sie, ob die Checkout-URLs korrekt generiert werden.
3

Testen Sie eine Checkout-Sitzung

  1. Generieren Sie einen Checkout-Link mit 3 zusätzlichen Sitzen
  2. Klicken Sie auf die Checkout-URL, um den Dodo Payments-Checkout zu öffnen
  3. Überprüfen Sie, ob der Checkout anzeigt:
    • Basisplan: 49 $/Monat
    • Zusätzliche Sitze: 3 × 2 Dollar = 6 $/Monat
  4. Schließen Sie den Testkauf ab
Der Checkout sollte die korrekte Preisaufstellung anzeigen und Ihnen ermöglichen, den Kauf abzuschließen.
4

Hören Sie auf Webhooks und aktualisieren Sie Ihre DB

Um Ihre Datenbank mit Änderungen an Abonnements und Sitzen synchron zu halten, müssen Sie auf Webhook-Ereignisse von Dodo Payments hören. Webhooks benachrichtigen Ihr Backend, wenn ein Kunde den Checkout abschließt, sein Abonnement aktualisiert oder die Sitzplatzanzahl ändert.Befolgen Sie die offizielle Dodo Payments-Webhooks-Anleitung für Schritt-für-Schritt-Anweisungen zum Einrichten von Webhook-Endpunkten und zum Verarbeiten von Ereignissen:

Dodo Payments Webhooks-Dokumentation

Erfahren Sie, wie Sie Webhook-Ereignisse für Abonnement- und Sitzplatzverwaltung sicher empfangen und verarbeiten.

​
Fehlersuche

Häufige Probleme und deren Lösungen:
Mögliche Ursachen:
  • Ungültige Produkt-ID oder Add-On-ID
  • API-Schlüssel hat nicht genügend Berechtigungen
  • Add-On nicht ordnungsgemäß mit dem Abonnement verknüpft
  • Netzwerkverbindungsprobleme
Lösungen:
  1. Überprüfen Sie, ob Produkt- und Add-On-IDs in Ihrem Dodo Payments-Dashboard vorhanden sind
  2. Stellen Sie sicher, dass das Add-On ordnungsgemäß mit dem Abonnement verknüpft ist
  3. Stellen Sie sicher, dass der API-Schlüssel Berechtigungen zur Erstellung von Checkout-Sitzungen hat
  4. Testen Sie die API-Konnektivität mit einer einfachen GET-Anfrage

​
Herzlichen Glückwunsch! Sie haben die sitzplatzbasierte Preisgestaltung implementiert

Sie haben erfolgreich ein System für sitzplatzbasierte Preisgestaltung mit Dodo Payments erstellt! Hier ist, was Sie erreicht haben:

Basisabonnement

Ein Abonnementprodukt mit 5 enthaltenen Sitzen zu 49 $/Monat erstellt

Sitz-Add-Ons

Add-Ons für zusätzliche Sitze zu 2 $/Monat pro Sitz konfiguriert

Checkout

Eine API erstellt, die Checkout-Sitzungen mit benutzerdefinierten Sitzplatzmengen generiert

Weboberfläche

Eine einfache Weboberfläche zum Testen verschiedener Sitzplatzmengen erstellt
Dieses Beispiel zeigt nur eine minimale Implementierung der sitzplatzbasierten Preisgestaltung. Für den produktiven Einsatz sollten Sie robuste Fehlerbehandlung, Authentifizierung, Datenvalidierung, Sicherheitsmaßnahmen hinzufügen und die Logik an die Anforderungen Ihrer Anwendung anpassen.