Precios por Asiento con Complementos y Enlaces de Pago

Este tutorial muestra cómo implementar precios basados en asientos utilizando add-ons de Dodo Payments. Crearás un producto de suscripción con add-ons para asientos adicionales y generarás enlaces de pago con cantidades de add-ons personalizadas.

Este tutorial utiliza Node.js y Express. Puedes adaptar el código a tu framework (Next.js, React, Vue, etc.) y personalizar la interfaz para que coincida con tu aplicación.

Al final de este tutorial, sabrás cómo:

Crear productos de suscripción con precios por asiento
Configurar complementos para asientos adicionales
Generar enlaces de pago con cantidades de complementos personalizadas
Manejar sesiones de pago con conteos de asientos dinámicos

Lo que Estamos Construyendo

Vamos a crear un modelo de precios por asiento:

Plan base: $49/mes para hasta 5 miembros del equipo
Add-on de asientos: $2/mes por cada asiento adicional
Enlaces de pago: checkout dinámico con cantidades de asientos personalizadas

Antes de comenzar, asegúrate de tener:

Una cuenta de Dodo Payments
Conocimientos básicos de TypeScript/Node.js

Paso 1: Crea Tu Complemento de Asiento

Crea un add-on que represente los asientos adicionales. Este add-on se asociará con tu suscripción base y permitirá a los clientes comprar asientos adicionales.

Creación de un add-on de asientos en el dashboard

Lo que estamos creando: Un add-on que cuesta $2/mes por asiento y que puede añadirse a cualquier suscripción base.

Navigate to Add-Ons

En el panel de Dodo Payments, permanece en la sección Products
Haz clic en la pestaña Add-Ons
Haz clic en Create Add-On

Se abrirá el formulario de creación del complemento.

Enter add-on details

Rellena estos valores para nuestro complemento de asientos:Add-On Name: Additional Team SeatDescription: Add extra team members to your workspace with full access to all featuresPrice: Enter → 2.00Moneda: Debe coincidir con la moneda de tu suscripción baseCategoría de Impuestos: Selecciona la categoría apropiada para tu producto.

Save your add-on

Revisa toda tu configuración:
- Nombre: Asiento adicional del equipo
- Precio: $2.00/mes
Haz clic en Crear add-on

¡Complemento creado! Tu complemento de asientos ya está disponible para adjuntarse a suscripciones.

Paso 2: Crea Tu Producto de Suscripción Base

Crea un producto de suscripción base que incluya 5 miembros del equipo. Esta será la base de tu modelo de precios basado en asientos.

Navigate to Products

Inicia sesión en el panel de Dodo Payments
Haz clic en Products en la barra lateral izquierda
Haz clic en el botón Create Product
Selecciona Subscription como tipo de producto

Deberías ver un formulario donde configuraremos nuestra suscripción base.

Fill in the subscription details

Ahora ingresaremos los detalles específicos para nuestro plan base:Product Name: MotionDescription: Where your team's documentation lives.Recurring Price: Enter → 49.00Billing Cycle: Select → MonthlyCurrency: Selecciona tu moneda preferida (p. ej., USD)

Paso 3: Conectar el Complemento a la Suscripción

Asocia tu add-on de asientos con la suscripción base para que los clientes puedan comprar asientos adicionales durante el checkout.

Attach the seat add-on

Asociación de un add-on a una suscripción en el dashboard

Desplázate hacia abajo hasta la sección Complementos
Haz clic en Agregar Complementos
Desde el menú desplegable, selecciona tu complemento de asiento
Confirma que aparece en la configuración de tu suscripción

Save subscription changes

Revisa la configuración completa de tu suscripción:
- Plan base: $49/mes para 5 asientos
- Complemento: $2/mes por cada asiento adicional
Haz clic en Guardar cambios

¡Precios basados en asientos configurados! Los clientes ahora pueden comprar tu plan base y añadir asientos adicionales según sea necesario.

Paso 4: Genera enlaces de pago con cantidades de add-ons personalizadas

Crea una aplicación Express.js que genere enlaces de pago con cantidades de add-ons personalizadas. Esto te permite crear dinámicamente sesiones de checkout con cualquier número de asientos adicionales.

Set up your project

Crea un proyecto nuevo de Node.js e instala las dependencias necesarias:

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 archivo 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 archivo .env con tu clave de API de Dodo Payments:

DODO_PAYMENTS_API_KEY=your_actual_dodo_api_key_here

Nunca confirmes tu clave de API en el control de versiones. Añade .env a tu archivo .gitignore.

Implement the checkout session creation

Crea un archivo src/server.ts con el siguiente código:

// 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 archivo public/index.html para realizar pruebas fácilmente:

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

¡Interfaz web creada! Ahora tienes una interfaz sencilla para probar diferentes cantidades de asientos.

Serve static files

Añade esto a tu archivo src/server.ts para servir el archivo 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');
});

