Zum Hauptinhalt springen
In diesem Tutorial erstellen Sie PixelGen AI - einen Beispiel-KI-Bildgenerierungsdienst, der die nutzungsbasierte Abrechnung demonstriert. Wir werden alles von Grund auf neu erstellen: den Abrechnungszähler, die Produktkonfiguration und den Beispielanwendungscode, der Bilder generiert und die Nutzung in Echtzeit verfolgt.
Dieses Tutorial liefert Beispielimplementierungscode für eine terminalbasierte Anwendung. Du kannst diesen Code für dein spezifisches Framework (React, Vue, Angular usw.) anpassen und die Methode zur Benutzereingabe gemäß den Anforderungen deiner Anwendung individualisieren.
Am Ende dieses Tutorials haben Sie einen funktionierenden Beispielservice, der:
  • Bilder mit der DALL-E API von OpenAI generiert
  • Jede Bildgenerierung zur Abrechnung verfolgt
  • Kunden automatisch basierend auf der Nutzung belastet
  • Verschiedene Qualitätsstufen (Standard vs. HD) behandelt

Was wir bauen

Lassen Sie uns damit beginnen, unseren PixelGen AI-Dienst zu verstehen:
  • Dienst: KI-Bildgenerierung mit der DALL-E API von OpenAI
  • Preismodell: Abrechnung pro Bild (0,05 $ pro Bild)
  • Kostenloses Kontingent: 10 kostenlose Bilder pro Kunde und Monat
  • Qualitätsoptionen: Standard- und HD-Bilder (zum Zweck der Einfachheit zum gleichen Preis)
Bevor wir beginnen, stelle sicher, dass du Folgendes hast:
  • Ein Dodo Payments-Konto
  • Zugriff auf die API von OpenAI
  • Grundkenntnisse in TypeScript/Node.js

Schritt 1: Erstellen Sie Ihren Nutzungsmesser

Wir beginnen damit, einen Zähler in Ihrem Dodo Payments-Dashboard zu erstellen, der jede Bildgenerierung unseres Dienstes verfolgt. Denken Sie daran als den “Zähler”, der abrechnungsfähige Ereignisse verfolgt.
Was wir bauen: Einen Meter namens “Image Generation Meter”, der jedes Mal zählt, wenn jemand über unseren Dienst ein Bild erzeugt.
1

Open the Meters section

  1. Melde dich bei deinem Dodo Payments-Dashboard an
  2. Klicke in der linken Seitenleiste auf Meters
  3. Klicke auf die Schaltfläche Create Meter
Du solltest ein Formular sehen, in dem wir unsere Bildgenerierungserfassung konfigurieren.
2

Fill in the basic meter information

Jetzt geben wir die spezifischen Details für unseren PixelGen AI-Dienst ein:Meter Name: Kopiere und füge diesen Wert exakt ein → Image Generation MeterBeschreibung: Kopiere diesen Text → Tracks each AI image generation request made by customers using our DALL-E powered serviceEvent Name: Das ist entscheidend – kopiere genau → image.generated
Der Ereignisname image.generated muss exakt mit dem übereinstimmen, was wir später aus unserem Anwendungscode senden werden. Ereignisnamen sind case-sensitive!
3

Configure how we count images

Lege die Aggregation fest (wie der Meter unsere Ereignisse zählt):Aggregationstyp: Wählen Sie Zählen aus dem Dropdown-MenüMessgröße: Gib ein → images
Wir verwenden „Count“, weil wir pro generiertem Bild abrechnen wollen, nicht nach Größe oder Generierungsdauer. Jedes erfolgreiche Bild = 1 abrechenbare Einheit.
4

Add quality filtering

Wir möchten sicherstellen, dass wir nur legitime Bilder zählen (keine Testläufe oder Fehler):
  1. Ereignisfilter aktivieren: Schalte dies AN
  2. Filterlogik: Wähle OR (das bedeutet „zähle, wenn EINE dieser Bedingungen erfüllt ist“)
  3. Füge die erste Bedingung hinzu:
    • Property Key: quality
    • Vergleichsoperator: equals
    • Wert: standard
  4. Klicke auf „Condition hinzufügen“ für die zweite Bedingung:
    • Property Key: quality
    • Vergleichsoperator: equals
    • Wert: hd
Diese Einrichtung bedeutet, dass wir nur Ereignisse zählen, bei denen die Qualität entweder „standard“ ODER „hd“ ist – Testereignisse oder fehlerhafte Anfragen werden somit herausgefiltert.
5

Create your meter

  1. Überprüfe, ob alle Einstellungen mit den oben genannten Werten übereinstimmen
  2. Klicke auf Create Meter
Meter erstellt! Dein „Image Generation Meter“ ist nun bereit, Bildgenerierungen zu zählen. Als nächstes verbinden wir es mit einem Billing-Produkt.

Schritt 2: Erstellen Sie Ihr Abrechnungsprodukt

