Tarification basée sur les sièges avec des options supplémentaires et des liens de paiement

Ce tutoriel explique comment implémenter une tarification basée sur le nombre de sièges à l’aide des add-ons de Dodo Payments. Vous allez créer un produit d’abonnement avec des add-ons pour les sièges supplémentaires et générer des liens de paiement avec des quantités d’add-ons personnalisées.

Ce tutoriel utilise Node.js et Express. Vous pouvez adapter le code à votre framework (Next.js, React, Vue, etc.) et personnaliser l’interface utilisateur pour l’adapter à votre application.

À la fin de ce tutoriel, vous saurez comment :

Créer des produits d’abonnement avec une tarification basée sur les sièges
Configurer des options supplémentaires pour des sièges additionnels
Générer des liens de paiement avec des quantités d’options personnalisées
Gérer des sessions de paiement avec des comptes de sièges dynamiques

Ce que nous construisons

Créons un modèle de tarification basé sur les sièges :

Forfait de base : $49/mois pour un maximum de 5 membres de l’équipe
Add-on de siège : $2/mois par siège supplémentaire
Liens de paiement : checkout dynamique avec des quantités de sièges personnalisées

Avant de commencer, assurez-vous de disposer de :

Un compte Dodo Payments
Une connaissance basique de TypeScript/Node.js

Étape 1 : Créez votre option supplémentaire pour siège

Créez un add-on représentant les sièges supplémentaires. Cet add-on sera associé à votre abonnement de base et permettra aux clients d’acheter des sièges supplémentaires.

Création d’un add-on de siège dans le dashboard

Ce que nous allons créer : un add-on coûtant $2/mois par siège, qui peut être ajouté à n’importe quel abonnement de base.

Navigate to Add-Ons

Dans votre console Dodo Payments, restez dans la section Products
Cliquez sur l’onglet Add-Ons
Cliquez sur Create Add-On

Cela ouvrira le formulaire de création d’add-on.

Enter add-on details

Remplissez ces valeurs pour notre add-on de sièges :Add-On Name: Additional Team SeatDescription: Add extra team members to your workspace with full access to all featuresPrice: Saisissez → 2.00Devise : Doit correspondre à la devise de votre abonnement de baseCatégorie fiscale : Sélectionnez la catégorie appropriée pour votre produit.

Save your add-on

Vérifiez tous vos paramètres :
- Nom : Additional Team Seat
- Prix : $2.00/mois
Cliquez sur Create Add-On

Add-on créé ! Votre add-on de sièges est maintenant disponible pour être rattaché aux abonnements.

Étape 2 : Créez votre produit d’abonnement de base

Créez un produit d’abonnement de base comprenant 5 membres de l’équipe. Il constituera la base de votre modèle de tarification basée sur le nombre de sièges.

Navigate to Products

Connectez-vous à votre console Dodo Payments
Cliquez sur Products dans la barre latérale gauche
Cliquez sur le bouton Create Product
Sélectionnez Subscription comme type de produit

Vous devriez voir un formulaire où nous allons configurer notre abonnement de base.

Fill in the subscription details

Nous allons maintenant saisir les détails spécifiques pour notre plan de base :Product Name: MotionDescription: Where your team's documentation lives.Recurring Price: Saisissez → 49.00Billing Cycle: Sélectionnez → MonthlyCurrency: Choisissez votre devise préférée (par exemple, USD)

Étape 3 : Connecter l’option supplémentaire à l’abonnement

Associez votre add-on de siège à l’abonnement de base afin que les clients puissent acheter des sièges supplémentaires lors du checkout.

Attach the seat add-on

Association d’un add-on à un abonnement dans le dashboard

Faites défiler vers le bas jusqu’à la section Options supplémentaires
Cliquez sur Ajouter des options supplémentaires
Dans le menu déroulant, sélectionnez votre option supplémentaire pour siège
Confirmez qu’elle apparaît dans la configuration de votre abonnement

Save subscription changes

Examinez la configuration complète de votre abonnement :
- Forfait de base : $49/mois pour 5 sièges
- Module complémentaire : $2/mois par siège supplémentaire
Cliquez sur Enregistrer les modifications

Tarification basée sur le nombre de sièges configurée ! Les clients peuvent désormais acheter votre forfait de base et ajouter des sièges supplémentaires selon leurs besoins.

Étape 4 : générer des liens de paiement avec des quantités d’add-ons personnalisées

Créez une application Express.js qui génère des liens de paiement avec des quantités d’add-ons personnalisées. Vous pourrez ainsi créer dynamiquement des sessions de checkout avec n’importe quel nombre de sièges supplémentaires.

Set up your project

Créez un nouveau projet Node.js et installez les dépendances requises :

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

Créez un fichier tsconfig.json :

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

Create your environment file

Créez un fichier .env contenant votre clé API Dodo Payments :

DODO_PAYMENTS_API_KEY=your_actual_dodo_api_key_here

Ne committez jamais votre clé API dans le contrôle de version. Ajoutez .env à votre fichier .gitignore.

Implement the checkout session creation

Créez un fichier src/server.ts contenant le code suivant :

// 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

Créez un fichier public/index.html pour faciliter les 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>

Interface web créée ! Vous disposez maintenant d’une interface simple pour tester différentes quantités de sièges.

Serve static files

Ajoutez ceci à votre fichier src/server.ts pour servir le fichier HTML :

