> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

> Apprenez à créer des options supplémentaires pour la tarification basée sur les sièges et à générer des liens de paiement avec des quantités d'options personnalisées en utilisant Dodo Payments

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.

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

À 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

<Info>
  Avant de commencer, assurez-vous de disposer de :

  * Un compte Dodo Payments
  * Une connaissance basique de TypeScript/Node.js
</Info>

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

<Frame>
  <img src="https://mintcdn.com/dodopayments/ajOhO6Du1yNsg0hy/images/cookbooks/seat-based/seat-based-addons-creation.png?fit=max&auto=format&n=ajOhO6Du1yNsg0hy&q=85&s=d2c17b4a9f2f9a1b19f537f0507656a4" alt="Créer un produit d'abonnement de base" style={{ maxHeight: '500px', width: 'auto' }} width="2348" height="1606" data-path="images/cookbooks/seat-based/seat-based-addons-creation.png" />
</Frame>

<Tip>
  **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.
</Tip>

<Steps>
  <Step title="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.
  </Step>

  <Step title="Enter add-on details">
    Remplissez ces valeurs pour notre add-on de sièges :

    **Add-On Name**: `Additional Team Seat`

    **Description**: `Add extra team members to your workspace with full access to all features`

    **Price**: Saisissez → `2.00`

    **Devise** : Doit correspondre à la devise de votre abonnement de base

    **Catégorie fiscale** : Sélectionnez la catégorie appropriée pour votre produit.
  </Step>

  <Step title="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**

    <Check>
      **Add-on créé !** Votre add-on de sièges est maintenant disponible pour être rattaché aux abonnements.
    </Check>
  </Step>
</Steps>

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

<Frame>
  <img src="https://mintcdn.com/dodopayments/ajOhO6Du1yNsg0hy/images/cookbooks/seat-based/seat-based-subscription.png?fit=max&auto=format&n=ajOhO6Du1yNsg0hy&q=85&s=f17e96f3d106b88b6dc32a00be535620" alt="Créer un produit d'abonnement de base" style={{ maxHeight: '500px', width: 'auto' }} width="2118" height="1580" data-path="images/cookbooks/seat-based/seat-based-subscription.png" />
</Frame>

<Steps>
  <Step title="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.
  </Step>

  <Step title="Fill in the subscription details">
    Nous allons maintenant saisir les détails spécifiques pour notre plan de base :

    **Product Name**: `Motion`

    **Description**: `Where your team's documentation lives.`

    **Recurring Price**: Saisissez → `49.00`

    **Billing Cycle**: Sélectionnez → `Monthly`

    **Currency**: Choisissez votre devise préférée (par exemple, `USD`)
  </Step>
</Steps>

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

<Steps>
  <Step title="Attach the seat add-on">
    <Frame>
      <img src="https://mintcdn.com/dodopayments/ajOhO6Du1yNsg0hy/images/cookbooks/seat-based/seat-based-addons.png?fit=max&auto=format&n=ajOhO6Du1yNsg0hy&q=85&s=ea4ce0d437201c92590eea6c31a14e80" alt="Attacher un complément à l'abonnement" style={{ maxHeight: '500px', width: 'auto' }} width="2338" height="1196" data-path="images/cookbooks/seat-based/seat-based-addons.png" />
    </Frame>

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

  <Step title="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**

    <Check>
      **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.
    </Check>
  </Step>
</Steps>

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

<Steps>
  <Step title="Set up your project">
    Créez un nouveau projet Node.js et installez les dépendances requises :

    ```bash theme={null}
    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` :

    ```json theme={null}
    {
      "compilerOptions": {
        "target": "ES2020",
        "module": "commonjs",
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
      }
    }
    ```
  </Step>

  <Step title="Create your environment file">
    Créez un fichier `.env` contenant votre clé API Dodo Payments :

    ```bash theme={null}
    DODO_PAYMENTS_API_KEY=your_actual_dodo_api_key_here
    ```

    <Warning>
      Ne jamais versionner votre clé API. Ajoutez `.env` à votre fichier `.gitignore`.
    </Warning>
  </Step>

  <Step title="Implement the checkout session creation">
    Créez un fichier `src/server.ts` avec le code suivant :

    <CodeGroup>
      ```typescript server.ts expandable theme={null}
      // 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');
      });
      ```
    </CodeGroup>
  </Step>

  <Step title="Add a simple web interface">
    Créez un fichier `public/index.html` pour faciliter les tests :

    <CodeGroup>
      ```html index.html expandable theme={null}
      <!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>
      ```
    </CodeGroup>

    <Check>
      **Interface Web créée !** Vous disposez maintenant d’une interface simple pour tester différentes quantités de sièges.
    </Check>
  </Step>

  <Step title="Serve static files">
    Ajoutez ceci à votre `src/server.ts` pour servir le fichier HTML :

    ```typescript theme={null}
    // 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');
    });
    ```

    <Check>
      **Fichiers statiques configurés !** Rendez-vous sur `http://localhost:3000` pour voir l’interface de démonstration.
    </Check>
  </Step>
</Steps>

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

<Steps>
  <Step title="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 :

    ```bash theme={null}
    npm run dev
    ```

    <Check>
      Votre serveur devrait démarrer correctement et afficher « Server running on [http://localhost:3000](http://localhost:3000) »
    </Check>
  </Step>

  <Step title="Test the web interface">
    <Frame>
      <img src="https://mintcdn.com/dodopayments/ajOhO6Du1yNsg0hy/images/cookbooks/seat-based/seat-based-billing-ui.png?fit=max&auto=format&n=ajOhO6Du1yNsg0hy&q=85&s=37d166d8e76b0bfbb4959bc9a3eff1f8" alt="Créer un produit d'abonnement de base" style={{ maxHeight: '500px', width: 'auto' }} width="1806" height="1416" data-path="images/cookbooks/seat-based/seat-based-billing-ui.png" />
    </Frame>

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

  <Step title="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 $/mois
    4. Complétez l’achat de test

    <Check>
      Le checkout devrait afficher le détail de facturation correct et vous permettre de finaliser l’achat.
    </Check>
  </Step>

  <Step title="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 :

    <Card title="Dodo Payments Webhooks Documentation" icon="bell" href="/developer-resources/webhooks">
      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.
    </Card>
  </Step>
</Steps>

## Dépannage

Problèmes courants et leurs solutions :

<AccordionGroup>
  <Accordion title="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 :**

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

## 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 :

<CardGroup cols={2}>
  <Card title="Base Subscription">
    Création d’un produit d’abonnement avec 5 sièges inclus à 49 \$/mois
  </Card>

  <Card title="Seat Add-ons">
    Ajout des add-ons pour les sièges supplémentaires à 2 \$/mois par siège
  </Card>

  <Card title="Checkout">
    Création d’une API qui génère des sessions de paiement avec des quantités de sièges personnalisées
  </Card>

  <Card title="Web Interface">
    Création d’une interface web simple pour tester différentes quantités de sièges
  </Card>
</CardGroup>

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