Precificação Baseada em Assentos com Adicionais e Links de Pagamento

Este tutorial mostra como implementar preços baseados em assentos usando add-ons do Dodo Payments. Você criará um produto de assinatura com add-ons para assentos adicionais e gerará links de pagamento com quantidades personalizadas de add-ons.

Este tutorial usa Node.js e Express. Você pode adaptar o código ao seu framework (Next.js, React, Vue etc.) e personalizar a UI para combinar com sua aplicação.

Ao final deste tutorial, você saberá como:

Criar produtos de assinatura com precificação baseada em assentos
Configurar adicionais para assentos adicionais
Gerar links de pagamento com quantidades de adicionais personalizadas
Lidar com sessões de checkout com contagens de assentos dinâmicas

O Que Estamos Construindo

Vamos criar um modelo de precificação baseada em assentos:

Plano Base: $49/mês para até 5 membros da equipe
Add-on de Assento: $2/mês por assento adicional
Links de Pagamento: checkout dinâmico com quantidades personalizadas de assentos

Antes de começarmos, certifique-se de que você possui:

Uma conta Dodo Payments
Familiaridade básica com TypeScript/Node.js

Passo 1: Crie Seu Adicional de Assento

Crie um add-on que represente os assentos adicionais. Esse add-on será associado à sua assinatura base e permitirá que os clientes comprem assentos adicionais.

Criando um add-on de assento no dashboard

O que estamos criando: um add-on que custa $2/mês por assento e pode ser adicionado a qualquer assinatura base.

Navigate to Add-Ons

No seu painel Dodo Payments, permaneça na seção Produtos
Clique na aba Add-Ons
Clique em Criar Add-On

Isso abrirá o formulário de criação do add-on.

Enter add-on details

Preencha estes valores para o nosso add-on de assentos:Nome do Add-On: Additional Team SeatDescrição: Add extra team members to your workspace with full access to all featuresPreço: Insira → 2.00Moeda: Deve corresponder à moeda da sua assinatura baseCategoria de Imposto: Selecione a categoria apropriada para seu produto.

Save your add-on

Revise todas as suas configurações:
- Nome: Assento adicional da equipe
- Preço: $2,00/mês
Clique em Criar Add-On

Add-on criado! Seu add-on de assentos agora está disponível para ser anexado a assinaturas.

Passo 2: Crie Seu Produto de Assinatura Base

Crie um produto de assinatura base que inclua 5 membros da equipe. Essa será a base do seu modelo de preços por assento.

Navigate to Products

Faça login no seu painel Dodo Payments
Clique em Produtos na barra lateral esquerda
Clique no botão Criar Produto
Selecione Assinatura como o tipo de produto

Você verá um formulário onde configuraremos nossa assinatura base.

Fill in the subscription details

Agora vamos inserir os detalhes específicos do nosso plano base:Nome do Produto: MotionDescrição: Where your team's documentation lives.Preço Recorrente: Insira → 49.00Ciclo de Faturamento: Selecione → MonthlyMoeda: Selecione sua moeda preferida (p. ex., USD)

Passo 3: Conecte o Adicional à Assinatura

Associe seu add-on de assento à assinatura base para que os clientes possam comprar assentos adicionais durante o checkout.

Attach the seat add-on

Associando um add-on à assinatura no dashboard

Role para baixo até a seção Adicionais
Clique em Adicionar Adicionais
No dropdown, selecione seu adicional de assento
Confirme que ele aparece na configuração da sua assinatura

Save subscription changes

Revise sua configuração completa da assinatura:
- Plano básico: $49/mês para 5 assentos
- Complemento: $2/mês por assento adicional
Clique em Salvar alterações

Preços baseados em assentos configurados! Os clientes agora podem comprar seu plano base e adicionar assentos extras conforme necessário.

Etapa 4: gerar links de pagamento com quantidades personalizadas de add-ons

Crie uma aplicação Express.js que gere links de pagamento com quantidades personalizadas de add-ons. Isso permite criar dinamicamente sessões de checkout com qualquer quantidade de assentos adicionais.

Set up your project

Crie um novo projeto Node.js e instale as dependências necessárias:

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

Crie um arquivo tsconfig.json:

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

Create your environment file

Crie um arquivo .env com sua chave de API do Dodo Payments:

DODO_PAYMENTS_API_KEY=your_actual_dodo_api_key_here

Nunca faça commit da sua chave de API no controle de versão. Adicione .env ao seu arquivo .gitignore.

Implement the checkout session creation

Crie um arquivo src/server.ts com o código a seguir:

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

Crie um arquivo public/index.html para facilitar os testes:

<!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 criada! Agora você tem uma UI simples para testar diferentes quantidades de assentos.

Serve static files

Adicione isto ao seu src/server.ts para servir o arquivo 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');
});