// 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');
});

Fichiers statiques configurés ! Accédez à http://localhost:3000 pour voir votre interface de démonstration.

Étape 5 : tester votre implémentation

Testons notre implémentation de la tarification basée sur le nombre de sièges afin de nous assurer que tout fonctionne correctement.

Start your server

Assurez-vous de disposer de votre fichier .env contenant la clé API correcte
Mettez à jour dans votre code les identifiants du produit et de l’add-on avec les valeurs réelles de votre dashboard Dodo Payments
Démarrez votre serveur :

npx ts-node src/server.ts

Votre serveur devrait démarrer correctement et afficher « Server is running on port 3000 »

Test the web interface

Interface de démonstration de la tarification basée sur le nombre de sièges

Ouvrez votre navigateur et accédez à http://localhost:3000
Vous devriez voir l’interface de démonstration de la tarification basée sur le nombre de sièges
Essayez différentes quantités de sièges (0, 3, 10, etc.)
Cliquez sur « Generate Checkout Link » pour chaque quantité
Vérifiez que les URLs de checkout sont générées correctement

Test a checkout session

Générez un lien de checkout avec 3 sièges supplémentaires
Cliquez sur l’URL de checkout pour ouvrir le checkout Dodo Payments
Vérifiez que le checkout affiche :
- Forfait de base : $49/mois
- Sièges supplémentaires : 3 × 2 dollars = $6/mois
Effectuez l’achat de test

Le checkout devrait afficher le détail correct de la tarification et vous permettre de finaliser l’achat.

Listen for webhooks and update your database

Maintenez votre base de données synchronisée avec les changements d’abonnement et de sièges en écoutant les événements webhook de Dodo Payments. Les webhooks notifient votre backend lorsqu’un client finalise le checkout, met à jour son abonnement ou modifie le nombre de sièges.Consultez le guide officiel des webhooks de Dodo Payments pour obtenir des instructions détaillées sur la configuration des endpoints webhook et la gestion des événements :

Dodo Payments Webhooks Documentation

Découvrez comment recevoir et traiter de manière sécurisée les événements webhook pour gérer les abonnements et les sièges.

Résolution des problèmes

Problèmes courants et leurs solutions :

Checkout creation failing

Causes possibles :

ID de produit ou ID d’add-on non valide
La clé API ne dispose pas d’autorisations suffisantes
L’add-on n’est pas correctement associé à l’abonnement
Problèmes de connectivité réseau

Solutions :

Vérifiez que les ID du produit et de l’add-on existent dans votre dashboard Dodo Payments
Vérifiez que l’add-on est correctement associé à l’abonnement
Assurez-vous que la clé API dispose des autorisations nécessaires à la création de sessions de checkout
Testez la connectivité à l’API avec une simple requête GET

Félicitations ! Vous avez implémenté une tarification basée sur le nombre de sièges

Vous avez créé avec succès un système de tarification basée sur le nombre de sièges avec Dodo Payments. Voici ce que vous avez accompli :

Base Subscription

Créé un produit d’abonnement avec 5 sièges inclus à $49/mois

Seat Add-ons

Configuré des add-ons pour les sièges supplémentaires à $2/mois par siège

Checkout

Créé une API qui génère des sessions de checkout avec des quantités de sièges personnalisées

Web Interface

Créé une interface web simple pour tester différentes quantités de sièges

Cet exemple présente une implémentation minimale de la tarification basée sur le nombre de sièges. Pour une utilisation en production, ajoutez la gestion des erreurs, l’authentification, la validation des données et des mesures de sécurité, puis adaptez la logique aux exigences de votre application.

Integration Guides

Billing Deconstructions

Cookbooks

Tarification basée sur les sièges avec des options supplémentaires et des liens de paiement

Ce que nous construisons

Étape 1 : Créez votre option supplémentaire pour siège

Étape 2 : Créez votre produit d’abonnement de base

Étape 3 : Connecter l’option supplémentaire à l’abonnement

Étape 4 : générer des liens de paiement avec des quantités d’add-ons personnalisées

Étape 5 : tester votre implémentation

Dodo Payments Webhooks Documentation

Résolution des problèmes

Félicitations ! Vous avez implémenté une tarification basée sur le nombre de sièges

Base Subscription

Seat Add-ons

Checkout

Web Interface

​Ce que nous construisons

​Étape 1 : Créez votre option supplémentaire pour siège

​Étape 2 : Créez votre produit d’abonnement de base

​Étape 3 : Connecter l’option supplémentaire à l’abonnement

​Étape 4 : générer des liens de paiement avec des quantités d’add-ons personnalisées

​Étape 5 : tester votre implémentation

Dodo Payments Webhooks Documentation

​Résolution des problèmes

​Félicitations ! Vous avez implémenté une tarification basée sur le nombre de sièges

Base Subscription

Seat Add-ons

Checkout

Web Interface

Ce que nous construisons

Étape 1 : Créez votre option supplémentaire pour siège

Étape 2 : Créez votre produit d’abonnement de base

Étape 3 : Connecter l’option supplémentaire à l’abonnement

Étape 4 : générer des liens de paiement avec des quantités d’add-ons personnalisées

Étape 5 : tester votre implémentation

Résolution des problèmes

Félicitations ! Vous avez implémenté une tarification basée sur le nombre de sièges