Jetzt müssen wir ein Produkt erstellen, das unsere Preisgestaltung definiert (0,05 $ pro Bild mit 10 kostenlosen Bildern). Dies verbindet unseren Zähler mit der tatsächlichen Abrechnung.
Was wir bauen: Ein Produkt namens „PixelGen AI - Image Generation“, das $0,05 pro Bild nach den ersten 10 kostenlosen Bildern pro Monat berechnet.
1

Navigate to Products

  1. Klicke im Dodo Payments-Dashboard in der linken Seitenleiste auf Products
  2. Klicke auf Create Product
  3. Wähle Usage-Based als Produkttyp
Das teilt Dodo Payments mit, dass die Abrechnung auf Basis der Meter-Nutzung erfolgt und nicht auf einem festen Abonnement.
2

Enter product details

Fülle diese genauen Werte für unseren PixelGen AI-Dienst aus:Produktname: Kopiere dies → PixelGen AI - Image GenerationBeschreibung: Kopiere dies → AI-powered image generation service with pay-per-use billingProduktbild: Laden Sie ein klares, relevantes Bild hoch.
Diese Angaben erscheinen auf Kundenrechnungen, also halte sie klar und professionell.
3

Connect your meter

Bevor Sie Ihren Zähler verbinden, stellen Sie sicher, dass Sie Nutzungsbasierte Abrechnung als Preisart für Ihr Produkt ausgewählt haben.Stelle zusätzlich den Fixed Price auf 0, damit Kunden ausschließlich auf Grundlage ihrer Nutzung berechnet werden, ohne Grundgebühr.Jetzt verlinken Sie den Zähler, den Sie gerade erstellt haben:
  1. Scrollen Sie nach unten zum Abschnitt Zugeordneter Zähler
  2. Klicken Sie auf Zähler hinzufügen
  3. Wählen Sie im Dropdown “Bildgenerierungszähler” (den, den Sie zuvor erstellt haben)
  4. Bestätigen Sie, dass er in Ihrer Produktkonfiguration angezeigt wird
Dein Meter ist jetzt erfolgreich mit diesem Produkt verbunden.
4

Set your pricing

Hier legen wir unser Geschäftsmodell fest:
Preis pro Einheit: Gib ein → 0.05 (das sind $0,05 pro Bild)Kostenlose Schwelle: Gib ein → 10 (Kunden erhalten 10 kostenlose Bilder pro Monat)
So funktioniert die Abrechnung: Wenn ein Kunde 25 Bilder in einem Monat generiert, werden ihm 15 Bilder in Rechnung gestellt (25 - 10 kostenlose) = 15 × 0,05=0,05 = 0,75
5

Save your product

  1. Überprüfe alle Einstellungen:
    • Name: PixelGen AI - Image Generation
    • Meter: Image Generation Meter
    • Preis: $0,05 pro Bild
    • Gratis-Stufe: 10 Bilder
  2. Klicke auf Save Changes
Produkt erstellt! Deine Abrechnung ist nun konfiguriert. Kunden werden automatisch basierend auf ihrer Bildgenerierung-Nutzung belastet.

Schritt 3: Machen Sie einen Testkauf

Bevor wir mit der Erfassung von Nutzungsevents beginnen, müssen wir einen Testkauf tätigen.
1

Get your payment link

  1. Gehe in deinem Dodo Payments-Dashboard zu Products
  2. Suche dein Produkt „PixelGen AI - Image Generation“
  3. Klicke auf die Schaltfläche Share neben deinem Produkt
  4. Kopiere den angezeigten Zahlungslink
Der Zahlungslink sieht etwa so aus: https://test.checkout.dodopayments.com/buy/pdt_IgPWlRsfpbPd5jQKezzW1?quantity=1
2

Complete a test purchase

  1. Öffne den Zahlungslink in einem neuen Browser-Tab
  2. Gib Testzahlungsdaten ein und schließe den Kauf ab.
Nach erfolgreicher Zahlung erhältst du eine Kunden-ID, die wir in unserem Anwendungscode verwenden werden.
3

Find your customer ID

  1. Kehre zu deinem Dodo Payments-Dashboard zurück
  2. Navigiere in der linken Seitenleiste zu Customers
  3. Finde den Kunden, den du gerade erstellt hast (mit der Test-E-Mail)
  4. Kopiere die Kunden-ID – sie sieht aus wie cus_abc123def456
Speichere diese Kunden-ID – wir werden sie in unserem Beispielanwendungscode fest codieren, um sicherzustellen, dass Ereignisse korrekt nachverfolgt werden.

Schritt 4: Erstellen Sie die Beispielanwendung

Jetzt haben wir unsere Abrechnung eingerichtet und einen Testkunden erstellt. Lassen Sie uns die Beispielanwendung PixelGen AI erstellen, die Bilder generiert und automatisch die Nutzung zur Abrechnung verfolgt.
1

Set up your project

Erstelle ein neues Verzeichnis und initialisiere das Projekt:
mkdir pixelgen-ai
cd pixelgen-ai
npm init -y
2

Install dependencies

Installiere die benötigten Pakete:
npm install openai dotenv
npm install -D typescript @types/node ts-node
3

Create the main application

Erstelle eine Datei namens index.ts und kopiere diesen vollständigen Anwendungscode hinein:
Hier ist die vollständige PixelGen AI-Anwendung mit integrierter Abrechnung:
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);
}