Arquivos estáticos configurados! Acesse http://localhost:3000 para ver sua interface de demonstração.

Etapa 5: testar sua implementação

Vamos testar nossa implementação de preços baseados em assentos para garantir que tudo funcione corretamente.

Start your server

Certifique-se de que seu arquivo .env contém a chave de API correta
Atualize os IDs do produto e do add-on no seu código com os valores reais do seu dashboard do Dodo Payments
Inicie seu servidor:

npx ts-node src/server.ts

Seu servidor deve iniciar corretamente e exibir “Server is running on port 3000”

Test the web interface

Interface de demonstração de preços baseados em assentos

Abra seu navegador e acesse http://localhost:3000
Você deverá ver a interface de demonstração de preços baseados em assentos
Experimente diferentes quantidades de assentos (0, 3, 10 etc.)
Clique em “Gerar link de checkout” para cada quantidade
Verifique se as URLs de checkout são geradas corretamente

Test a checkout session

Gere um link de checkout com 3 assentos adicionais
Clique na URL de checkout para abrir o checkout do Dodo Payments
Verifique se o checkout exibe:
- Plano base: $49/mês
- Assentos adicionais: 3 × 2 dólares = $6/mês
Conclua a compra de teste

O checkout deve exibir o detalhamento correto dos preços e permitir que você conclua a compra.

Listen for webhooks and update your database

Mantenha seu banco de dados sincronizado com as alterações de assinatura e de assentos ouvindo eventos de webhook do Dodo Payments. Os webhooks notificam seu backend quando um cliente conclui o checkout, atualiza sua assinatura ou altera a quantidade de assentos.Siga o guia oficial de webhooks do Dodo Payments para obter instruções passo a passo sobre como configurar endpoints de webhook e lidar com eventos:

Dodo Payments Webhooks Documentation

Saiba como receber e processar eventos de webhook com segurança para gerenciar assinaturas e assentos.

Solução de problemas

Problemas comuns e suas soluções:

Checkout creation failing

Possíveis causas:

ID do produto ou ID do add-on inválido
A chave de API não tem permissões suficientes
O add-on não está associado corretamente à assinatura
Problemas de conectividade de rede

Soluções:

Verifique se os IDs do produto e do add-on existem no seu dashboard do Dodo Payments
Confirme se o add-on está associado corretamente à assinatura
Certifique-se de que a chave de API tenha permissões para criar sessões de checkout
Teste a conectividade da API com uma solicitação GET simples

Parabéns! Você implementou preços baseados em assentos

Você criou com sucesso um sistema de preços baseados em assentos com o Dodo Payments. Veja o que você realizou:

Base Subscription

Criou um produto de assinatura com 5 assentos incluídos por $49/mês

Seat Add-ons

Configurou add-ons para assentos adicionais por $2/mês por assento

Checkout

Criou uma API que gera sessões de checkout com quantidades personalizadas de assentos

Web Interface

Criou uma interface web simples para testar diferentes quantidades de assentos

Este exemplo demonstra uma implementação mínima de preços baseados em assentos. Para uso em produção, adicione tratamento de erros, autenticação, validação de dados e medidas de segurança, além de adaptar a lógica às necessidades da sua aplicação.

Integration Guides

Billing Deconstructions

Cookbooks

Precificação Baseada em Assentos com Adicionais e Links de Pagamento

O Que Estamos Construindo

Passo 1: Crie Seu Adicional de Assento

Passo 2: Crie Seu Produto de Assinatura Base

Passo 3: Conecte o Adicional à Assinatura

Etapa 4: gerar links de pagamento com quantidades personalizadas de add-ons

Etapa 5: testar sua implementação

Dodo Payments Webhooks Documentation

Solução de problemas

Parabéns! Você implementou preços baseados em assentos

Base Subscription

Seat Add-ons

Checkout

Web Interface

​O Que Estamos Construindo

​Passo 1: Crie Seu Adicional de Assento

​Passo 2: Crie Seu Produto de Assinatura Base

​Passo 3: Conecte o Adicional à Assinatura

​Etapa 4: gerar links de pagamento com quantidades personalizadas de add-ons

​Etapa 5: testar sua implementação

Dodo Payments Webhooks Documentation

​Solução de problemas

​Parabéns! Você implementou preços baseados em assentos

Base Subscription

Seat Add-ons

Checkout

Web Interface

O Que Estamos Construindo

Passo 1: Crie Seu Adicional de Assento

Passo 2: Crie Seu Produto de Assinatura Base

Passo 3: Conecte o Adicional à Assinatura

Etapa 4: gerar links de pagamento com quantidades personalizadas de add-ons

Etapa 5: testar sua implementação

Solução de problemas

Parabéns! Você implementou preços baseados em assentos