Langsung ke konten utama
Dalam tutorial ini, Anda akan membangun PixelGen AI - sebuah layanan generasi gambar AI contoh yang menunjukkan penagihan berdasarkan penggunaan. Kita akan membuat semuanya dari awal: meteran penagihan, konfigurasi produk, dan kode aplikasi contoh yang menghasilkan gambar dan melacak penggunaan secara real-time.
Tutorial ini menyediakan contoh kode implementasi untuk aplikasi berbasis terminal. Anda dapat memodifikasi kode ini untuk framework spesifik Anda (React, Vue, Angular, dll.) dan menyesuaikan metode input pengguna sesuai kebutuhan aplikasi Anda.
Pada akhir tutorial ini, Anda akan memiliki layanan contoh yang berfungsi yang:
  • Menghasilkan gambar menggunakan API DALL-E dari OpenAI
  • Melacak setiap generasi gambar untuk penagihan
  • Menagih pelanggan secara otomatis berdasarkan penggunaan
  • Menangani berbagai tingkat kualitas (standar vs HD)

Apa yang Kita Bangun

Mari kita mulai dengan memahami layanan PixelGen AI kita:
  • Layanan: Generasi gambar AI menggunakan API DALL-E dari OpenAI
  • Model Harga: Bayar per gambar ($0,05 per gambar)
  • Tingkat Gratis: 10 gambar gratis per pelanggan per bulan
  • Opsi Kualitas: Gambar standar dan HD (harga yang sama untuk kesederhanaan)
Sebelum kita mulai, pastikan Anda memiliki:
  • Akun Dodo Payments
  • Akses ke API OpenAI
  • Pemahaman dasar tentang TypeScript/Node.js

Langkah 1: Buat Meter Penggunaan Anda

Kita akan mulai dengan membuat meter di dasbor Dodo Payments Anda yang akan melacak setiap gambar yang dihasilkan layanan kita. Anggap ini sebagai “penghitung” yang melacak peristiwa yang dapat ditagih.
Apa yang sedang kami bangun: Sebuah meter bernama “Image Generation Meter” yang menghitung setiap kali seseorang menghasilkan gambar menggunakan layanan kami.
1

Open the Meters section

  1. Masuk ke dasbor Dodo Payments Anda
  2. Klik Meters di bilah sisi kiri
  3. Klik tombol Create Meter
Anda akan melihat formulir tempat kita akan mengonfigurasi pelacakan pembuatan gambar kita.
2

Fill in the basic meter information

Sekarang kita akan memasukkan detail spesifik untuk layanan PixelGen AI kami:Nama Meter: Salin dan tempel persis ini → Image Generation MeterDeskripsi: Salin ini → Tracks each AI image generation request made by customers using our DALL-E powered serviceNama Event: Ini sangat penting - salin persis → image.generated
Nama event image.generated harus cocok persis dengan yang akan kita kirim dari kode aplikasi nanti. Nama event peka terhadap huruf besar/kecil!
3

Configure how we count images

Atur agregasi (bagaimana meter menghitung event kita):Tipe Agregasi: Pilih Hitung dari dropdownSatuan Pengukuran: Ketik → images
Kami menggunakan “Count” karena kami ingin menagih per gambar yang dibuat, bukan berdasarkan ukuran atau waktu pembuatan. Setiap gambar berhasil = 1 unit yang dapat ditagih.
4

Add quality filtering

Kita ingin memastikan kita hanya menghitung gambar yang sah (bukan percobaan atau kegagalan):
  1. Aktifkan Event Filtering: Geser ini ON
  2. Logika Filter: Pilih OR (ini berarti “hitung jika SALAH SATU dari kondisi ini benar”)
  3. Tambahkan kondisi pertama:
    • Property Key: quality
    • Comparator: equals
    • Value: standard
  4. Klik “Add Condition” untuk yang kedua:
    • Property Key: quality
    • Comparator: equals
    • Value: hd
Pengaturan ini berarti kita hanya akan menghitung event di mana kualitasnya “standard” ATAU “hd” - menyaring event uji atau permintaan yang rusak.
5

Create your meter

  1. Periksa kembali bahwa semua pengaturan Anda sesuai dengan nilai di atas
  2. Klik Create Meter
Meter created! “Image Generation Meter” Anda sekarang siap mulai menghitung pembuatan gambar. Selanjutnya, kita akan menghubungkannya ke produk penagihan.

Langkah 2: Buat Produk Penagihan Anda

