Saltar al contenido principal
En este tutorial, construirás PixelGen AI - un servicio de generación de imágenes AI de ejemplo que demuestra la facturación basada en uso. Crearemos todo desde cero: el medidor de facturación, la configuración del producto y el código de aplicación de ejemplo que genera imágenes y rastrea el uso en tiempo real.
Este tutorial ofrece código de muestra para una aplicación basada en terminal. Puedes adaptar este código a tu framework específico (React, Vue, Angular, etc.) y personalizar el método de ingreso del usuario según las necesidades de tu aplicación.
Al final de este tutorial, tendrás un servicio de muestra funcional que:
  • Genera imágenes utilizando la API DALL-E de OpenAI
  • Rastrea cada generación de imagen para la facturación
  • Cobra a los clientes automáticamente según el uso
  • Maneja diferentes niveles de calidad (estándar vs HD)

Lo que Estamos Construyendo

Comencemos por entender nuestro servicio PixelGen AI:
  • Servicio: Generación de imágenes AI utilizando la API DALL-E de OpenAI
  • Modelo de Precios: Pago por imagen ($0.05 por imagen)
  • Nivel Gratuito: 10 imágenes gratuitas por cliente por mes
  • Opciones de Calidad: Imágenes estándar y HD (mismo precio por simplicidad)
Antes de comenzar, asegúrate de tener:
  • Una cuenta de Dodo Payments
  • Acceso a la API de OpenAI
  • Conocimientos básicos de TypeScript/Node.js

Paso 1: Crea Tu Medidor de Uso

Comenzaremos creando un medidor en tu panel de Dodo Payments que rastreará cada imagen que genere nuestro servicio. Piensa en esto como el “contador” que rastrea eventos facturables.
Lo que construiremos: Un medidor llamado “Image Generation Meter” que contabiliza cada vez que alguien genera una imagen usando nuestro servicio.
1

Open the Meters section

  1. Inicia sesión en el panel de Dodo Payments
  2. Haz clic en Meters en la barra lateral izquierda
  3. Haz clic en el botón Create Meter
Verás un formulario donde configuraremos el seguimiento de generación de imágenes.
2

Fill in the basic meter information

Ahora ingresaremos los detalles específicos para nuestro servicio PixelGen AI:Meter Name: Copia y pega exactamente esto → Image Generation MeterDescription: Copia esto → Tracks each AI image generation request made by customers using our DALL-E powered serviceEvent Name: Esto es crucial - copia exactamente → image.generated
El nombre del evento image.generated debe coincidir exactamente con lo que enviaremos luego desde el código de la aplicación. ¡Los nombres de eventos distinguen entre mayúsculas y minúsculas!
3

Configure how we count images

Configura la agregación (cómo el medidor cuenta nuestros eventos):Tipo de Agregación: Selecciona Contar del menú desplegableMeasurement Unit: Escribe → images
Usamos “Count” porque queremos facturar por cada imagen generada, no por tamaño o duración. Cada imagen exitosa = 1 unidad facturable.
4

Add quality filtering

Queremos asegurarnos de contar solo imágenes legítimas (no ejecuciones de prueba o fallos):
  1. Activa Event Filtering: cambia esto a ON
  2. Filter Logic: Selecciona OR (esto significa “contar si CUALQUIERA de estas condiciones es verdadera”)
  3. Agrega la primera condición:
    • Property Key: quality
    • Comparator: equals
    • Value: standard
  4. Haz clic en “Add Condition” para la segunda:
    • Property Key: quality
    • Comparator: equals
    • Value: hd
Esta configuración significa que solo contaremos eventos donde la calidad sea “standard” O “hd”, filtrando eventos de prueba o solicitudes malformadas.
5

Create your meter

  1. Verifica que todos tus ajustes coincidan con los valores anteriores
  2. Haz clic en Create Meter
¡Medidor creado! Tu “Image Generation Meter” ya está listo para comenzar a contar generaciones de imágenes. A continuación, lo conectaremos a un producto de facturación.

Paso 2: Crea Tu Producto de Facturación

