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 code d’implémentation d’exemple pour une application Node.js/Express. Vous pouvez modifier ce code pour 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 d’avoir :
  • Un compte Dodo Payments
  • Une connaissance de base 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 : Une option supplémentaire qui coûte 2 $/mois par siège et peut être ajoutée à tout abonnement de base.
1

Naviguer vers les options supplémentaires

  1. Dans votre tableau de bord Dodo Payments, restez dans la section Produits
  2. Cliquez sur l’onglet Options supplémentaires
  3. Cliquez sur Créer une option supplémentaire
Cela ouvrira le formulaire de création d’options supplémentaires.
2

Entrer les détails de l'option supplémentaire

Remplissez ces valeurs pour notre option supplémentaire pour siège :Nom de l’option supplémentaire : Additional Team SeatDescription : Add extra team members to your workspace with full access to all featuresPrix : Entrez → 2.00Devise : Doit correspondre à la devise de votre abonnement de baseCatégorie fiscale : Sélectionnez la catégorie appropriée pour votre produit.
3

Enregistrez votre option supplémentaire

  1. Vérifiez tous vos paramètres :
    • Nom : Siège d’équipe supplémentaire
    • Prix : 2,00 $/mois
  2. Cliquez sur Créer une option supplémentaire
Option supplémentaire créée ! Votre option supplémentaire pour siège est maintenant disponible pour être attachée 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

Naviguer vers les produits

  1. Connectez-vous à votre tableau de bord Dodo Payments
  2. Cliquez sur Produits dans la barre latérale gauche
  3. Cliquez sur le bouton Créer un produit
  4. Sélectionnez Abonnement comme type de produit
Vous devriez voir un formulaire où nous allons configurer notre abonnement de base.
2

Remplir les détails de l'abonnement

Maintenant, nous allons entrer les détails spécifiques pour notre plan de base :Nom du produit : MotionDescription : Where your team's documentation lives.Prix récurrent : Entrez → 49.00Cycle de facturation : Sélectionnez → MonthlyDevise : Sélectionnez 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

Attacher l'option supplémentaire pour siège

Attacher l'option supplémentaire à 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

Enregistrez les modifications de l'abonnement

  1. Vérifiez votre configuration complète de l’abonnement :
    • Plan de base : 49 $/mois pour 5 sièges
    • Option supplémentaire : 2 $/mois par siège additionnel
    • Essai gratuit : 14 jours
  2. Cliquez sur Enregistrer les modifications
Tarification basée sur les sièges configurée ! Les clients peuvent maintenant 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

Configurez votre projet

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

Créez votre fichier d'environnement

Créez un fichier .env avec votre clé API Dodo Payments :
DODO_PAYMENTS_API_KEY=your_actual_dodo_api_key_here
Ne jamais commettre votre clé API dans le contrôle de version. Ajoutez .env à votre fichier .gitignore.
3

Implémentez la création de session de paiement

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: '[email protected]',
        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

Ajoutez une interface web simple

Créez un fichier public/index.html pour des tests faciles :
<!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 avez maintenant une interface simple pour tester différentes quantités de sièges.
5

Servez des fichiers statiques

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 ! Visitez http://localhost:3000 pour voir votre 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

Démarrez votre serveur

  1. Assurez-vous d’avoir votre fichier .env avec la clé API correcte
  2. Mettez à jour les identifiants de produit et d’option dans votre code avec les valeurs réelles de votre tableau de bord Dodo Payments
  3. Démarrez votre serveur :
npm run dev
Votre serveur devrait démarrer avec succès et afficher “Serveur en cours d’exécution sur http://localhost:3000”
2

Testez l'interface web

Création du produit d'abonnement de base
  1. Ouvrez votre navigateur et allez à http://localhost:3000
  2. Vous devriez voir l’interface de démonstration de la tarification basée sur les sièges
  3. Essayez différentes quantités de sièges (0, 3, 10, etc.)
  4. Cliquez sur “Générer le lien de paiement” pour chaque quantité
  5. Vérifiez que les URL de paiement sont générées correctement
3

Testez une session de paiement

  1. Générez un lien de paiement avec 3 sièges supplémentaires
  2. Cliquez sur l’URL de paiement pour ouvrir le paiement Dodo Payments
  3. Vérifiez que le paiement affiche :
    • Plan de base : 49 $/mois
    • Sièges supplémentaires : 3 × 2 dollars = 6 $/mois
  4. Complétez l’achat de test
Le paiement devrait afficher la répartition des prix correcte et vous permettre de compléter l’achat.
4

Écoutez les webhooks et mettez à jour votre base de données

Pour garder votre base de données synchronisée avec les changements d’abonnement et de sièges, vous devez écouter les événements de webhook de Dodo Payments. Les webhooks notifient votre backend lorsqu’un client termine le paiement, met à jour son abonnement ou change 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 :

Documentation des Webhooks Dodo Payments

Apprenez à recevoir et à traiter en toute sécurité les événements de 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’option invalide
  • La clé API n’a pas les autorisations suffisantes
  • Option non correctement associée à l’abonnement
  • Problèmes de connectivité réseau
Solutions :
  1. Vérifiez que les identifiants de produit et d’option existent dans votre tableau de bord Dodo Payments
  2. Vérifiez que l’option est correctement attachée à l’abonnement
  3. Assurez-vous que la clé API a les autorisations de création de session de paiement
  4. Testez la connectivité 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 :

Abonnement de base

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

Options supplémentaires pour sièges

Configuré des options supplémentaires pour des sièges additionnels à 2 $/mois par siège

Paiement

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

Interface web

Créé une interface web simple pour tester différentes quantités de sièges
Cet exemple démontre seulement une implémentation minimale de la tarification basée sur les sièges. Pour une utilisation en production, vous devriez ajouter une gestion des erreurs robuste, une authentification, une validation des données, des mesures de sécurité et adapter la logique pour répondre aux exigences de votre application.