Sitzplatzbasierte Preisgestaltung mit Add-Ons und Zahlungslinks

Dieses Tutorial zeigt, wie du eine sitzbasierte Preisgestaltung mithilfe von Dodo Payments Add-ons implementierst. Du erstellst ein Abonnementprodukt mit Add-ons für zusätzliche Sitze und generierst Zahlungslinks mit benutzerdefinierten Add-on-Mengen.

Dieses Tutorial verwendet Node.js und Express. Du kannst den Code an dein Framework (Next.js, React, Vue usw.) anpassen und die Benutzeroberfläche so gestalten, dass sie zu deiner Anwendung passt.

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:

Basistarif: $49/Monat für bis zu 5 Teammitglieder
Sitz-Add-on: $2/Monat pro zusätzlichem Sitz
Zahlungslinks: Dynamischer Checkout mit benutzerdefinierten Sitzmengen

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

Erstelle ein Add-on, das zusätzliche Sitze repräsentiert. Dieses Add-on wird an dein Basisabonnement angehängt und ermöglicht es Kunden, zusätzliche Sitze zu erwerben.

Was wir erstellen: Ein Add-on, das $2/Monat pro Sitz kostet und zu jedem Basisabonnement hinzugefügt werden kann.

Navigate to Add-Ons

Bleibe in deinem Dodo Payments-Dashboard im Bereich Products
Klicke auf die Registerkarte Add-Ons
Klicke auf Create Add-On

Dies öffnet das Formular zur Erstellung eines Add-ons.

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.

Save your add-on

Überprüfe alle deine Einstellungen:
- Name: Zusätzlicher Teamsitz
- Preis: $2,00/Monat
Klicke auf Add-on erstellen

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

Erstelle ein Abonnementprodukt mit 5 enthaltenen Teammitgliedern. Dies bildet die Grundlage für dein sitzbasiertes Preismodell.

Navigate to Products

Melde dich in deinem Dodo Payments-Dashboard an
Klicke in der linken Seitenleiste auf Products
Klicke auf die Schaltfläche Create Product
Wähle Subscription als Produkttyp aus

Du solltest ein Formular sehen, in dem wir unser Basis-Abonnement konfigurieren.

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

Verknüpfe dein Sitz-Add-on mit dem Basisabonnement, damit Kunden während des Checkouts zusätzliche Sitze erwerben können.

Attach the seat add-on

Add-on im Dashboard an das Abonnement anhängen

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

Save subscription changes

Überprüfen Sie Ihre vollständige Abonnementkonfiguration:
- Basistarif: $49/Monat für 5 Sitze
- Add-on: $2/Monat pro zusätzlichem Sitz
Klicken Sie auf Änderungen speichern

Sitzbasierte Preisgestaltung konfiguriert! Kunden können jetzt deinen Basistarif erwerben und bei Bedarf zusätzliche Sitze hinzufügen.

Schritt 4: Zahlungslinks mit benutzerdefinierten Add-on-Mengen generieren

Erstelle eine Express.js-Anwendung, die Zahlungslinks mit benutzerdefinierten Add-on-Mengen generiert. So kannst du dynamisch Checkout-Sitzungen mit beliebig vielen zusätzlichen Sitzen erstellen.

Set up your project

Erstelle ein neues Node.js-Projekt und installiere 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

Erstelle eine tsconfig.json-Datei:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

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

Committe deinen API-Schlüssel niemals in die Versionsverwaltung. Füge .env zu deiner .gitignore-Datei hinzu.

Implement the checkout session creation

Erstelle eine src/server.ts-Datei mit dem folgenden 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);
    // Demo pricing from this tutorial: $49 base + $2 per additional seat
    res.json({ checkout_url: session.checkout_url, total_cost: 49 + seatCount * 2 });
  } 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');
});

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 Sitzmengen zu testen.

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 Demooberfläche zu sehen.

Schritt 5: Implementierung testen

Teste nun unsere sitzbasierte Preisimplementierung, um sicherzustellen, dass alles korrekt funktioniert.

Start your server

Stelle sicher, dass deine .env-Datei den korrekten API-Schlüssel enthält
Aktualisiere die Produkt- und Add-on-IDs in deinem Code mit den tatsächlichen Werten aus deinem Dodo Payments Dashboard
Starte deinen Server:

npx ts-node src/server.ts

Dein Server sollte erfolgreich starten und „Server is running on port 3000“ anzeigen.

Test the web interface

Demooberfläche für sitzbasierte Preisgestaltung

Öffne deinen Browser und rufe http://localhost:3000 auf
Du solltest die Demooberfläche für die sitzbasierte Preisgestaltung sehen
Teste verschiedene Sitzmengen (0, 3, 10 usw.)
Klicke für jede Menge auf „Checkout-Link generieren“
Überprüfe, ob die Checkout-URLs korrekt generiert werden

