Pular para o conteúdo principal
Neste tutorial, você construirá o PixelGen AI - um serviço de geração de imagens AI de exemplo que demonstra cobrança baseada em uso. Vamos criar tudo do zero: o medidor de cobrança, a configuração do produto e o código de aplicação de exemplo que gera imagens e rastreia o uso em tempo real.
Este tutorial fornece código de implementação de exemplo para um aplicativo baseado em terminal. Você pode modificar esse código para o seu framework específico (React, Vue, Angular etc.) e personalizar o método de entrada do usuário de acordo com as necessidades da sua aplicação.
Ao final deste tutorial, você terá um serviço de exemplo funcionando que:
  • Gera imagens usando a API DALL-E da OpenAI
  • Rastreia cada geração de imagem para cobrança
  • Cobra automaticamente os clientes com base no uso
  • Lida com diferentes níveis de qualidade (padrão vs HD)

O Que Estamos Construindo

Vamos começar entendendo nosso serviço PixelGen AI:
  • Serviço: Geração de imagens AI usando a API DALL-E da OpenAI
  • Modelo de Preço: Cobrança por imagem ($0,05 por imagem)
  • Camada Gratuita: 10 imagens gratuitas por cliente por mês
  • Opções de Qualidade: Imagens padrão e HD (mesmo preço para simplicidade)
Antes de começarmos, certifique-se de que você possui:
  • Uma conta no Dodo Payments
  • Acesso à API da OpenAI
  • Familiaridade básica com TypeScript/Node.js

Passo 1: Crie Seu Medidor de Uso

Começaremos criando um medidor no seu painel do Dodo Payments que rastreará cada imagem que nosso serviço gera. Pense nisso como o “contador” que rastreia eventos cobrados.
O que estamos construindo: Um medidor chamado “Image Generation Meter” que conta cada vez que alguém gera uma imagem usando nosso serviço.
1

Open the Meters section

  1. Faça login no seu painel do Dodo Payments
  2. Clique em Meters na barra lateral esquerda
  3. Clique no botão Create Meter
Você verá um formulário onde vamos configurar o acompanhamento da geração de imagens.
2

Fill in the basic meter information

Agora vamos inserir os detalhes específicos para o nosso serviço PixelGen AI:Meter Name: Copie e cole exatamente isto → Image Generation MeterDescription: Copie isto → Tracks each AI image generation request made by customers using our DALL-E powered serviceEvent Name: Isto é crucial – copie exatamente → image.generated
O nome do evento image.generated deve corresponder exatamente ao que enviaremos mais tarde a partir do nosso código de aplicativo. Os nomes de eventos diferenciam maiúsculas de minúsculas!
3

Configure how we count images

Configure a agregação (como o medidor conta nossos eventos):Tipo de Agregação: Selecione Contar no menu suspensoMeasurement Unit: Digite → images
Estamos usando “Count” porque queremos cobrar por imagem gerada, não por tamanho ou tempo de geração. Cada imagem bem-sucedida = 1 unidade faturável.
4

Add quality filtering

Queremos ter certeza de que contamos apenas imagens legítimas (não execuções de teste ou falhas):
  1. Ative o Event Filtering: alterne para ON
  2. Lógica de Filtro: selecione OR (isso significa “contar se QUALQUER uma dessas condições for verdadeira”)
  3. Adicione a primeira condição:
    • Property Key: quality
    • Comparator: equals
    • Value: standard
  4. Clique em “Add Condition” para a segunda:
    • Property Key: quality
    • Comparator: equals
    • Value: hd
Essa configuração significa que vamos contar apenas eventos em que a qualidade seja “standard” OU “hd” – filtrando quaisquer eventos de teste ou requisições malformadas.
5

Create your meter

  1. Verifique novamente se todas as suas configurações correspondem aos valores acima
  2. Clique em Create Meter
Medidor criado! Seu “Image Generation Meter” agora está pronto para começar a contar gerações de imagens. Em seguida, conectaremos isso a um produto de cobrança.

Passo 2: Crie Seu Produto de Cobrança