Sekarang kita perlu membuat produk yang mendefinisikan harga kita ($0,05 per gambar dengan 10 gambar gratis). Ini menghubungkan meter kita ke penagihan yang sebenarnya.
Apa yang sedang kami bangun: Sebuah produk bernama “PixelGen AI - Image Generation” yang mengenakan biaya $0.05 per gambar setelah 10 gambar gratis pertama setiap bulan.
1

Navigate to Products

  1. Di dasbor Dodo Payments Anda, klik Products di bilah sisi kiri
  2. Klik Create Product
  3. Pilih Usage-Based sebagai tipe produk
Ini memberi tahu Dodo Payments bahwa penagihan akan didasarkan pada penggunaan meter, bukan langganan tetap.
2

Enter product details

Isi nilai-nilai ini persis untuk layanan PixelGen AI kami:Product Name: Salin ini → PixelGen AI - Image GenerationDeskripsi: Salin ini → AI-powered image generation service with pay-per-use billingGambar Produk: Unggah gambar yang jelas dan relevan.
Ini akan muncul di faktur pelanggan, jadi buatlah jelas dan profesional.
3

Connect your meter

Sebelum menghubungkan meter Anda, pastikan Anda telah memilih Penagihan Berdasarkan Penggunaan sebagai tipe harga untuk produk Anda.Selain itu, atur Fixed Price ke 0 untuk memastikan pelanggan hanya dikenakan biaya berdasarkan penggunaan mereka, tanpa biaya dasar.Sekarang, tautkan meter yang baru saja Anda buat:
  1. Gulir ke bawah ke bagian Meter Terkait
  2. Klik Tambahkan Meter
  3. Dari dropdown, pilih “Meter Generasi Gambar” (yang Anda buat sebelumnya)
  4. Konfirmasi bahwa itu muncul dalam konfigurasi produk Anda
Meter Anda sekarang berhasil terhubung ke produk ini.
4

Set your pricing

Di sinilah kita mendefinisikan model bisnis kita:
Harga Per Unit: Masukkan → 0.05 (ini $0.05 per gambar)Ambang Gratis: Masukkan → 10 (pelanggan mendapatkan 10 gambar gratis per bulan)
Cara penagihan bekerja: Jika pelanggan menghasilkan 25 gambar dalam sebulan, mereka akan dikenakan biaya untuk 15 gambar (25 - 10 gratis) = 15 × 0.05=0.05 = 0.75
5

Save your product

  1. Tinjau semua pengaturan Anda:
    • Nama: PixelGen AI - Image Generation
    • Meter: Image Generation Meter
    • Harga: $0.05 per gambar
    • Tier gratis: 10 gambar
  2. Klik Save Changes
Product created! Penagihan Anda sekarang dikonfigurasi. Pelanggan akan otomatis dikenakan biaya berdasarkan penggunaan pembuatan gambar mereka.

Langkah 3: Lakukan Pembelian Uji Coba

Sebelum kita mulai mengumpulkan peristiwa penggunaan, kita perlu melakukan pembelian uji coba.
1

Get your payment link

  1. Di dasbor Dodo Payments Anda, buka Products
  2. Temukan produk “PixelGen AI - Image Generation” Anda
  3. Klik tombol Share di samping produk Anda
  4. Salin tautan pembayaran yang muncul
Tautan pembayaran akan terlihat seperti ini: https://test.checkout.dodopayments.com/buy/pdt_IgPWlRsfpbPd5jQKezzW1?quantity=1
2

Complete a test purchase

  1. Buka tautan pembayaran di tab browser baru
  2. Masukkan detail pembayaran uji dan selesaikan pembelian.
Setelah pembayaran berhasil, Anda akan mendapatkan ID pelanggan yang akan kita gunakan dalam kode aplikasi.
3

Find your customer ID

  1. Kembali ke dasbor Dodo Payments Anda
  2. Arahkan ke Customers di bilah sisi kiri
  3. Temukan pelanggan yang baru saja Anda buat (dengan email uji)
  4. Salin ID pelanggan - akan terlihat seperti cus_abc123def456
Simpan ID pelanggan ini - kami akan meng-hardcode-nya dalam kode contoh aplikasi kami untuk memastikan event tercatat dengan benar.

Langkah 4: Bangun Aplikasi Contoh

Sekarang kita telah menyelesaikan pengaturan penagihan dan membuat pelanggan uji coba. Mari kita bangun aplikasi PixelGen AI contoh yang menghasilkan gambar dan secara otomatis melacak penggunaan untuk penagihan.
1

Set up your project

Buat direktori baru dan inisialisasi proyeknya:
mkdir pixelgen-ai
cd pixelgen-ai
npm init -y
2

Install dependencies

Instal paket yang kita perlukan:
npm install openai dotenv
npm install -D typescript @types/node ts-node
3

Create the main application

