Prezzi basati sui posti con add-on e link di pagamento

Questo tutorial mostra come implementare un modello di prezzi basato sui posti utilizzando gli add-on di Dodo Payments. Creerai un prodotto in abbonamento con add-on per i posti aggiuntivi e genererai link di pagamento con quantità di add-on personalizzate.

Questo tutorial utilizza Node.js ed Express. Puoi adattare il codice al tuo framework (Next.js, React, Vue, ecc.) e personalizzare l’interfaccia per adattarla alla tua applicazione.

Alla fine di questo tutorial, saprai come:

Creare prodotti in abbonamento con prezzi basati sui posti
Configurare add-on per posti aggiuntivi
Generare link di pagamento con quantità di add-on personalizzate
Gestire sessioni di checkout con conteggi di posti dinamici

Cosa stiamo costruendo

Creiamo un modello di prezzo basato sui posti:

Piano base: $49/mese per un massimo di 5 membri del team
Add-on per posto: $2/mese per ogni posto aggiuntivo
Link di pagamento: checkout dinamico con quantità di posti personalizzate

Prima di iniziare, assicurati di avere:

Un account Dodo Payments
Una conoscenza di base di TypeScript/Node.js

Passo 1: Crea il tuo Add-On per Posti

Crea un add-on che rappresenti i posti aggiuntivi. Questo add-on verrà associato al tuo abbonamento base e consentirà ai clienti di acquistare posti aggiuntivi.

Creazione dell'add-on per i posti nella dashboard

Cosa stiamo creando: un add-on che costa $2/mese per posto e che può essere aggiunto a qualsiasi abbonamento base.

Navigate to Add-Ons

Nella dashboard di Dodo Payments, resta nella sezione Products
Clicca sulla scheda Add-Ons
Clicca su Create Add-On

Questo aprirà il modulo di creazione del componente aggiuntivo.

Enter add-on details

Compila questi valori per il nostro componente aggiuntivo per postazioni:Add-On Name: Additional Team SeatDescription: Add extra team members to your workspace with full access to all featuresPrice: Inserisci → 2.00Valuta: Deve corrispondere alla valuta del tuo abbonamento baseCategoria Fiscale: Seleziona la categoria appropriata per il tuo prodotto.

Save your add-on

Esamina tutte le impostazioni:
- Nome: Posto aggiuntivo del team
- Prezzo: $2,00/mese
Fai clic su Create Add-On

Componenti aggiuntivo creato! Il tuo componente per le postazioni è ora disponibile per essere collegato agli abbonamenti.

Passo 2: Crea il tuo Prodotto in Abbonamento Base

Crea un prodotto in abbonamento base che includa 5 membri del team. Questo costituirà la base del tuo modello di prezzi basato sui posti.

Navigate to Products

Accedi alla dashboard di Dodo Payments
Clicca su Products nella barra laterale sinistra
Clicca sul pulsante Create Product
Seleziona Subscription come tipo di prodotto

Dovresti vedere un modulo in cui configureremo il nostro abbonamento base.

Fill in the subscription details

Ora inseriremo i dettagli specifici per il nostro piano base:Product Name: MotionDescription: Where your team's documentation lives.Recurring Price: Inserisci → 49.00Billing Cycle: Seleziona → MonthlyCurrency: Seleziona la valuta preferita (es. USD)

Passo 3: Collega l’Add-On all’Abbonamento

Associa l’add-on per i posti al tuo abbonamento base, in modo che i clienti possano acquistare posti aggiuntivi durante il checkout.

Attach the seat add-on

Associazione dell'add-on all'abbonamento nella dashboard

Scorri verso il basso fino alla sezione Add-Ons
Clicca su Aggiungi Add-Ons
Dal menu a discesa, seleziona il tuo add-on per posti
Conferma che appare nella configurazione del tuo abbonamento

Save subscription changes

Esamina la configurazione completa del tuo abbonamento:
- Piano base: $49/mese per 5 posti
- Componente aggiuntivo: $2/mese per ogni posto aggiuntivo
Fai clic su Salva modifiche

Prezzi basati sui posti configurati! Ora i clienti possono acquistare il tuo piano base e aggiungere altri posti secondo necessità.

Passaggio 4: genera link di pagamento con quantità di add-on personalizzate

Crea un’applicazione Express.js che generi link di pagamento con quantità di add-on personalizzate. Questo ti consente di creare dinamicamente sessioni di checkout con un numero qualsiasi di posti aggiuntivi.

Set up your project

Crea un nuovo progetto Node.js e installa le dipendenze necessarie:

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

Crea un file tsconfig.json:

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

Create your environment file

Crea un file .env con la tua chiave API di Dodo Payments:

DODO_PAYMENTS_API_KEY=your_actual_dodo_api_key_here

Non eseguire mai il commit della tua chiave API nel controllo versione. Aggiungi .env al tuo file .gitignore.

Implement the checkout session creation

Crea un file src/server.ts con il seguente codice:

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

Crea un file public/index.html per eseguire facilmente i test:

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

Interfaccia web creata! Ora hai una semplice interfaccia per testare quantità diverse di posti.

Serve static files

Aggiungi questo al tuo src/server.ts per servire il file 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');
});

