Passer au contenu principal
Dans ce tutoriel, vous allez construire PixelGen AI - un service de génération d’images AI qui démontre la facturation basée sur l’utilisation. Nous allons créer tout à partir de zéro : le compteur de facturation, la configuration du produit et le code d’application d’exemple qui génère des images et suit l’utilisation en temps réel.
Ce tutoriel fournit un exemple de code pour une application basée sur un terminal. Vous pouvez adapter ce code à votre framework spécifique (React, Vue, Angular, etc.) et personnaliser la méthode de saisie utilisateur en fonction des besoins de votre application.
À la fin de ce tutoriel, vous aurez un service d’exemple fonctionnel qui :
  • Génère des images en utilisant l’API DALL-E d’OpenAI
  • Suit chaque génération d’image pour la facturation
  • Facture automatiquement les clients en fonction de l’utilisation
  • Gère différents niveaux de qualité (standard vs HD)

Ce que nous construisons

Commençons par comprendre notre service PixelGen AI :
  • Service : Génération d’images AI utilisant l’API DALL-E d’OpenAI
  • Modèle de tarification : Paiement par image (0,05 $ par image)
  • Niveau gratuit : 10 images gratuites par client par mois
  • Options de qualité : Images standard et HD (même prix pour la simplicité)
Avant de commencer, assurez-vous de disposer de :
  • Un compte Dodo Payments
  • L’accès à l’API d’OpenAI
  • Une connaissance de base de TypeScript/Node.js

Étape 1 : Créer votre compteur d’utilisation

Nous allons commencer par créer un compteur dans votre tableau de bord Dodo Payments qui suivra chaque image générée par notre service. Pensez à cela comme le “compteur” qui suit les événements facturables.
Ce que nous construisons : Un compteur nommé « Image Generation Meter » qui incrémente chaque fois qu’un utilisateur génère une image via notre service.
1

Open the Meters section

  1. Connectez-vous à votre tableau de bord Dodo Payments
  2. Cliquez sur Meters dans la barre latérale gauche
  3. Cliquez sur le bouton Create Meter
Vous devriez voir un formulaire où nous allons configurer le suivi de la génération d’images.
2

Fill in the basic meter information

Maintenant, saisissons les détails spécifiques de notre service PixelGen AI :Nom du compteur : Copiez-collez ceci exactement → Image Generation MeterDescription : Copiez ceci → Tracks each AI image generation request made by customers using our DALL-E powered serviceNom de l’événement : C’est crucial – copiez exactement → image.generated
Le nom d’événement image.generated doit correspondre exactement à ce que nous enverrons depuis notre code applicatif plus tard. Les noms d’événement sont sensibles à la casse !
3

Configure how we count images

Configurer l’agrégation (la manière dont le compteur additionne nos événements) :Type d’agrégation : Sélectionnez Compter dans le menu déroulantUnité de mesure : Tapez → images
Nous utilisons « Count » parce que nous souhaitons facturer par image générée, et non pas selon la taille ou la durée. Chaque image générée avec succès = 1 unité facturable.
4

Add quality filtering

Nous voulons nous assurer que nous ne comptons que les images légitimes (pas les essais ou les échecs) :
  1. Activez le filtrage des événements : basculez sur ON
  2. Logique de filtre : sélectionnez OR (cela signifie « compter si UNE de ces conditions est vraie »)
  3. Ajoutez la première condition :
    • Clé de propriété : quality
    • Comparateur : equals
    • Valeur : standard
  4. Cliquez sur « Add Condition » pour la seconde :
    • Clé de propriété : quality
    • Comparateur : equals
    • Valeur : hd
Cette configuration signifie que nous ne compterons que les événements dont la qualité est « standard » OU « hd » – en filtrant ainsi les événements de test ou les requêtes mal formées.
5

Create your meter

  1. Vérifiez que tous vos paramètres correspondent aux valeurs ci-dessus
  2. Cliquez sur Create Meter
Compteur créé ! Votre « Image Generation Meter » est maintenant prêt à compter les générations d’images. Ensuite, nous le connecterons à un produit de facturation.

Étape 2 : Créer votre produit de facturation

