Hoppa till huvudinnehåll
I den här handledningen kommer du att bygga PixelGen AI - en exempel på en AI-bildgenereringstjänst som demonstrerar användningsbaserad fakturering. Vi kommer att skapa allt från grunden: faktureringsmätaren, produktkonfigurationen och exempelapplikationskoden som genererar bilder och spårar användning i realtid.
Denna handledning innehåller exempel på implementationskod för en terminalbaserad applikation. Du kan anpassa denna kod för ditt specifika ramverk (React, Vue, Angular osv.) och skräddarsy användarens inmatningsmetod utifrån din applikations behov.
I slutet av denna handledning kommer du att ha en fungerande exempelservice som:
  • Genererar bilder med OpenAI:s DALL-E API
  • Spårar varje bildgenerering för fakturering
  • Tar betalt av kunder automatiskt baserat på användning
  • Hanterar olika kvalitetsnivåer (standard vs HD)

Vad vi bygger

Låt oss börja med att förstå vår PixelGen AI-tjänst:
  • Tjänst: AI-bildgenerering med OpenAI:s DALL-E API
  • Prismodell: Betalning per bild (0,05 USD per bild)
  • Gratisnivå: 10 gratis bilder per kund per månad
  • Kvalitetsalternativ: Standard och HD-bilder (samma pris för enkelhet)
Innan vi börjar, se till att du har:
  • Ett Dodo Payments-konto
  • Tillgång till OpenAIs API
  • Grundläggande kunskaper i TypeScript/Node.js

Steg 1: Skapa din användningsmätare

Vi börjar med att skapa en mätare i din Dodo Payments-instrumentpanel som kommer att spåra varje bild som vår tjänst genererar. Tänk på detta som “räknaren” som spårar faktureringsbara händelser.
Vad vi bygger: En mätare kallad “Image Generation Meter” som räknar varje gång någon genererar en bild med vår tjänst.
1

Open the Meters section

  1. Logga in på din Dodo Payments-översikt
  2. Klicka på Meters i vänstra sidomenyn
  3. Klicka på knappen Create Meter
Du ska nu se ett formulär där vi ställer in vår bildgenereringsspårning.
2

Fill in the basic meter information

Nu anger vi de specifika detaljerna för vår PixelGen AI-tjänst:Mätarnamn: Kopiera och klistra in exakt detta → Image Generation MeterBeskrivning: Kopiera detta → Tracks each AI image generation request made by customers using our DALL-E powered serviceHändelsenamn: Detta är avgörande - kopiera exakt → image.generated
Händelsenamnet image.generated måste matcha exakt det vi senare skickar från vår applikationskod. Händelsenamn är skiftlägeskänsliga!
3

Configure how we count images

Ställ in aggregeringen (hur mätaren räknar våra händelser):Aggregeringstyp: Välj Räkna från rullgardinsmenynMätenhet: Skriv → images
Vi använder “Count” eftersom vi vill fakturera per genererad bild, inte efter storlek eller genereringstid. Varje lyckad bild = 1 fakturerbar enhet.
4

Add quality filtering

Vi vill se till att vi bara räknar legitima bilder (inte testkörningar eller misslyckanden):
  1. Aktivera händelsefiltrering: Slå på detta ON
  2. Filtrerlogik: Välj OR (detta betyder “räkna om NÅGON av dessa villkor är sanna”)
  3. Lägg till det första villkoret:
    • Egenskapsnyckel: quality
    • Jämförare: equals
    • Värde: standard
  4. Klicka på “Add Condition” för det andra:
    • Egenskapsnyckel: quality
    • Jämförare: equals
    • Värde: hd
Denna uppsättning innebär att vi bara räknar händelser där kvaliteten är antingen “standard” ELLER “hd” – vilket filtrerar bort testhändelser eller felaktiga förfrågningar.
5

Create your meter

  1. Dubbelkolla att alla inställningar matchar värdena ovan
  2. Klicka på Create Meter
Mätare skapad! Din “Image Generation Meter” är nu redo att börja räkna bildgenereringar. Nästa steg är att koppla den till en faktureringsprodukt.

Steg 2: Skapa din faktureringsprodukt