Agora precisamos criar um produto que defina nosso preço ($0,05 por imagem com 10 imagens gratuitas). Isso conecta nosso medidor à cobrança real.
O que estamos construindo: Um produto chamado “PixelGen AI - Image Generation” que cobra $0.05 por imagem depois das primeiras 10 imagens gratuitas a cada mês.
1

Navigate to Products

  1. No painel do Dodo Payments, clique em Products na barra lateral esquerda
  2. Clique em Create Product
  3. Selecione Usage-Based como tipo de produto
Isso informa ao Dodo Payments que a cobrança será baseada no uso do medidor, não em uma assinatura fixa.
2

Enter product details

Preencha estes valores exatos para o nosso serviço PixelGen AI:Product Name: Copie isto → PixelGen AI - Image GenerationDescription: Copie isto → AI-powered image generation service with pay-per-use billingImagem do Produto: Faça upload de uma imagem clara e relevante.
Esses dados aparecerão nas faturas dos clientes, então mantenha-os claros e profissionais.
3

Connect your meter

Antes de conectar seu medidor, certifique-se de que você selecionou Cobrança Baseada em Uso como o tipo de preço para seu produto.Além disso, defina o Fixed Price como 0 para garantir que os clientes sejam cobrados apenas com base no uso, sem taxa base.Agora, vincule o medidor que você acabou de criar:
  1. Role para baixo até a seção Medidor Associado
  2. Clique em Adicionar Medidores
  3. No menu suspenso, selecione “Medidor de Geração de Imagens” (o que você criou anteriormente)
  4. Confirme que ele aparece na configuração do seu produto
Seu medidor agora está conectado com sucesso a este produto.
4

Set your pricing

Aqui é onde definimos o nosso modelo de negócios:
Price Per Unit: Insira → 0.05 (isso é $0.05 por imagem)Free Threshold: Insira → 10 (os clientes recebem 10 imagens gratuitas por mês)
Como a cobrança funciona: Se um cliente gera 25 imagens em um mês, ele será cobrado por 15 imagens (25 - 10 grátis) = 15 × 0.05=0.05 = 0.75
5

Save your product

  1. Revise todas as suas configurações:
    • Nome: PixelGen AI - Image Generation
    • Medidor: Image Generation Meter
    • Preço: $0.05 por imagem
    • Camada gratuita: 10 imagens
  2. Clique em Save Changes
Produto criado! Sua cobrança agora está configurada. Os clientes serão automaticamente cobrados com base no uso da geração de imagens.

Passo 3: Faça uma Compra de Teste

Antes de começarmos a ingerir eventos de uso, precisamos fazer uma compra de teste.
1

Get your payment link

  1. No painel do Dodo Payments, vá para Products
  2. Encontre seu produto “PixelGen AI - Image Generation”
  3. Clique no botão Share ao lado do seu produto
  4. Copie o link de pagamento que aparecer
O link de pagamento ficará parecido com isto: https://test.checkout.dodopayments.com/buy/pdt_IgPWlRsfpbPd5jQKezzW1?quantity=1
2

Complete a test purchase

  1. Abra o link de pagamento em uma nova aba do navegador
  2. Insira dados de pagamento de teste e conclua a compra.
Após o pagamento bem-sucedido, você terá um ID de cliente que usaremos em nosso código de aplicação.
3

Find your customer ID

  1. Volte para o painel do Dodo Payments
  2. Navegue até Customers na barra lateral esquerda
  3. Encontre o cliente que você acabou de criar (com o e-mail de teste)
  4. Copie o ID do cliente – ele ficará parecido com cus_abc123def456
Salve esse ID de cliente – nós o codificaremos diretamente no nosso código de exemplo para garantir que os eventos sejam rastreados corretamente.

Passo 4: Construa a Aplicação de Exemplo

Agora que temos nossa configuração de cobrança completa e um cliente de teste criado. Vamos construir a aplicação de exemplo PixelGen AI que gera imagens e rastreia automaticamente o uso para cobrança.
1

Set up your project

Crie um novo diretório e inicialize o projeto:
mkdir pixelgen-ai
cd pixelgen-ai
npm init -y
2