Maintenant, nous devons créer un produit qui définit notre tarification (0,05 $ par image avec 10 images gratuites). Cela connecte notre compteur à la facturation réelle.
Ce que nous construisons : Un produit nommé « PixelGen AI - Image Generation » qui facture 0,05 $ par image après les 10 premières images gratuites chaque mois.
1

Navigate to Products

  1. Dans votre tableau de bord Dodo Payments, cliquez sur Products dans la barre latérale gauche
  2. Cliquez sur Create Product
  3. Sélectionnez Usage-Based comme type de produit
Cela indique à Dodo Payments que la facturation se basera sur l’utilisation du compteur, et non sur un abonnement fixe.
2

Enter product details

Remplissez ces valeurs exactes pour notre service PixelGen AI :Nom du produit : Copiez ceci → PixelGen AI - Image GenerationDescription : Copiez ceci → AI-powered image generation service with pay-per-use billingImage du produit : Téléchargez une image claire et pertinente.
Ces informations apparaîtront sur les factures des clients, alors veillez à ce qu’elles soient claires et professionnelles.
3

Connect your meter

Avant de connecter votre compteur, assurez-vous d’avoir sélectionné Facturation basée sur l’utilisation comme type de prix pour votre produit.De plus, réglez le Prix fixe sur 0 afin de garantir que les clients ne soient facturés qu’en fonction de leur utilisation, sans frais de base.Maintenant, liez le compteur que vous venez de créer :
  1. Faites défiler vers le bas jusqu’à la section Compteur associé
  2. Cliquez sur Ajouter des compteurs
  3. Dans le menu déroulant, sélectionnez “Compteur de génération d’images” (celui que vous avez créé plus tôt)
  4. Confirmez qu’il apparaît dans la configuration de votre produit
Votre compteur est désormais connecté à ce produit.
4

Set your pricing

Voici où nous définissons notre modèle économique :
Prix par unité : Saisissez → 0.05 (c’est-à-dire 0,05 $ par image)Seuil gratuit : Saisissez → 10 (les clients bénéficient de 10 images gratuites par mois)
Comment fonctionne la facturation : si un client génère 25 images dans un mois, il sera facturé pour 15 images (25 - 10 gratuites) = 15 × 0,05 =0,75= 0,75
5

Save your product

  1. Vérifiez tous vos paramètres :
    • Nom : PixelGen AI - Image Generation
    • Compteur : Image Generation Meter
    • Prix : 0,05 $ par image
    • Offre gratuite : 10 images
  2. Cliquez sur Save Changes
Produit créé ! Votre facturation est maintenant configurée. Les clients seront automatiquement facturés selon leur utilisation de génération d’images.

Étape 3 : Effectuer un achat test

Avant de commencer à ingérer des événements d’utilisation, nous devons effectuer un achat test.
1

Get your payment link

  1. Dans votre tableau de bord Dodo Payments, allez dans Products
  2. Trouvez votre produit « PixelGen AI - Image Generation »
  3. Cliquez sur le bouton Share à côté de votre produit
  4. Copiez le lien de paiement qui apparaît
Le lien de paiement ressemblera à ceci : https://test.checkout.dodopayments.com/buy/pdt_IgPWlRsfpbPd5jQKezzW1?quantity=1
2

Complete a test purchase

  1. Ouvrez le lien de paiement dans un nouvel onglet de navigateur
  2. Saisissez des informations de paiement de test et finalisez l’achat.
Après le paiement réussi, vous disposerez d’un ID client que nous utiliserons dans notre code applicatif.
3

Find your customer ID

  1. Revenez à votre tableau de bord Dodo Payments
  2. Naviguez vers Customers dans la barre latérale gauche
  3. Trouvez le client que vous venez de créer (avec l’adresse e-mail de test)
  4. Copiez l’ID client – il ressemblera à cus_abc123def456
Conservez cet ID client – nous le coderons en dur dans notre code d’exemple pour garantir que les événements sont correctement suivis.

Étape 4 : Construire l’application d’exemple

Maintenant que notre configuration de facturation est complète et qu’un client test a été créé. Construisons l’application d’exemple PixelGen AI qui génère des images et suit automatiquement l’utilisation pour la facturation.
1

Set up your project

Créez un nouveau répertoire et initialisez le projet :
mkdir pixelgen-ai
cd pixelgen-ai
npm init -y
2

Install dependencies