Nu behöver vi skapa en produkt som definierar vår prissättning (0,05 USD per bild med 10 gratis bilder). Detta kopplar vår mätare till faktisk fakturering.
Vad vi bygger: En produkt kallad “PixelGen AI - Image Generation” som tar $0.05 per bild efter de första 10 gratisbilderna varje månad.
1

Navigate to Products

  1. I din Dodo Payments-översikt, klicka på Products i vänstra sidomenyn
  2. Klicka på Create Product
  3. Välj Usage-Based som produkttyp
Detta berättar för Dodo Payments att faktureringen baseras på mätaranvändning, inte en fast prenumeration.
2

Enter product details

Fyll i dessa exakta värden för vår PixelGen AI-tjänst:Produktnamn: Kopiera detta → PixelGen AI - Image GenerationBeskrivning: Kopiera detta → AI-powered image generation service with pay-per-use billingProduktbild: Ladda upp en tydlig, relevant bild.
Dessa kommer att visas på kundfakturor, så gör dem tydliga och professionella.
3

Connect your meter

Innan du kopplar din mätare, se till att du har valt Användningsbaserad fakturering som prissättningsalternativ för din produkt.Ställ dessutom in Fast pris till 0 för att säkerställa att kunder bara debiteras baserat på sin användning, utan någon grundavgift.Nu, koppla den mätare du just skapade:
  1. Scrolla ner till avsnittet Associerad mätare
  2. Klicka på Lägg till mätare
  3. Från rullgardinsmenyn, välj “Bildgenereringsmätare” (den du skapade tidigare)
  4. Bekräfta att den visas i din produktkonfiguration
Din mätare är nu framgångsrikt kopplad till denna produkt.
4

Set your pricing

Här definierar vi vår affärsmodell:
Pris per enhet: Ange → 0.05 (detta är $0.05 per bild)Gratis tröskel: Ange → 10 (kunder får 10 gratisbilder per månad)
Hur fakturering fungerar: Om en kund genererar 25 bilder under en månad kommer de att debiteras för 15 bilder (25 - 10 gratis) = 15 × 0.05=0.05 = 0.75
5

Save your product

  1. Granska alla dina inställningar:
    • Namn: PixelGen AI - Image Generation
    • Mätare: Image Generation Meter
    • Pris: $0.05 per bild
    • Gratisnivå: 10 bilder
  2. Klicka på Save Changes
Produkt skapad! Din fakturering är nu konfigurerad. Kunder kommer automatiskt att debiteras baserat på sitt bildgenereringsanvändande.

Steg 3: Gör ett testköp

Innan vi börjar ta emot användningshändelser, behöver vi göra ett testköp.
1

Get your payment link

  1. Gå till Products i din Dodo Payments-översikt
  2. Hitta produkten “PixelGen AI - Image Generation”
  3. Klicka på knappen Share bredvid din produkt
  4. Kopiera betalningslänken som visas
Betalningslänken kommer att se ut ungefär så här: https://test.checkout.dodopayments.com/buy/pdt_IgPWlRsfpbPd5jQKezzW1?quantity=1
2

Complete a test purchase

  1. Öppna betalningslänken i en ny webbläsarflik
  2. Ange testbetalningsuppgifter och slutför köpet.
Efter lyckad betalning får du ett kund-ID som vi kommer använda i vår applikationskod.
3

Find your customer ID

  1. Gå tillbaka till din Dodo Payments-översikt
  2. Gå till Customers i vänstra sidomenyn
  3. Hitta den kund du precis skapade (med testmailen)
  4. Kopiera kund-ID:t – det kommer se ut som cus_abc123def456
Spara detta kund-ID – vi kommer att hårdkoda det i vår exempelapplikation för att säkerställa att händelser spåras korrekt.

Steg 4: Bygg exempelapplikationen

Nu har vi vår fakturering konfigurerad och en testkund skapad. Låt oss bygga exempelapplikationen PixelGen AI som genererar bilder och automatiskt spårar användning för fakturering.
1

Set up your project

Skapa en ny katalog och initiera projektet:
mkdir pixelgen-ai
cd pixelgen-ai
npm init -y
2

Install dependencies

Installera de paket vi behöver:
npm install openai dotenv
npm install -D typescript @types/node ts-node
3