Install dependencies

Instale os pacotes de que precisamos:
npm install openai dotenv
npm install -D typescript @types/node ts-node
3

Create the main application

Crie um arquivo chamado index.ts e copie este código completo da aplicação:
Aqui está a aplicação completa do PixelGen AI com cobrança integrada:
import 'dotenv/config';
import OpenAI from 'openai';
import * as readline from 'readline';
import { randomUUID } from 'crypto';

// Initialize OpenAI client
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

// Dodo Payments configuration
const DODO_PAYMENTS_CONFIG = {
  apiKey: process.env.DODO_PAYMENTS_API_KEY,
  baseUrl: 'https://test.dodopayments.com',
  customerId: 'cus_FX5FAB43aShGyiHJGIqjB', // Replace with your actual customer ID from Step 3
};

// DALL-E 3 pricing (as of 2024-2025)
const PRICING = {
  'standard': 0.040, // $0.040 per image (1024×1024)
  'hd': 0.080,       // $0.080 per image (1024×1024, HD quality)
};

interface ImageGenerationOptions {
  prompt: string;
  model?: 'dall-e-3' | 'dall-e-2';
  quality?: 'standard' | 'hd';
  size?: '1024x1024' | '1792x1024' | '1024x1792';
  style?: 'vivid' | 'natural';
}

interface UsageEvent {
  event_id: string;
  customer_id: string;
  event_name: string;
  timestamp: string;
  metadata: {
    quality: string;
  };
}

/**
 * Send usage event to Dodo Payments for billing tracking
 */
async function sendUsageEvent(event: UsageEvent): Promise<void> {
  try {
    console.log('Sending usage event to Dodo Payments...');
    console.log(`URL: ${DODO_PAYMENTS_CONFIG.baseUrl}/events/ingest`);
    console.log(`API Key present: ${!!DODO_PAYMENTS_CONFIG.apiKey}`);
    console.log(`API Key length: ${DODO_PAYMENTS_CONFIG.apiKey?.length || 0}`);
    console.log(`Customer ID: ${DODO_PAYMENTS_CONFIG.customerId}`);
    
    const requestBody = {
      events: [event]
    };
    console.log('Request body:', JSON.stringify(requestBody, null, 2));
    
    const headers = {
      'Authorization': `Bearer ${DODO_PAYMENTS_CONFIG.apiKey}`,
      'Content-Type': 'application/json',
    }
    console.log('Headers:', headers);
    const response = await fetch(`${DODO_PAYMENTS_CONFIG.baseUrl}/events/ingest`, {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(requestBody),
    });

    console.log(`Response status: ${response.status}`);
    console.log(`Response headers:`, Object.fromEntries(response.headers.entries()));

    if (!response.ok) {
      const errorData = await response.text();
      console.log(`Error response body: ${errorData}`);
      throw new Error(`HTTP ${response.status}: ${errorData}`);
    }

    const result = await response.json();
    console.log('Usage event sent successfully');
    console.log(`   • Event ID: ${event.event_id}`);
    console.log(`   • Customer: ${event.customer_id}`);
    console.log(`   • Quality: ${event.metadata.quality}`);
    
  } catch (error) {
    console.error('Failed to send usage event:', error);
    // In production, you might want to queue failed events for retry
    throw error;
  }
}