Installez les packages nécessaires :
npm install openai dotenv
npm install -D typescript @types/node ts-node
3

Create the main application

Créez un fichier nommé index.ts et copiez ce code complet d’application :
Voici l’application PixelGen AI complète avec facturation intégrée :
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);
}

Étape 5 : Tester votre application d’exemple

Il est temps de tester notre service PixelGen AI d’exemple et de voir la facturation en action ! Assurons-nous que tout fonctionne de bout en bout.
Ce que nous testons : Nous allons générer quelques images, vérifier que les événements arrivent bien chez Dodo Payments, et confirmer que les calculs de facturation sont corrects.
1

Set up your environment

Commencez par vérifier que tout est configuré :
  1. Créez un fichier .env dans votre répertoire pixelgen-ai
  2. Ajoutez vos clés API réelles :
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. Installez les dépendances et exécutez l’application :
npm install
npm start
Assurez-vous d’utiliser de vraies clés API et de mettre à jour l’ID client codé en dur dans le code avec votre ID client réel de l’étape 3 !
2

Generate your first test image

Lorsque l’application démarre, vous verrez :
PixelGen AI - Image Generator with Usage Billing

Enter your image prompt:
Essayez cette invite : “Un robot mignon peignant un paysage”Vous devriez voir une sortie comme ceci :
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 vous voyez « Usage event sent successfully », votre intégration de facturation fonctionne !
3

Generate a few more images

Générons encore 2 à 3 images pour tester plusieurs événements. Essayez ces invites :
  1. “Un coucher de soleil sur des montagnes avec des nuages violets”
  2. “Une machine à café steampunk dans une cuisine victorienne”
  3. “Un dragon amical lisant un livre dans une bibliothèque”
Chaque fois, surveillez le message « Usage event sent successfully ».
4

Check your Dodo Payments dashboard

Vérifions maintenant que les événements sont bien reçus :
  1. Ouvrez votre tableau de bord Dodo Payments
  2. Allez dans Facturation d’utilisation → *CompteursCompteur de génération d’images
  3. Cliquez sur l’onglet Événements
  4. Vous devriez voir vos événements de génération d’images listés
À quoi faire attention :
  • Nom des événements : image.generated
  • ID client : Votre ID client de test
Vous devriez voir un événement pour chaque image générée !
5

Verify billing calculations

Vérifions si le comptage d’utilisation fonctionne :
  1. Dans votre compteur, allez à l’onglet Clients
  2. Trouvez votre client de test
  3. Vérifiez la colonne “Unités consommées”
6

Test the billing threshold

Dépassons le niveau gratuit pour voir la facturation en action :
  1. Générez 8 images supplémentaires (pour atteindre 12 au total)
  2. Vérifiez à nouveau votre tableau de bord de compteur
  3. Vous devriez maintenant voir :
    • Unités consommées : 12
    • Unités facturables : 2 (12 - 10 gratuites)
    • Montant de la facturation : 0,10 $
Succès ! Votre facturation basée sur l’utilisation fonctionne parfaitement. Les clients seront automatiquement facturés selon leur véritable utilisation de génération d’images.

Dépannage

Problèmes courants et leurs solutions :
Causes possibles :
  • Le nom de l’événement ne correspond pas exactement à la configuration du compteur
  • L’ID client n’existe pas dans votre compte
  • La clé API est invalide ou expirée
  • Problèmes de connectivité réseau
Solutions :
  1. Vérifiez que le nom de l’événement correspond exactement à la configuration du compteur (sensible à la casse)
  2. Vérifiez que l’ID client existe dans Dodo Payments
  3. Testez la clé API avec un appel API simple
  4. Vérifiez la connectivité réseau et les paramètres de pare-feu

Félicitations ! Vous avez construit PixelGen AI

Vous avez réussi à créer un extrait pour la génération d’images AI avec facturation basée sur l’utilisation ! Voici ce que vous avez accompli :

Usage Meter

Création du « Image Generation Meter » qui suit chaque événement de génération d’image

Billing Product

Mise en place d’une tarification à 0,05 $ par image avec 10 images gratuites par mois

AI Application

Création d’une application TypeScript fonctionnelle qui génère des images via DALL·E d’OpenAI

Automated Billing

Intégration d’un suivi d’événements en temps réel qui facture automatiquement les clients