Create the main application

Skapa en fil med namnet index.ts och klistra in denna kompletta applikationskod:
Här är den kompletta PixelGen AI-applikationen med integrerad fakturering:
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);
}

Steg 5: Testa din exempelapplikation

Dags att testa vår exempel PixelGen AI-tjänst och se faktureringen i aktion! Låt oss se till att allt fungerar från början till slut.
Vad vi testar: Vi kommer att generera några bilder, verifiera att händelserna når Dodo Payments och bekräfta att faktureringen räknas korrekt.
1

Set up your environment

Först, kontrollera att du har allt konfigurerat:
  1. Skapa en fil .env i din katalog pixelgen-ai
  2. Lägg till dina riktiga API-nycklar:
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. Installera beroenden och kör appen:
npm install
npm start
Se till att använda riktiga API-nycklar och uppdatera det hårdkodade kund-ID:t i koden med ditt faktiska kund-ID från steg 3!
2

Generate your first test image

När appen startar kommer du att se:
PixelGen AI - Image Generator with Usage Billing

Enter your image prompt:
Prova denna prompt: “En söt robot som målar ett landskap”Du bör se utdata som detta:
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...
Om du ser “Usage event sent successfully” fungerar din faktureringsintegrering!
3

Generate a few more images

Låt oss generera 2–3 bilder till för att testa flera händelser. Prova dessa uppmaningar:
  1. “En solnedgång över bergen med lila moln”
  2. “En steampunk-kaffemaskin i ett viktorianskt kök”
  3. “En vänlig drake som läser en bok i ett bibliotek”
Varje gång, håll utkik efter meddelandet “Usage event sent successfully”.
4

Check your Dodo Payments dashboard

Nu verifierar vi att händelserna tas emot:
  1. Öppna din Dodo Payments-instrumentpanel
  2. Gå till Användningsfakturering → *MätareBildgenereringsmätare
  3. Klicka på fliken Händelser
  4. Du bör se dina bildgenereringshändelser listade
Vad du ska leta efter:
  • Händelsenamn: image.generated
  • Kund-ID: Ditt testkund-ID
Du borde se en händelse för varje bild du genererade!
5

Verify billing calculations

Låt oss kontrollera att användningsräkningen fungerar:
  1. I din mätare, gå till fliken Kunder
  2. Hitta din testkund
  3. Kontrollera kolumnen “Förbrukade enheter”
6

Test the billing threshold

Låt oss överskrida gratisnivån för att se faktureringen i praktiken:
  1. Generera 8 fler bilder (för att nå totalt 12)
  2. Kontrollera din mätardashboard igen
  3. Du bör nu se:
    • Förbrukade enheter: 12
    • Fakturerbara enheter: 2 (12 - 10 gratis)
    • Faktureringsbelopp: 0,10 USD
Lyckat! Din användningsbaserade fakturering fungerar perfekt. Kunder kommer automatiskt att debiteras baserat på sin faktiska bildgenerering.

Felsökning

Vanliga problem och deras lösningar:
Möjliga orsaker:
  • Händelsenamnet matchar inte mätarkonfigurationen exakt
  • Kund-ID:t finns inte i ditt konto
  • API-nyckeln är ogiltig eller har gått ut
  • Nätverksanslutningen fungerar inte
Lösningar:
  1. Kontrollera att händelsenamnet matchar mätarkonfigurationen exakt (skiftlägeskänsligt)
  2. Kontrollera att kund-ID:t finns i Dodo Payments
  3. Testa API-nyckeln med ett enkelt API-anrop
  4. Kontrollera nätverksanslutning och brandväggsinställningar

Grattis! Du har byggt PixelGen AI

Du har framgångsrikt skapat en snutt för AI-bildgenerering med användningsbaserad fakturering! Här är vad du har åstadkommit:

Usage Meter

Skapade “Image Generation Meter” som spårar varje bildgenereringsevent

Billing Product

Konfigurerade priset till $0.05 per bild med 10 gratisbilder per månad

AI Application

Byggde en fungerande TypeScript-app som genererar bilder med OpenAIs DALL-E

Automated Billing

Integrerade realtids händelsespårning som automatiskt fakturerar kunder