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 proporciona código de implementación de ejemplo para una aplicación basada en terminal. Puedes modificar este código para tu marco específico (React, Vue, Angular, etc.) y personalizar el método de entrada del usuario de acuerdo a 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
  • Familiaridad básica con 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 estamos construyendo: Un medidor llamado “Medidor de Generación de Imágenes” que cuenta cada vez que alguien genera una imagen utilizando nuestro servicio.
1

Abre la sección de Medidores

  1. Inicia sesión en tu panel de Dodo Payments
  2. Haz clic en Medidores en la barra lateral izquierda
  3. Haz clic en el botón Crear Medidor
Deberías ver un formulario donde configuraremos nuestro rastreo de generación de imágenes.
2

Completa la información básica del medidor

Ahora ingresaremos los detalles específicos para nuestro servicio PixelGen AI:Nombre del Medidor: Copia y pega esto exactamente → Image Generation MeterDescripción: Copia esto → Tracks each AI image generation request made by customers using our DALL-E powered serviceNombre del Evento: Esto es crucial - copia exactamente → image.generated
El nombre del evento image.generated debe coincidir exactamente con lo que enviaremos desde nuestro código de aplicación más tarde. ¡Los nombres de los eventos son sensibles a mayúsculas y minúsculas!
3

Configura cómo contamos las imágenes

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

Agrega filtrado de calidad

Queremos asegurarnos de contar solo imágenes legítimas (no ejecuciones de prueba o fallos):
  1. Habilitar Filtrado de Eventos: Activa esto EN
  2. Lógica de Filtrado: Selecciona O (esto significa “contar si CUALQUIERA de estas condiciones es verdadera”)
  3. Agrega la primera condición:
    • Clave de Propiedad: quality
    • Comparador: equals
    • Valor: standard
  4. Haz clic en “Agregar Condición” para la segunda:
    • Clave de Propiedad: quality
    • Comparador: equals
    • Valor: hd
Esta configuración significa que solo contaremos eventos donde la calidad sea “estándar” O “hd” - filtrando cualquier evento de prueba o solicitudes mal formadas.
5

Crea tu medidor

  1. Verifica que todos tus ajustes coincidan con los valores anteriores
  2. Haz clic en Crear Medidor
¡Medidor creado! Tu “Medidor de Generación de Imágenes” ahora está listo para comenzar a contar las 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 estamos construyendo: Un producto llamado “PixelGen AI - Generación de Imágenes” que cobra $0.05 por imagen después de las primeras 10 imágenes gratuitas cada mes.
1

Navega a Productos

  1. En tu panel de Dodo Payments, haz clic en Productos en la barra lateral izquierda
  2. Haz clic en Crear Producto
  3. Selecciona Basado en Uso como el tipo de producto
Esto le dice a Dodo Payments que la facturación se basará en el uso del medidor, no en una suscripción fija.
2

Ingresa los detalles del producto

Completa estos valores exactos para nuestro servicio PixelGen AI:Nombre del Producto: Copia esto → PixelGen AI - Image GenerationDescripción: Copia esto → AI-powered image generation service with pay-per-use billingImagen del Producto: Sube una imagen clara y relevante.
Estas aparecerán en las facturas de los clientes, así que hazlas claras y profesionales.
3

Conecta tu medidor

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 Precio Fijo en 0 para asegurarte de que los clientes solo sean cobrados según su uso, sin tarifa 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 ahora está conectado exitosamente a este producto.
4

Establece tu precio

Aquí es donde definimos nuestro modelo de negocio:
Precio Por Unidad: Ingresa → 0.05 (esto es $0.05 por imagen)Umbral Gratuito: Ingresa → 10 (los clientes obtienen 10 imágenes gratuitas por 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

Guarda tu producto

  1. Revisa todos tus ajustes:
    • Nombre: PixelGen AI - Generación de Imágenes
    • Medidor: Medidor de Generación de Imágenes
    • Precio: $0.05 por imagen
    • Nivel gratuito: 10 imágenes
  2. Haz clic en Guardar Cambios
¡Producto creado! Tu facturación ahora 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

Obtén tu enlace de pago

  1. En tu panel de Dodo Payments, ve a Productos
  2. Encuentra tu producto “PixelGen AI - Generación de Imágenes”
  3. Haz clic en el botón Compartir junto a tu producto
  4. Copia el enlace de pago que aparece
El enlace de pago se verá algo así: https://test.checkout.dodopayments.com/buy/pdt_IgPWlRsfpbPd5jQKezzW1?quantity=1
2

Completa una compra de prueba

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

Encuentra tu ID de cliente

  1. Regresa a tu panel de Dodo Payments
  2. Navega a Clientes en la barra lateral izquierda
  3. Encuentra el cliente que acabas de crear (con el correo electrónico de prueba)
  4. Copia el ID de cliente - se verá como cus_abc123def456
Guarda este ID de cliente - lo codificaremos en nuestro código de aplicación de ejemplo para asegurar 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

Configura tu proyecto

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

Instala dependencias

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

Crea la aplicación principal

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

Configura tu entorno

Primero, asegúrate de que todo esté configurado:
  1. Crea un archivo .env en tu directorio pixelgen-ai
  2. Agrega tus claves 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 API reales y actualiza el ID de cliente codificado en el código con tu ID de cliente real del Paso 3!
2

Genera tu primera imagen de prueba

Cuando la aplicación se 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 “Evento de uso enviado exitosamente”, ¡tu integración de facturación está funcionando!
3

Genera algunas imágenes más

Generemos de 2 a 3 imágenes más para probar múltiples eventos. Prueba 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 “Evento de uso enviado exitosamente”.
4

Verifica tu panel de Dodo Payments

Ahora verifiquemos que los eventos están siendo recibidos:
  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 que generaste!
5

Verifica los cálculos de facturación

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

Prueba el umbral de facturación

Superemos el nivel gratuito 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 está funcionando perfectamente. Los clientes serán cobrados 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 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 (sensible a mayúsculas y minúsculas)
  2. Verifica que el ID de cliente exista en Dodo Payments
  3. Prueba la clave API con una llamada API simple
  4. Verifica 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:

Medidor de Uso

Creado “Medidor de Generación de Imágenes” que rastrea cada evento de generación de imágenes

Producto de Facturación

Configurado precios a $0.05 por imagen con 10 imágenes gratuitas por mes

Aplicación AI

Construida una aplicación funcional en TypeScript que genera imágenes utilizando DALL-E de OpenAI

Facturación Automatizada

Integrada el rastreo de eventos en tiempo real que factura automáticamente a los clientes