Pular para o conteúdo principal
Neste tutorial, você aprenderá como implementar a precificação baseada em assentos usando os adicionais do Dodo Payments. Vamos criar um produto de assinatura com adicionais para assentos adicionais e mostrar como gerar links de pagamento com quantidades de adicionais personalizadas.
Este tutorial fornece código de implementação de exemplo para uma aplicação Node.js/Express. Você pode modificar este código para seu framework específico (Next.js, React, Vue, etc.) e personalizar a interface do usuário de acordo com as necessidades da 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: R$49/mês para até 5 membros da equipe
  • Adicional de Assento: R$2/mês por assento adicional
  • Links de Pagamento: Checkout dinâmico com quantidades de assentos personalizadas
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

Agora precisamos criar um adicional que represente assentos adicionais. Este adicional será anexado à nossa assinatura base e permitirá que os clientes comprem assentos adicionais.
Creating base subscription product
O que estamos construindo: Um add-on que custa $2/mês por assento e pode ser adicionado a qualquer assinatura base.
1

Navigate to Add-Ons

  1. No seu painel Dodo Payments, permaneça na seção Produtos
  2. Clique na aba Add-Ons
  3. Clique em Criar Add-On
Isso abrirá o formulário de criação do add-on.
2

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

Save your add-on

  1. Revise todas as suas configurações:
    • Nome: Additional Team Seat
    • Preço: $2,00/mês
  2. 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

Começaremos criando um produto de assinatura base que inclui 5 membros da equipe. Esta será a base do nosso modelo de precificação baseada em assentos.
Creating base subscription product
1

Navigate to Products

  1. Faça login no seu painel Dodo Payments
  2. Clique em Produtos na barra lateral esquerda
  3. Clique no botão Criar Produto
  4. Selecione Assinatura como o tipo de produto
Você verá um formulário onde configuraremos nossa assinatura base.
2

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

Agora precisamos associar nosso adicional de assento com a assinatura base para que os clientes possam comprar assentos adicionais durante o checkout.
1

Attach the seat add-on

Attaching add-on to subscription
  1. Role para baixo até a seção Adicionais
  2. Clique em Adicionar Adicionais
  3. No dropdown, selecione seu adicional de assento
  4. Confirme que ele aparece na configuração da sua assinatura
2

Save subscription changes

  1. Revise toda a configuração da assinatura:
    • Plano base: $49/mês para 5 assentos
    • Add-on: $2/mês por assento adicional
    • Teste gratuito: 14 dias
  2. Clique em Salvar Alterações
Precificação por assento configurada! Clientes agora podem comprar seu plano base e adicionar assentos extras conforme necessário.
Agora vamos criar uma aplicação Express.js que gera links de pagamento com quantidades de adicionais personalizadas. É aqui que o verdadeiro poder da precificação baseada em assentos entra em cena - você pode criar dinamicamente sessões de checkout com qualquer número de assentos adicionais.
1

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
  }
}
2

Create your environment file

Crie um arquivo .env com sua chave de API Dodo Payments:
DODO_PAYMENTS_API_KEY=your_actual_dodo_api_key_here
Nunca commit a sua chave de API no controle de versão. Adicione .env ao seu arquivo .gitignore.
3

Implement the checkout session creation

Crie um arquivo src/server.ts com o seguinte 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);
    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');
});
4

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 IU simples para testar diferentes quantidades de assentos.
5

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! Visite http://localhost:3000 para ver sua interface de demonstração.

Passo 5: Teste Sua Implementação

Vamos testar nossa implementação de precificação baseada em assentos para garantir que tudo funcione corretamente.
1

Start your server

  1. Certifique-se de que você tem seu arquivo .env com a chave de API correta
  2. Atualize os IDs do produto e do add-on no seu código com os valores reais do painel Dodo Payments
  3. Inicie seu servidor:
npm run dev
Seu servidor deve iniciar com sucesso e mostrar “Server running on http://localhost:3000
2

Test the web interface

Creating base subscription product
  1. Abra seu navegador e vá para http://localhost:3000
  2. Você deverá ver a interface de demonstração de precificação por assento
  3. Teste diferentes quantidades de assentos (0, 3, 10, etc.)
  4. Clique em “Generate Checkout Link” para cada quantidade
  5. Verifique se as URLs de checkout são geradas corretamente
3

Test a checkout session

  1. Gere um link de checkout com 3 assentos adicionais
  2. Clique na URL de checkout para abrir o checkout do Dodo Payments
  3. Verifique se o checkout mostra:
    • Plano base: $49/mês
    • Assentos adicionais: 3 × 2 dólares = $6/mês
  4. Complete a compra de teste
O checkout deve exibir a divisão correta de preços e permitir que você conclua a compra.
4

Listen for webhooks and update your DB

Para manter seu banco de dados sincronizado com alterações de assinatura e assentos, você precisa escutar eventos de webhook da Dodo Payments. Webhooks notificam seu backend quando um cliente conclui o checkout, atualiza a assinatura ou altera a quantidade de assentos.Siga o guia oficial de webhooks do Dodo Payments para instruções passo a passo sobre como configurar endpoints de webhook e lidar com eventos:

Dodo Payments Webhooks Documentation

Aprenda como receber e processar com segurança eventos de webhook para o gerenciamento de assinaturas e assentos.

Resolução de Problemas

Problemas comuns e suas soluções:
Possíveis causas:
  • ID de produto ou add-on inválido
  • A chave de API não possui permissões suficientes
  • Add-on não associado corretamente à assinatura
  • Problemas de conectividade de rede
Soluções:
  1. Verifique se os IDs de produto e add-on existem no seu painel Dodo Payments
  2. Confira se o add-on está devidamente anexado à assinatura
  3. Garanta que a chave de API possui permissões para criação de sessão de checkout
  4. Teste a conectividade da API com uma requisição GET simples

Parabéns! Você Implementou a Precificação Baseada em Assentos

Você criou com sucesso um sistema de precificação baseada em assentos com o Dodo Payments! Aqui está o que você realizou:

Base Subscription

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

Seat Add-ons

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

Checkout

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

Web Interface

Criada uma interface web simples para testar diferentes quantidades de assentos
Este exemplo demonstra apenas uma implementação mínima de precificação por assentos. Para uso em produção, você deve adicionar tratamento de erros robusto, autenticação, validação de dados, medidas de segurança e adaptar a lógica para atender aos requisitos da sua aplicação.