Test a checkout session

Generiere einen Checkout-Link mit 3 zusätzlichen Sitzen
Klicke auf die Checkout-URL, um den Dodo Payments Checkout zu öffnen
Überprüfe, ob der Checkout Folgendes anzeigt:
- Basistarif: $49/Monat
- Zusätzliche Sitze: 3 × 2 Dollar = $6/Monat
Schließe den Testkauf ab

Der Checkout sollte die korrekte Preisaufstellung anzeigen und dir ermöglichen, den Kauf abzuschließen.

Listen for webhooks and update your database

Halte deine Datenbank synchron mit Änderungen an Abonnements und Sitzen, indem du auf Webhook-Ereignisse von Dodo Payments reagierst. Webhooks benachrichtigen dein Backend, wenn ein Kunde den Checkout abschließt, sein Abonnement aktualisiert oder die Sitzanzahl ändert.Folge dem offiziellen Dodo Payments Webhooks-Leitfaden, um Schritt für Schritt zu erfahren, wie du Webhook-Endpunkte einrichtest und Ereignisse verarbeitest:

Dodo Payments Webhooks Documentation

Erfahre, wie du Webhook-Ereignisse für die Verwaltung von Abonnements und Sitzen sicher empfängst und verarbeitest.

Fehlerbehebung

Häufige Probleme und ihre Lösungen:

Checkout creation failing

Mögliche Ursachen:

Ungültige Produkt-ID oder Add-on-ID
Der API-Schlüssel verfügt nicht über ausreichende Berechtigungen
Das Add-on ist nicht ordnungsgemäß mit dem Abonnement verknüpft
Probleme mit der Netzwerkverbindung

Lösungen:

Überprüfe, ob die Produkt- und Add-on-IDs in deinem Dodo Payments Dashboard vorhanden sind
Überprüfe, ob das Add-on korrekt an das Abonnement angehängt ist
Stelle sicher, dass der API-Schlüssel über Berechtigungen zum Erstellen von Checkout-Sitzungen verfügt
Teste die API-Konnektivität mit einer einfachen GET-Anfrage

Herzlichen Glückwunsch! Du hast eine sitzbasierte Preisgestaltung implementiert

Du hast erfolgreich ein sitzbasiertes Preissystem mit Dodo Payments erstellt. Folgendes hast du umgesetzt:

Base Subscription

Ein Abonnementprodukt mit 5 enthaltenen Sitzen für $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 Sitzmengen generiert

Web Interface

Eine einfache Weboberfläche zum Testen verschiedener Sitzmengen erstellt

Dieses Beispiel zeigt eine minimale Implementierung der sitzbasierten Preisgestaltung. Für den Produktionseinsatz solltest du Fehlerbehandlung, Authentifizierung, Datenvalidierung und Sicherheitsmaßnahmen ergänzen sowie die Logik an die Anforderungen deiner Anwendung anpassen.

Integration Guides

Billing Deconstructions

Cookbooks

Sitzplatzbasierte Preisgestaltung mit Add-Ons und Zahlungslinks

Was wir erstellen

Schritt 1: Erstellen Sie Ihr Sitz-Add-On

Schritt 2: Erstellen Sie Ihr Basisabonnementprodukt

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

Schritt 4: Zahlungslinks mit benutzerdefinierten Add-on-Mengen generieren

Schritt 5: Implementierung testen

Dodo Payments Webhooks Documentation

Fehlerbehebung

Herzlichen Glückwunsch! Du hast eine sitzbasierte Preisgestaltung implementiert

Base Subscription

Seat Add-ons

Checkout

Web Interface

​Was wir erstellen

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

​Schritt 2: Erstellen Sie Ihr Basisabonnementprodukt

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

​Schritt 4: Zahlungslinks mit benutzerdefinierten Add-on-Mengen generieren

​Schritt 5: Implementierung testen

Dodo Payments Webhooks Documentation

​Fehlerbehebung

​Herzlichen Glückwunsch! Du hast eine sitzbasierte Preisgestaltung implementiert

Base Subscription

Seat Add-ons

Checkout

Web Interface

Was wir erstellen

Schritt 1: Erstellen Sie Ihr Sitz-Add-On

Schritt 2: Erstellen Sie Ihr Basisabonnementprodukt

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

Schritt 4: Zahlungslinks mit benutzerdefinierten Add-on-Mengen generieren

Schritt 5: Implementierung testen

Fehlerbehebung

Herzlichen Glückwunsch! Du hast eine sitzbasierte Preisgestaltung implementiert