Passer au contenu principal
Dans ce tutoriel, vous apprendrez à mettre en œuvre la tarification basée sur les sièges en utilisant les options supplémentaires de Dodo Payments. Nous allons créer un produit d’abonnement avec des options supplémentaires pour des sièges additionnels et vous montrer comment générer des liens de paiement avec des quantités d’options personnalisées.
Ce tutoriel fournit un exemple de code d’implémentation pour une application Node.js/Express. Vous pouvez adapter ce code à votre framework spécifique (Next.js, React, Vue, etc.) et personnaliser l’interface utilisateur selon les besoins de 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 :
  • Plan de base : 49 $/mois pour jusqu’à 5 membres d’équipe
  • Option supplémentaire pour siège : 2 $/mois par siège additionnel
  • Liens de paiement : Paiement 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

Nous devons maintenant créer une option supplémentaire qui représente des sièges additionnels. Cette option sera attachée à notre abonnement de base et permettra aux clients d’acheter des sièges supplémentaires.
Création du produit d’abonnement de base
Ce que nous construisons : un add-on facturé 2 $ par mois et par siège, qui peut être ajouté à n’importe quel abonnement de base.
1

Navigate to Add-Ons

  1. Dans votre console Dodo Payments, restez dans la section Products
  2. Cliquez sur l’onglet Add-Ons
  3. Cliquez sur Create Add-On
Cela ouvrira le formulaire de création d’add-on.
2

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.
3

Save your add-on

  1. Vérifiez tous vos paramètres :
    • Nom : Additional Team Seat
    • Prix : 2,00 $/mois
  2. 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

Nous allons commencer par créer un produit d’abonnement de base qui inclut 5 membres d’équipe. Cela sera la base de notre modèle de tarification basé sur les sièges.
Création du produit d’abonnement de base
1

Navigate to Products

  1. Connectez-vous à votre console Dodo Payments
  2. Cliquez sur Products dans la barre latérale gauche
  3. Cliquez sur le bouton Create Product
  4. Sélectionnez Subscription comme type de produit
Vous devriez voir un formulaire où nous allons configurer notre abonnement de base.
2

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

Nous devons maintenant associer notre option supplémentaire pour siège avec l’abonnement de base afin que les clients puissent acheter des sièges supplémentaires lors du paiement.
1

Attach the seat add-on

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

Save subscription changes

  1. Passez en revue la configuration complète de votre abonnement :
    • Plan de base : 49 $/mois pour 5 sièges
    • Add-on : 2 $/mois par siège supplémentaire
    • Période d’essai gratuite : 14 jours
  2. Cliquez sur Save Changes
Tarification basée sur les sièges configurée ! Les clients peuvent désormais acheter votre plan 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’options personnalisées

Créons maintenant une application Express.js qui génère des liens de paiement avec des quantités d’options personnalisées. C’est là que la véritable puissance de la tarification basée sur les sièges entre en jeu - vous pouvez créer dynamiquement des sessions de paiement avec n’importe quel nombre de sièges supplémentaires.
1

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
  }
}
2

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 jamais versionner votre clé API. Ajoutez .env à votre fichier .gitignore.
3

Implement the checkout session creation

Créez un fichier src/server.ts avec 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);
    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

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.
5

Serve static files

Ajoutez ceci à votre 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 ! Rendez-vous sur http://localhost:3000 pour voir l’interface de démonstration.

​
Étape 5 : Testez votre implémentation

Testons notre implémentation de tarification basée sur les sièges pour nous assurer que tout fonctionne correctement.
1

Start your server

  1. Assurez-vous d’avoir le fichier .env avec la clé API correcte
  2. Mettez à jour les identifiants du produit et de l’add-on dans votre code avec les valeurs réelles de votre console Dodo Payments
  3. Démarrez votre serveur :
npm run dev
Votre serveur devrait démarrer correctement et afficher « Server running on http://localhost:3000 »
2

Test the web interface

Création du produit d’abonnement de base
  1. Ouvrez votre navigateur et allez sur http://localhost:3000
  2. Vous devriez voir l’interface de démonstration de tarification par siège
  3. Essayez différentes quantités de sièges (0, 3, 10, etc.)
  4. Cliquez sur « Generate Checkout Link » pour chaque quantité
  5. Vérifiez que les URL de paiement sont générées correctement
3

Test a checkout session

  1. Générez un lien de paiement avec 3 sièges supplémentaires
  2. Cliquez sur l’URL de paiement pour ouvrir le checkout Dodo Payments
  3. Vérifiez que le checkout affiche :
    • Plan de base : 49 $/mois
    • Sièges supplémentaires : 3 × 2 =6  = 6 /mois
  4. Complétez l’achat de test
Le checkout devrait afficher le détail de facturation correct et vous permettre de finaliser l’achat.
4

Listen for webhooks and update your DB

Pour maintenir votre base de données synchronisée avec les changements d’abonnement et de sièges, vous devez écouter les événements webhook de Dodo Payments. Les webhooks notifient votre backend lorsqu’un client finalise un checkout, met à jour son abonnement ou modifie le nombre de sièges.Suivez le guide officiel des webhooks de Dodo Payments pour des instructions étape par étape sur la configuration des points de terminaison de webhook et le traitement des événements :

Dodo Payments Webhooks Documentation

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

​
Dépannage

Problèmes courants et leurs solutions :
Causes possibles :
  • Identifiant de produit ou d’add-on invalide
  • La clé API ne dispose pas des autorisations suffisantes
  • L’add-on n’est pas correctement associé à l’abonnement
  • Problèmes de connectivité réseau
Solutions :
  1. Vérifiez que les identifiants de produit et d’add-on existent dans votre console Dodo Payments
  2. Assurez-vous que l’add-on est correctement rattaché à l’abonnement
  3. Vérifiez que la clé API peut créer des sessions de paiement
  4. Testez la connectivité à l’API avec une simple requête GET

​
Félicitations ! Vous avez mis en œuvre la tarification basée sur les sièges

Vous avez réussi à créer un système de tarification basé sur les sièges avec Dodo Payments ! Voici ce que vous avez accompli :

Base Subscription

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

Seat Add-ons

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

Checkout

Création d’une API qui génère des sessions de paiement avec des quantités de sièges personnalisées

Web Interface

Création d’une interface web simple pour tester différentes quantités de sièges
Cet exemple ne montre qu’une implémentation minimale de la tarification par siège. En production, ajoutez une gestion robuste des erreurs, l’authentification, la validation des données, des mesures de sécurité et adaptez la logique aux besoins de votre application.