Schritt 5: Testen Sie Ihre Beispielanwendung

Es ist Zeit, unseren Beispielservice PixelGen AI zu testen und die Abrechnung in Aktion zu sehen! Lassen Sie uns sicherstellen, dass alles von Anfang bis Ende funktioniert.
Was wir testen: Wir generieren einige Bilder, prüfen, ob die Ereignisse bei Dodo Payments ankommen, und bestätigen, dass die Abrechnungsberechnungen korrekt sind.
1

Set up your environment

Stelle zunächst sicher, dass du alles konfiguriert hast:
  1. Erstelle eine .env-Datei in deinem pixelgen-ai-Verzeichnis
  2. Füge deine tatsächlichen API-Schlüssel hinzu:
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. Installieren Sie Abhängigkeiten und führen Sie die App aus:
npm install
npm start
Achte darauf, echte API-Schlüssel zu verwenden und die hartcodierte Kunden-ID im Code durch deine tatsächliche Kunden-ID aus Schritt 3 zu ersetzen!
2

Generate your first test image

Wenn die App startet, siehst du:
PixelGen AI - Image Generator with Usage Billing

Enter your image prompt:
Versuchen Sie diesen Prompt: “Ein süßer Roboter malt eine Landschaft”Sie sollten eine Ausgabe wie diese sehen:
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...
Wenn du „Usage event sent successfully“ siehst, funktioniert deine Billing-Integration!
3

Generate a few more images

Generiere 2–3 weitere Bilder, um mehrere Ereignisse zu testen. Versuche diese Prompts:
  1. “Ein Sonnenuntergang über Bergen mit lila Wolken”
  2. “Eine Steampunk-Kaffeemaschine in einer viktorianischen Küche”
  3. “Ein freundlicher Drache, der in einer Bibliothek ein Buch liest”
Achte jedes Mal auf die Meldung „Usage event sent successfully“.
4

Check your Dodo Payments dashboard

Jetzt überprüfen wir, ob die Ereignisse empfangen werden:
  1. Öffnen Sie Ihr Dodo Payments-Dashboard
  2. Gehen Sie zu Nutzungsabrechnung → *ZählerBildgenerierungszähler
  3. Klicken Sie auf die Registerkarte Ereignisse
  4. Sie sollten Ihre Bildgenerierungsereignisse aufgelistet sehen
Worauf du achten solltest:
  • Ereignisnamen: image.generated
  • Kunden-ID: Deine Testkunden-ID
Du solltest für jedes generierte Bild ein Ereignis sehen!
5

Verify billing calculations

Überprüfen wir, ob die Nutzungserfassung funktioniert:
  1. Gehen Sie in Ihrem Zähler zur Registerkarte Kunden
  2. Finden Sie Ihren Testkunden
  3. Überprüfen Sie die Spalte “Verbrauchte Einheiten”
6

Test the billing threshold

Lass uns die kostenlose Stufe überschreiten, um die Abrechnung in Aktion zu sehen:
  1. Generieren Sie 8 weitere Bilder (um insgesamt 12 zu erreichen)
  2. Überprüfen Sie Ihr Zähler-Dashboard erneut
  3. Sie sollten jetzt sehen:
    • Verbrauchte Einheiten: 12
    • Abrechnungsfähige Einheiten: 2 (12 - 10 kostenlos)
    • Abrechnungsbetrag: 0,10 $
Erfolg! Deine nutzungsbasierte Abrechnung funktioniert einwandfrei. Kunden werden automatisch basierend auf ihrem tatsächlichen Bildgenerierungsverbrauch belastet.

Fehlersuche

Häufige Probleme und deren Lösungen:
Mögliche Ursachen:
  • Ereignisname stimmt nicht exakt mit der Meter-Konfiguration überein
  • Kunden-ID existiert nicht in deinem Konto
  • API-Schlüssel ist ungültig oder abgelaufen
  • Netzwerkverbindungsprobleme
Lösungen:
  1. Überprüfe, ob der Ereignisname exakt mit der Meter-Konfiguration übereinstimmt (case-sensitive)
  2. Stelle sicher, dass die Kunden-ID in Dodo Payments existiert
  3. Teste den API-Schlüssel mit einem einfachen API-Aufruf
  4. Prüfe die Netzwerkverbindung und Firewall-Einstellungen

Herzlichen Glückwunsch! Sie haben PixelGen AI erstellt

Sie haben erfolgreich einen Snippet für die KI-Bildgenerierung mit nutzungsbasierter Abrechnung erstellt! Hier ist, was Sie erreicht haben:

Usage Meter

Erstellt wurde ein „Image Generation Meter“, das jedes Bildgenerierungsereignis verfolgt

Billing Product

Die Preisgestaltung wurde auf $0,05 pro Bild mit 10 kostenlosen Bildern pro Monat festgelegt

AI Application

Eine funktionierende TypeScript-App wurde erstellt, die Bilder mit OpenAIs DALL-E generiert

Automated Billing

Eine Echtzeit-Ereignisverfolgung wurde integriert, die Kunden automatisch abrechnet