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

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.

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.

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

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.

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

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.

Attach the seat add-on

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

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

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

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

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

Start your server

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

npm run dev

Votre serveur devrait démarrer correctement et afficher « Server running on http://localhost:3000 »

Test the web interface

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

Test a checkout session

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

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

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 :

Checkout creation failing

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 :

Vérifiez que les identifiants de produit et d’add-on existent dans votre console Dodo Payments
Assurez-vous que l’add-on est correctement rattaché à l’abonnement
Vérifiez que la clé API peut créer des sessions de paiement
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.

​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’options personnalisées

​Étape 5 : Testez votre implémentation

Dodo Payments Webhooks Documentation

​Dépannage

​Félicitations ! Vous avez mis en œuvre la tarification basée sur les 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’options personnalisées

Étape 5 : Testez votre implémentation

Dépannage

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