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. Du kannst diesen Code für dein spezifisches Framework (Next.js, React, Vue usw.) anpassen und die Benutzeroberfläche entsprechend den Anforderungen deiner Anwendung gestalten.
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, stelle sicher, dass du:
  • Ein Dodo Payments-Konto hast
  • Grundkenntnisse in TypeScript/Node.js besitzt

​
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.
Creating base subscription product
What we’re building: Ein Add-on, das $2/Monat pro Sitz kostet und zu jedem Basis-Abonnement hinzugefügt werden kann.
1

Navigate to Add-Ons

  1. Bleibe in deinem Dodo Payments-Dashboard im Bereich Products
  2. Klicke auf die Registerkarte Add-Ons
  3. Klicke auf Create Add-On
Dies öffnet das Formular zur Erstellung eines Add-ons.
2

Enter add-on details

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

Save your add-on

  1. Überprüfe alle deine Einstellungen:
    • Name: Additional Team Seat
    • Price: $2.00/month
  2. Klicke auf Create Add-On
Add-on erstellt! Dein Sitz-Add-on steht jetzt zur Verfügung, 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.
Creating base subscription product
1

Navigate to Products

  1. Melde dich in deinem Dodo Payments-Dashboard an
  2. Klicke in der linken Seitenleiste auf Products
  3. Klicke auf die Schaltfläche Create Product
  4. Wähle Subscription als Produkttyp aus
Du solltest ein Formular sehen, in dem wir unser Basis-Abonnement konfigurieren.
2

Fill in the subscription details

Jetzt geben wir die spezifischen Details für unseren Basisplan ein:Product Name: MotionDescription: Where your team's documentation lives.Recurring Price: Enter → 49.00Billing Cycle: Select → MonthlyCurrency: Wähle deine 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

Attach the seat add-on

Attaching add-on to subscription
  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

Save subscription changes

  1. Überprüfe deine vollständige Abonnementeinrichtung:
    • Basisplan: $49/Monat für 5 Sitze
    • Add-on: $2/Monat pro zusätzlichem Sitz
    • Kostenloser Testzeitraum: 14 Tage
  2. Klicke auf Save Changes
Sitzbasierte Preisgestaltung konfiguriert! Kunden können nun deinen Basisplan erwerben 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

Set up your project

Erstelle ein neues Node.js-Projekt und installiere die benötigten 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
Erstelle eine tsconfig.json-Datei:
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}
2

Create your environment file

Erstelle eine .env-Datei mit deinem Dodo Payments-API-Schlüssel:
DODO_PAYMENTS_API_KEY=your_actual_dodo_api_key_here
Veröffentliche deinen API-Schlüssel niemals im Versionskontrollsystem. Füge .env zu deiner .gitignore-Datei hinzu.
3

Implement the checkout session creation

Erstelle 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

Add a simple web interface

Erstelle eine public/index.html-Datei für einfache Tests:
<!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! Du hast jetzt eine einfache Benutzeroberfläche, um verschiedene Sitzanzahlen zu testen.
5

Serve static files

Füge dies zu deiner 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! Besuche http://localhost:3000, um deine Demo-Oberflä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

Start your server

  1. Stelle sicher, dass du deine .env-Datei mit dem korrekten API-Schlüssel hast
  2. Aktualisiere die Produkt- und Add-On-IDs in deinem Code mit den tatsächlichen Werten aus deinem Dodo Payments-Dashboard
  3. Starte deinen Server:
npm run dev
Dein Server sollte erfolgreich starten und “Server running on http://localhost:3000” anzeigen
2

Test the web interface

Creating base subscription product
  1. Öffne deinen Browser und gehe zu http://localhost:3000
  2. Du solltest die Demo-Oberfläche für sitzbasierte Preisgestaltung sehen
  3. Probiere verschiedene Sitzanzahlen aus (0, 3, 10 usw.)
  4. Klicke für jede Anzahl auf “Generate Checkout Link”
  5. Überprüfe, ob die Checkout-URLs korrekt generiert werden
3

Test a checkout session

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

Listen for webhooks and update your DB

Damit deine Datenbank mit Änderungen an Abonnements und Sitzanzahlen synchron bleibt, musst du Webhook-Ereignisse von Dodo Payments abhören. Webhooks benachrichtigen dein Backend, wenn ein Kunde den Checkout abschließt, sein Abonnement aktualisiert oder die Sitzanzahl ä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 Documentation

Erfahre, wie du Webhook-Ereignisse sicher empfängst und verarbeitest, um Abonnements und Sitzverwaltung zu steuern.

​
Fehlersuche

Häufige Probleme und deren Lösungen:
Mögliche Ursachen:
  • Ungültige Produkt-ID oder Add-On-ID
  • Der API-Schlüssel hat nicht ausreichende Berechtigungen
  • Add-On ist nicht korrekt mit dem Abonnement verknüpft
  • Netzwerkverbindungsprobleme
Lösungen:
  1. Überprüfe, ob Produkt- und Add-On-IDs in deinem Dodo Payments-Dashboard vorhanden sind
  2. Stelle sicher, dass das Add-On korrekt an das Abonnement angehängt ist
  3. Prüfe, ob der API-Schlüssel Berechtigungen zum Erstellen von Checkout-Sessions hat
  4. Teste 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:

Base Subscription

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

Seat Add-ons

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

Checkout

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

Web Interface

Eine einfache Weboberfläche zum Testen unterschiedlicher Sitzanzahlen erstellt
Dieses Beispiel demonstriert nur eine minimale Implementierung der sitzbasierten Preisgestaltung. Für den produktiven Einsatz solltest du eine robuste Fehlerbehandlung, Authentifizierung, Datenvalidierung, Sicherheitsmaßnahmen hinzufügen und die Logik an die Anforderungen deiner Anwendung anpassen.