Buat file bernama index.ts dan salin kode aplikasi lengkap ini:
Berikut adalah aplikasi PixelGen AI lengkap dengan penagihan terintegrasi:
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);
}

Langkah 5: Uji Aplikasi Contoh Anda

Saatnya menguji layanan PixelGen AI contoh kita dan melihat penagihan dalam aksi! Mari kita pastikan semuanya berfungsi dari awal hingga akhir.
Apa yang sedang kami uji: Kita akan menghasilkan beberapa gambar, memverifikasi event sampai ke Dodo Payments, dan memastikan perhitungan penagihan benar.
1

Set up your environment

Pertama, pastikan semua sudah dikonfigurasi:
  1. Buat file .env di direktori pixelgen-ai
  2. Tambahkan API key Anda yang sebenarnya:
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. Instal dependensi dan jalankan aplikasi:
npm install
npm start
Pastikan menggunakan API key yang valid dan perbarui ID pelanggan yang di-hardcode di kode dengan ID pelanggan aktual Anda dari Langkah 3!
2

Generate your first test image

Saat aplikasi dimulai, Anda akan melihat:
PixelGen AI - Image Generator with Usage Billing

Enter your image prompt:
Cobalah prompt ini: “Robot lucu melukis pemandangan”Anda seharusnya melihat output seperti ini:
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...
Jika Anda melihat “Usage event sent successfully”, integrasi penagihan Anda berfungsi!
3

Generate a few more images

Mari kita hasilkan 2-3 gambar lagi untuk menguji beberapa event. Coba prompt ini:
  1. “Sebuah matahari terbenam di atas pegunungan dengan awan ungu”
  2. “Sebuah mesin kopi steampunk di dapur Victoria”
  3. “Seekor naga ramah membaca buku di perpustakaan”
Setiap kali, awasi pesan “Usage event sent successfully”.
4

Check your Dodo Payments dashboard

Sekarang mari kita verifikasi event sedang diterima:
  1. Buka dasbor Dodo Payments Anda
  2. Pergi ke Penagihan Penggunaan → *MeterMeter Generasi Gambar
  3. Klik pada tab Peristiwa
  4. Anda seharusnya melihat peristiwa generasi gambar Anda terdaftar
Apa yang harus dicari:
  • Event names: image.generated
  • ID Pelanggan: ID pelanggan uji Anda
Anda harus melihat satu event untuk setiap gambar yang Anda hasilkan!
5

Verify billing calculations

Mari kita periksa apakah penghitungan penggunaan berfungsi:
  1. Di meter Anda, pergi ke tab Pelanggan
  2. Temukan pelanggan uji coba Anda
  3. Periksa kolom “Unit yang Dikonsumsi”
6

Test the billing threshold

Mari kita lampaui tier gratis untuk melihat penagihan berjalan:
  1. Hasilkan 8 gambar lagi (untuk mencapai total 12)
  2. Periksa dasbor meter Anda lagi
  3. Anda sekarang seharusnya melihat:
    • Unit yang dikonsumsi: 12
    • Unit yang dapat ditagih: 2 (12 - 10 gratis)
    • Jumlah penagihan: $0,10
Sukses! Penagihan berbasis penggunaan Anda berfungsi dengan sempurna. Pelanggan akan otomatis dikenakan biaya berdasarkan penggunaan aktual pembuatan gambar mereka.

Pemecahan Masalah

Masalah umum dan solusinya:
Kemungkinan penyebab:
  • Nama event tidak cocok persis dengan konfigurasi meter
  • ID pelanggan tidak ada di akun Anda
  • API key tidak valid atau sudah kedaluwarsa
  • Masalah konektivitas jaringan
Solusi:
  1. Verifikasi nama event cocok persis dengan konfigurasi meter (peka huruf besar/kecil)
  2. Periksa bahwa ID pelanggan ada di Dodo Payments
  3. Uji API key dengan panggilan API sederhana
  4. Periksa konektivitas jaringan dan pengaturan firewall

Selamat! Anda Telah Membangun PixelGen AI

Anda telah berhasil membuat cuplikan untuk generasi gambar AI dengan penagihan berdasarkan penggunaan! Berikut adalah apa yang telah Anda capai:

Usage Meter

Membuat “Image Generation Meter” yang melacak setiap event pembuatan gambar

Billing Product

Mengonfigurasi harga sebesar $0.05 per gambar dengan 10 gambar gratis per bulan

AI Application

Membangun aplikasi TypeScript yang berfungsi yang menghasilkan gambar menggunakan DALL-E OpenAI

Automated Billing

Mengintegrasikan pelacakan event waktu nyata yang secara otomatis menagih pelanggan