Ahora necesitamos crear un producto que defina nuestros precios ($0.05 por imagen con 10 imágenes gratuitas). Esto conecta nuestro medidor a la facturación real.
Lo que construiremos: Un producto llamado “PixelGen AI - Image Generation” que cobra $0.05 por imagen después de las primeras 10 imágenes gratuitas cada mes.
1

Navigate to Products

  1. En tu panel de Dodo Payments, haz clic en Products en la barra lateral izquierda
  2. Haz clic en Create Product
  3. Selecciona Usage-Based como tipo de producto
Esto le indica a Dodo Payments que la facturación se basará en el uso del medidor, no en una suscripción fija.
2

Enter product details

Completa estos valores exactos para nuestro servicio PixelGen AI:Product Name: Copia esto → PixelGen AI - Image GenerationDescription: Copia esto → AI-powered image generation service with pay-per-use billingImagen del Producto: Sube una imagen clara y relevante.
Aparecerán en las facturas del cliente, así que haz que sean claros y profesionales.
3

Connect your meter

Antes de conectar tu medidor, asegúrate de haber seleccionado Facturación Basada en Uso como el tipo de precio para tu producto.Además, establece el Fixed Price en 0 para asegurar que los clientes solo paguen según su uso, sin cuota base.Ahora, vincula el medidor que acabas de crear:
  1. Desplázate hacia abajo a la sección Medidor Asociado
  2. Haz clic en Agregar Medidores
  3. Desde el menú desplegable, selecciona “Medidor de Generación de Imágenes” (el que creaste anteriormente)
  4. Confirma que aparece en la configuración de tu producto
Tu medidor ya está conectado con éxito a este producto.
4

Set your pricing

Aquí definimos nuestro modelo de negocio:
Price Per Unit: Ingresa → 0.05 (esto es $0.05 por imagen)Free Threshold: Ingresa → 10 (los clientes obtienen 10 imágenes gratuitas al mes)
Cómo funciona la facturación: Si un cliente genera 25 imágenes en un mes, se le cobrará por 15 imágenes (25 - 10 gratuitas) = 15 × 0.05=0.05 = 0.75
5

Save your product

  1. Revisa todos tus ajustes:
    • Nombre: PixelGen AI - Image Generation
    • Medidor: Image Generation Meter
    • Precio: $0.05 por imagen
    • Nivel gratuito: 10 imágenes
  2. Haz clic en Save Changes
¡Producto creado! Tu facturación ya está configurada. Los clientes serán cobrados automáticamente según su uso de generación de imágenes.

Paso 3: Realiza una Compra de Prueba

Antes de comenzar a recibir eventos de uso, necesitamos realizar una compra de prueba.
1

Get your payment link

  1. En tu panel de Dodo Payments, ve a Products
  2. Busca tu producto “PixelGen AI - Image Generation”
  3. Haz clic en el botón Share junto a tu producto
  4. Copia el enlace de pago que aparece
El enlace de pago tendrá un aspecto similar a: https://test.checkout.dodopayments.com/buy/pdt_IgPWlRsfpbPd5jQKezzW1?quantity=1
2

Complete a test purchase

  1. Abre el enlace de pago en una nueva pestaña del navegador
  2. Ingresa los datos de pago de prueba y completa la compra.
Después del pago exitoso, tendrás un ID de cliente que usaremos en el código de nuestra aplicación.
3

Find your customer ID

  1. Regresa a tu panel de Dodo Payments
  2. Navega a Customers en la barra lateral izquierda
  3. Encuentra el cliente que acabas de crear (con el correo de prueba)
  4. Copia el ID del cliente: se verá como cus_abc123def456
Guarda este ID de cliente: lo codificaremos en nuestro código de muestra para asegurarnos de que los eventos se rastreen correctamente.

Paso 4: Construye la Aplicación de Ejemplo

Ahora tenemos nuestra configuración de facturación completa y un cliente de prueba creado. Vamos a construir la aplicación de ejemplo PixelGen AI que genera imágenes y rastrea automáticamente el uso para la facturación.
1

Set up your project

Crea un nuevo directorio e inicializa el proyecto:
mkdir pixelgen-ai
cd pixelgen-ai
npm init -y
2

Install dependencies

Instala los paquetes que necesitamos:
npm install openai dotenv
npm install -D typescript @types/node ts-node
3