File statici configurati! Visita http://localhost:3000 per visualizzare la tua interfaccia demo.

Passaggio 5: testa la tua implementazione

Testiamo la nostra implementazione dei prezzi basati sui posti per assicurarci che tutto funzioni correttamente.

Start your server

Assicurati di avere il file .env con la chiave API corretta
Aggiorna nel codice gli ID del prodotto e dell’add-on con i valori effettivi presenti nella dashboard di Dodo Payments
Avvia il server:

npx ts-node src/server.ts

Il server dovrebbe avviarsi correttamente e mostrare “Server is running on port 3000”

Test the web interface

Interfaccia demo dei prezzi basati sui posti

Apri il browser e vai a http://localhost:3000
Dovresti visualizzare l’interfaccia demo dei prezzi basati sui posti
Prova quantità diverse di posti (0, 3, 10, ecc.)
Fai clic su “Generate Checkout Link” per ogni quantità
Verifica che gli URL di checkout vengano generati correttamente

Test a checkout session

Genera un link di checkout con 3 posti aggiuntivi
Fai clic sull’URL di checkout per aprire il checkout di Dodo Payments
Verifica che il checkout mostri:
- Piano base: $49/mese
- Posti aggiuntivi: 3 × 2 dollari = $6/mese
Completa l’acquisto di test

Il checkout dovrebbe mostrare la suddivisione corretta dei prezzi e consentirti di completare l’acquisto.

Listen for webhooks and update your database

Mantieni il tuo database sincronizzato con le modifiche agli abbonamenti e ai posti ascoltando gli eventi webhook di Dodo Payments. I webhook notificano al tuo backend quando un cliente completa il checkout, aggiorna il proprio abbonamento o modifica il numero di posti.Segui la guida ufficiale ai webhook di Dodo Payments per istruzioni dettagliate sulla configurazione degli endpoint webhook e sulla gestione degli eventi:

Dodo Payments Webhooks Documentation

Scopri come ricevere ed elaborare in modo sicuro gli eventi webhook per la gestione degli abbonamenti e dei posti.

Risoluzione dei problemi

Problemi comuni e relative soluzioni:

Checkout creation failing

Possibili cause:

ID del prodotto o dell’add-on non valido
La chiave API non dispone di autorizzazioni sufficienti
Add-on non associato correttamente all’abbonamento
Problemi di connettività di rete

Soluzioni:

Verifica che gli ID del prodotto e dell’add-on esistano nella dashboard di Dodo Payments
Controlla che l’add-on sia associato correttamente all’abbonamento
Assicurati che la chiave API disponga delle autorizzazioni per la creazione delle sessioni di checkout
Testa la connettività API con una semplice richiesta GET

Congratulazioni! Hai implementato i prezzi basati sui posti

Hai creato con successo un sistema di prezzi basato sui posti con Dodo Payments. Ecco cosa hai realizzato:

Base Subscription

Creato un prodotto in abbonamento con 5 posti inclusi a $49/mese

Seat Add-ons

Configurato add-on per i posti aggiuntivi a $2/mese per posto

Checkout

Creato un’API che genera sessioni di checkout con quantità di posti personalizzate

Web Interface

Creata una semplice interfaccia web per testare quantità diverse di posti

Questo esempio dimostra un’implementazione minima dei prezzi basati sui posti. Per l’uso in produzione, aggiungi la gestione degli errori, l’autenticazione, la convalida dei dati e misure di sicurezza, e adatta la logica ai requisiti della tua applicazione.

Integration Guides

Billing Deconstructions

Cookbooks

Prezzi basati sui posti con add-on e link di pagamento

Cosa stiamo costruendo

Passo 1: Crea il tuo Add-On per Posti

Passo 2: Crea il tuo Prodotto in Abbonamento Base

Passo 3: Collega l’Add-On all’Abbonamento

Passaggio 4: genera link di pagamento con quantità di add-on personalizzate

Passaggio 5: testa la tua implementazione

Dodo Payments Webhooks Documentation

Risoluzione dei problemi

Congratulazioni! Hai implementato i prezzi basati sui posti

Base Subscription

Seat Add-ons

Checkout

Web Interface

​Cosa stiamo costruendo

​Passo 1: Crea il tuo Add-On per Posti

​Passo 2: Crea il tuo Prodotto in Abbonamento Base

​Passo 3: Collega l’Add-On all’Abbonamento

​Passaggio 4: genera link di pagamento con quantità di add-on personalizzate

​Passaggio 5: testa la tua implementazione

Dodo Payments Webhooks Documentation

​Risoluzione dei problemi

​Congratulazioni! Hai implementato i prezzi basati sui posti

Base Subscription

Seat Add-ons

Checkout

Web Interface

Cosa stiamo costruendo

Passo 1: Crea il tuo Add-On per Posti

Passo 2: Crea il tuo Prodotto in Abbonamento Base

Passo 3: Collega l’Add-On all’Abbonamento

Passaggio 4: genera link di pagamento con quantità di add-on personalizzate

Passaggio 5: testa la tua implementazione

Risoluzione dei problemi

Congratulazioni! Hai implementato i prezzi basati sui posti