¡Archivos estáticos configurados! Visita http://localhost:3000 para ver tu interfaz de demostración.

Paso 5: Prueba tu implementación

Probemos nuestra implementación de precios basados en asientos para asegurarnos de que todo funcione correctamente.

Start your server

Asegúrate de tener tu archivo .env con la clave de API correcta
Actualiza los ID del producto y del add-on en tu código con los valores reales de tu dashboard de Dodo Payments
Inicia tu servidor:

npx ts-node src/server.ts

Tu servidor debería iniciarse correctamente y mostrar “Server is running on port 3000”

Test the web interface

Interfaz de demostración de precios basados en asientos

Abre tu navegador y ve a http://localhost:3000
Deberías ver la interfaz de demostración de precios basados en asientos
Prueba diferentes cantidades de asientos (0, 3, 10, etc.)
Haz clic en “Generate Checkout Link” para cada cantidad
Verifica que las URL de checkout se generen correctamente

Test a checkout session

Genera un enlace de checkout con 3 asientos adicionales
Haz clic en la URL de checkout para abrir el checkout de Dodo Payments
Verifica que el checkout muestre:
- Plan base: $49/mes
- Asientos adicionales: 3 × 2 dólares = $6/mes
Completa la compra de prueba

El checkout debería mostrar el desglose de precios correcto y permitirte completar la compra.

Listen for webhooks and update your database

Mantén tu base de datos sincronizada con los cambios en las suscripciones y los asientos escuchando los eventos de webhook de Dodo Payments. Los webhooks notifican a tu backend cuando un cliente completa el checkout, actualiza su suscripción o cambia la cantidad de asientos.Sigue la guía oficial de webhooks de Dodo Payments para obtener instrucciones paso a paso sobre cómo configurar endpoints de webhook y gestionar eventos:

Dodo Payments Webhooks Documentation

Aprende a recibir y procesar de forma segura los eventos de webhook para gestionar suscripciones y asientos.

Solución de problemas

Problemas comunes y sus soluciones:

Checkout creation failing

Posibles causas:

ID de producto o ID de add-on no válido
La clave de API no tiene permisos suficientes
El add-on no está asociado correctamente con la suscripción
Problemas de conectividad de red

Soluciones:

Verifica que los ID del producto y del add-on existan en tu dashboard de Dodo Payments
Comprueba que el add-on esté asociado correctamente con la suscripción
Asegúrate de que la clave de API tenga permisos para crear sesiones de checkout
Prueba la conectividad de la API con una solicitud GET sencilla

¡Felicidades! Has implementado precios basados en asientos

Has creado correctamente un sistema de precios basados en asientos con Dodo Payments. Esto es lo que has logrado:

Base Subscription

Creaste un producto de suscripción con 5 asientos incluidos por $49/mes

Seat Add-ons

Configuraste add-ons para asientos adicionales a $2/mes por asiento

Checkout

Creaste una API que genera sesiones de checkout con cantidades de asientos personalizadas

Web Interface

Creaste una interfaz web sencilla para probar diferentes cantidades de asientos

Este ejemplo demuestra una implementación mínima de precios basados en asientos. Para utilizarla en producción, añade gestión de errores, autenticación, validación de datos y medidas de seguridad, y adapta la lógica para que se ajuste a los requisitos de tu aplicación.

Integration Guides

Billing Deconstructions

Cookbooks

Precios por Asiento con Complementos y Enlaces de Pago

Lo que Estamos Construyendo

Paso 1: Crea Tu Complemento de Asiento

Paso 2: Crea Tu Producto de Suscripción Base

Paso 3: Conectar el Complemento a la Suscripción

Paso 4: Genera enlaces de pago con cantidades de add-ons personalizadas

Paso 5: Prueba tu implementación

Dodo Payments Webhooks Documentation

Solución de problemas

¡Felicidades! Has implementado precios basados en asientos

Base Subscription

Seat Add-ons

Checkout

Web Interface

​Lo que Estamos Construyendo

​Paso 1: Crea Tu Complemento de Asiento

​Paso 2: Crea Tu Producto de Suscripción Base

​Paso 3: Conectar el Complemento a la Suscripción

​Paso 4: Genera enlaces de pago con cantidades de add-ons personalizadas

​Paso 5: Prueba tu implementación

Dodo Payments Webhooks Documentation

​Solución de problemas

​¡Felicidades! Has implementado precios basados en asientos

Base Subscription

Seat Add-ons

Checkout

Web Interface

Lo que Estamos Construyendo

Paso 1: Crea Tu Complemento de Asiento

Paso 2: Crea Tu Producto de Suscripción Base

Paso 3: Conectar el Complemento a la Suscripción

Paso 4: Genera enlaces de pago con cantidades de add-ons personalizadas

Paso 5: Prueba tu implementación

Solución de problemas

¡Felicidades! Has implementado precios basados en asientos