Create the main application

Crea un archivo llamado index.ts y copia este código completo de la aplicación:
Aquí está la aplicación completa de PixelGen AI con facturación 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);
}

Paso 5: Prueba Tu Aplicación de Ejemplo

¡Es hora de probar nuestro servicio de ejemplo PixelGen AI y ver la facturación en acción! Asegurémonos de que todo funcione de extremo a extremo.
Lo que estamos probando: Generaremos algunas imágenes, verificaremos que los eventos lleguen a Dodo Payments y confirmaremos que los cálculos de facturación son correctos.
1

Set up your environment

Primero, asegúrate de tener todo configurado:
  1. Crea un archivo .env en tu directorio pixelgen-ai
  2. Agrega tus claves de API reales:
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. Instala las dependencias y ejecuta la aplicación:
npm install
npm start
Asegúrate de usar claves de API reales y actualiza el ID de cliente codificado en el código con el ID real del Paso 3.
2

Generate your first test image

Cuando la aplicación inicie, verás:
PixelGen AI - Image Generator with Usage Billing

Enter your image prompt:
Prueba este prompt: “Un robot lindo pintando un paisaje”Deberías ver una salida 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...
Si ves “Usage event sent successfully”, ¡tu integración de facturación está funcionando!
3

Generate a few more images

Generemos 2-3 imágenes más para probar múltiples eventos. Intenta estos prompts:
  1. “Un atardecer sobre montañas con nubes moradas”
  2. “Una máquina de café steampunk en una cocina victoriana”
  3. “Un dragón amigable leyendo un libro en una biblioteca”
Cada vez, observa el mensaje “Usage event sent successfully”.
4

Check your Dodo Payments dashboard

Ahora verifiquemos que los eventos se están recibiendo:
  1. Abre tu panel de Dodo Payments
  2. Ve a Facturación por Uso → *MedidoresMedidor de Generación de Imágenes
  3. Haz clic en la pestaña Eventos
  4. Deberías ver tus eventos de generación de imágenes listados
Qué buscar:
  • Nombres de eventos: image.generated
  • ID de cliente: Tu ID de cliente de prueba
¡Deberías ver un evento por cada imagen generada!
5

Verify billing calculations

Verifiquemos si el conteo de uso está funcionando:
  1. En tu medidor, ve a la pestaña Clientes
  2. Encuentra tu cliente de prueba
  3. Verifica la columna “Unidades Consumidas”
6

Test the billing threshold

Superemos la capa gratuita para ver la facturación en acción:
  1. Genera 8 imágenes más (para alcanzar un total de 12)
  2. Verifica tu panel de medidor nuevamente
  3. Ahora deberías ver:
    • Unidades consumidas: 12
    • Unidades facturables: 2 (12 - 10 gratuitas)
    • Monto de facturación: $0.10
¡Éxito! Tu facturación basada en uso funciona perfectamente. Los clientes se cobrarán automáticamente según su uso real de generación de imágenes.

Solución de Problemas

Problemas comunes y sus soluciones:
Causas posibles:
  • El nombre del evento no coincide exactamente con la configuración del medidor
  • El ID de cliente no existe en tu cuenta
  • La clave de API es inválida o ha expirado
  • Problemas de conectividad de red
Soluciones:
  1. Verifica que el nombre del evento coincida exactamente con la configuración del medidor (distingue mayúsculas/minúsculas)
  2. Comprueba que el ID del cliente exista en Dodo Payments
  3. Prueba la clave de API con una llamada simple a la API
  4. Revisa la conectividad de red y la configuración del firewall

¡Felicidades! Has Construido PixelGen AI

¡Has creado exitosamente un fragmento para la generación de imágenes AI con facturación basada en uso! Esto es lo que lograste:

Usage Meter

Se creó el “Image Generation Meter” que rastrea cada evento de generación de imagen

Billing Product

Se configuró un precio de $0.05 por imagen con 10 imágenes gratuitas mensuales

AI Application

Se creó una aplicación funcional en TypeScript que genera imágenes con DALL-E de OpenAI

Automated Billing

Se integró el seguimiento de eventos en tiempo real que factura automáticamente a los clientes