async function generateImage(options: ImageGenerationOptions) {
  const startTime = Date.now();
  const eventId = randomUUID();
  
  try {
    console.log('Generating image...');
    console.log(`Prompt: "${options.prompt}"`);
    console.log(`Quality: ${options.quality || 'standard'}`);
    console.log(`Size: ${options.size || '1024x1024'}`);
    
    const response = await openai.images.generate({
      model: options.model || 'dall-e-3',
      prompt: options.prompt,
      n: 1,
      size: options.size || '1024x1024',
      quality: options.quality || 'standard',
      style: options.style || 'vivid',
    });

    const endTime = Date.now();
    const duration = (endTime - startTime) / 1000;
    const cost = PRICING[options.quality || 'standard'];
    
    // Create usage event for Dodo Payments
    const usageEvent: UsageEvent = {
      event_id: eventId,
      customer_id: DODO_PAYMENTS_CONFIG.customerId!,
      event_name: 'image.generated',
      timestamp: new Date().toISOString(),
      metadata: {
        quality: options.quality || 'standard',
      }
    };

    // Send usage event to Dodo Payments for billing
    await sendUsageEvent(usageEvent);
    
    console.log('\nImage generated successfully!');
    console.log(`Generation Stats:`);
    console.log(`   • Duration: ${duration.toFixed(2)} seconds`);
    console.log(`   • Quality: ${options.quality || 'standard'}`);
    console.log(`   • Cost: $${cost.toFixed(3)}`);
    console.log(`   • Image URL: ${response.data?.[0]?.url}`);
    
    if (response.data?.[0]?.revised_prompt) {
      console.log(`   • Revised prompt: "${response.data[0].revised_prompt}"`);
    }

    return {
      imageUrl: response.data?.[0].url,
      revisedPrompt: response.data?.[0].revised_prompt,
      cost: cost,
      duration: duration,
      eventId: eventId,
    };

  } catch (error) {
    console.error('Error generating image:', error);
    
    // Send failure event for monitoring (optional)
    try {
      const failureEvent: UsageEvent = {
        event_id: eventId,
        customer_id: DODO_PAYMENTS_CONFIG.customerId!,
        event_name: 'image.generation.failed',
        timestamp: new Date().toISOString(),
        metadata: {
          quality: options.quality || 'standard',
        }
      };
      
      // Note: You might want to create a separate meter for failed attempts
      // await sendUsageEvent(failureEvent);
    } catch (eventError) {
      console.error('Failed to send failure event:', eventError);
    }
    
    throw error;
  }
}

async function getUserInput(): Promise<string> {
  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
  });

  return new Promise((resolve) => {
    rl.question('Enter your image prompt: ', (answer) => {
      rl.close();
      resolve(answer);
    });
  });
}

async function main() {
  console.log('PixelGen AI - Image Generator with Usage Billing\n');
  
  // Validate environment variables
  const requiredEnvVars = [
    'OPENAI_API_KEY',
    'DODO_PAYMENTS_API_KEY'
  ];
  
  for (const envVar of requiredEnvVars) {
    if (!process.env[envVar]) {
      console.error(`Error: ${envVar} environment variable is not set.`);
      console.log('Please set all required environment variables:');
      console.log('export OPENAI_API_KEY="your-openai-key"');
      console.log('export DODO_PAYMENTS_API_KEY="your-dodo-api-key"');
      console.log('Note: Customer ID is hardcoded in the application');
      process.exit(1);
    }
  }

  try {
    const prompt = await getUserInput();
    
    if (!prompt.trim()) {
      console.log('No prompt provided. Exiting...');
      return;
    }

    const result = await generateImage({
      prompt: prompt.trim(),
      quality: 'standard', // Change to 'hd' for higher quality (costs more)
      size: '1024x1024',
      style: 'vivid'
    });

    console.log('\nProcess completed successfully!');
    console.log(`Billing Information:`);
    console.log(`   • Total cost: $${result.cost.toFixed(3)}`);
    console.log(`   • Event ID: ${result.eventId}`);
    console.log(`   • Billing will be processed automatically via Dodo Payments`);
    
  } catch (error) {
    console.error('Application error:', error);
    process.exit(1);
  }
}

// Run the application
if (require.main === module) {
  main().catch(console.error);
}

Passo 5: Teste Sua Aplicação de Exemplo

Hora de testar nosso serviço de exemplo PixelGen AI e ver a cobrança em ação! Vamos garantir que tudo funcione de ponta a ponta.
O que estamos testando: Vamos gerar algumas imagens, verificar se os eventos chegam ao Dodo Payments e confirmar se os cálculos da cobrança estão corretos.
1

Set up your environment

Primeiro, certifique-se de que tudo está configurado:
  1. Crie um arquivo .env no diretório pixelgen-ai
  2. Adicione suas chaves de API reais:
OPENAI_API_KEY=sk-your-actual-openai-key
DODO_PAYMENTS_API_KEY=your-actual-dodo-api-key
# Customer ID is hardcoded in the application
  1. Instale as dependências e execute o app:
npm install
npm start
Certifique-se de usar chaves de API reais e atualize o ID de cliente codificado no código com o seu ID real obtido no Passo 3!
2

Generate your first test image

Quando o app iniciar, você verá:
PixelGen AI - Image Generator with Usage Billing

Enter your image prompt:
Tente este prompt: “Um robô fofo pintando uma paisagem”Você deve ver uma saída como esta:
Generating image...
Prompt: "A cute robot painting a landscape"
Quality: standard
Size: 1024x1024

Sending usage event to Dodo Payments...
Usage event sent successfully
   • Event ID: 550e8400-e29b-41d4-a716-446655440000
   • Customer: cus_atXa1lklCRRzMicTqfiw2
   • Quality: standard

Image generated successfully!
Generation Stats:
   • Duration: 8.45 seconds
   • Quality: standard
   • Cost: $0.040
   • Image URL: https://oaidalleapi...
Se você vir “Usage event sent successfully”, sua integração de cobrança está funcionando!
3

Generate a few more images

Vamos gerar mais 2-3 imagens para testar múltiplos eventos. Tente estes prompts:
  1. “Um pôr do sol sobre montanhas com nuvens roxas”
  2. “Uma máquina de café steampunk em uma cozinha vitoriana”
  3. “Um dragão amigável lendo um livro em uma biblioteca”
Cada vez, fique de olho na mensagem “Usage event sent successfully”.
4

Check your Dodo Payments dashboard

Agora vamos verificar se os eventos estão sendo recebidos:
  1. Abra seu painel do Dodo Payments
  2. Vá para Cobrança por Uso → *MedidoresMedidor de Geração de Imagens
  3. Clique na aba Eventos
  4. Você deve ver seus eventos de geração de imagens listados
O que observar:
  • Nomes de eventos: image.generated
  • ID do cliente: o seu ID de cliente de teste
Você deve ver um evento para cada imagem que gerou!
5

Verify billing calculations

Vamos verificar se a contagem de uso está funcionando:
  1. No seu medidor, vá para a aba Clientes
  2. Encontre seu cliente de teste
  3. Verifique a coluna “Unidades Consumidas”
6

Test the billing threshold

Vamos exceder o limite gratuito para ver a cobrança em ação:
  1. Gere mais 8 imagens (para atingir 12 no total)
  2. Verifique seu painel do medidor novamente
  3. Você deve agora ver:
    • Unidades consumidas: 12
    • Unidades cobradas: 2 (12 - 10 gratuitas)
    • Valor da cobrança: $0,10
Sucesso! Sua cobrança baseada em uso está funcionando perfeitamente. Os clientes serão automaticamente cobrados com base no uso real da geração de imagens.

Solução de Problemas

Problemas comuns e suas soluções:
Possíveis causas:
  • O nome do evento não corresponde exatamente à configuração do medidor
  • O ID do cliente não existe na sua conta
  • A chave de API é inválida ou expirou
  • Problemas de conectividade de rede
Soluções:
  1. Verifique se o nome do evento corresponde exatamente à configuração do medidor (diferencia maiúsculas de minúsculas)
  2. Cheque se o ID do cliente existe no Dodo Payments
  3. Teste a chave de API com uma chamada simples
  4. Confira a conectividade de rede e as configurações de firewall

Parabéns! Você Construiu o PixelGen AI

Você criou com sucesso um snippet para geração de imagens AI com cobrança baseada em uso! Aqui está o que você realizou:

Usage Meter

Criado o “Image Generation Meter” que rastreia cada evento de geração de imagem

Billing Product

Configurado o preço de $0.05 por imagem com 10 imagens gratuitas por mês

AI Application

Construímos um app TypeScript funcional que gera imagens usando o DALL-E da OpenAI

Automated Billing

Integrado rastreamento de eventos em tempo real que cobra automaticamente os clientes