> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Membangun Generator Gambar AI dengan Penagihan Berdasarkan Penggunaan

> Ikuti langkah-langkah ini saat kita membangun PixelGen AI - layanan generasi gambar AI dengan penagihan berdasarkan penggunaan

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.

<Note>
  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.
</Note>

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)

<Info>
  Sebelum kita mulai, pastikan Anda memiliki:

  * Akun Dodo Payments
  * Akses ke API OpenAI
  * Pemahaman dasar tentang TypeScript/Node.js
</Info>

## 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.

<Frame>
  <img src="https://mintcdn.com/dodopayments/w9oVTi6CzZMAOQA3/images/usage-based/UBB-2.png?fit=max&auto=format&n=w9oVTi6CzZMAOQA3&q=85&s=f9d85a463fba231437151db3d4a2052a" alt="" style={{ maxHeight: '500px', width: 'auto' }} width="2324" height="1600" data-path="images/usage-based/UBB-2.png" />
</Frame>

<Tip>
  **Apa yang sedang kami bangun**: Sebuah meter bernama "Image Generation Meter" yang menghitung setiap kali seseorang menghasilkan gambar menggunakan layanan kami.
</Tip>

<Steps>
  <Step title="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.
  </Step>

  <Step title="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 Meter`

    **Deskripsi**: Salin ini → `Tracks each AI image generation request made by customers using our DALL-E powered service`

    **Nama Event**: Ini sangat penting - salin persis → `image.generated`

    <Warning>
      Nama event `image.generated` harus cocok persis dengan yang akan kita kirim dari kode aplikasi nanti. Nama event peka terhadap huruf besar/kecil!
    </Warning>
  </Step>

  <Step title="Configure how we count images">
    Atur agregasi (bagaimana meter menghitung event kita):

    **Tipe Agregasi**: Pilih **Hitung** dari dropdown

    **Satuan Pengukuran**: Ketik → `images`

    <Info>
      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.
    </Info>
  </Step>

  <Step title="Add quality filtering">
    <Frame>
      <img src="https://mintcdn.com/dodopayments/w9oVTi6CzZMAOQA3/images/usage-based/UBB-3.png?fit=max&auto=format&n=w9oVTi6CzZMAOQA3&q=85&s=ce231b0559d31723bc12c22cd9ff9d64" alt="" style={{ maxHeight: '500px', width: 'auto' }} width="1558" height="942" data-path="images/usage-based/UBB-3.png" />
    </Frame>

    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`

    <Tip>
      Pengaturan ini berarti kita hanya akan menghitung event di mana kualitasnya "standard" ATAU "hd" - menyaring event uji atau permintaan yang rusak.
    </Tip>
  </Step>

  <Step title="Create your meter">
    1. Periksa kembali bahwa semua pengaturan Anda sesuai dengan nilai di atas
    2. Klik **Create Meter**

    <Check>
      **Meter created!** "Image Generation Meter" Anda sekarang siap mulai menghitung pembuatan gambar. Selanjutnya, kita akan menghubungkannya ke produk penagihan.
    </Check>
  </Step>
</Steps>

## 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.

<Tip>
  **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.
</Tip>

<Steps>
  <Step title="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.
  </Step>

  <Step title="Enter product details">
    Isi nilai-nilai ini persis untuk layanan PixelGen AI kami:

    **Product Name**: Salin ini → `PixelGen AI - Image Generation`

    **Deskripsi**: Salin ini → `AI-powered image generation service with pay-per-use billing`

    **Gambar Produk**: Unggah gambar yang jelas dan relevan.

    <Info>
      Ini akan muncul di faktur pelanggan, jadi buatlah jelas dan profesional.
    </Info>
  </Step>

  <Step title="Connect your meter">
    <Frame>
      <img src="https://mintcdn.com/dodopayments/w9oVTi6CzZMAOQA3/images/usage-based/UBB-5.png?fit=max&auto=format&n=w9oVTi6CzZMAOQA3&q=85&s=fd3851a1a070714baf0aec01cff717b8" alt="" style={{ maxHeight: '500px', width: 'auto' }} width="2272" height="1422" data-path="images/usage-based/UBB-5.png" />
    </Frame>

    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

    <Check>
      Meter Anda sekarang berhasil terhubung ke produk ini.
    </Check>
  </Step>

  <Step title="Set your pricing">
    Di sinilah kita mendefinisikan model bisnis kita:

    <Frame>
      <img src="https://mintcdn.com/dodopayments/w9oVTi6CzZMAOQA3/images/usage-based/UBB-4.png?fit=max&auto=format&n=w9oVTi6CzZMAOQA3&q=85&s=b2d07bb408fd79e1b788c1b7092b8bca" alt="" style={{ maxHeight: '500px', width: 'auto' }} width="732" height="712" data-path="images/usage-based/UBB-4.png" />
    </Frame>

    **Harga Per Unit**: Masukkan → `0.05` (ini \$0.05 per gambar)

    **Ambang Gratis**: Masukkan → `10` (pelanggan mendapatkan 10 gambar gratis per bulan)

    <Tip>
      **Cara penagihan bekerja**: Jika pelanggan menghasilkan 25 gambar dalam sebulan, mereka akan dikenakan biaya untuk 15 gambar (25 - 10 gratis) = 15 × $0.05 = $0.75
    </Tip>
  </Step>

  <Step title="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**

    <Check>
      **Product created!** Penagihan Anda sekarang dikonfigurasi. Pelanggan akan otomatis dikenakan biaya berdasarkan penggunaan pembuatan gambar mereka.
    </Check>
  </Step>
</Steps>

## Langkah 3: Lakukan Pembelian Uji Coba

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

<Steps>
  <Step title="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`
  </Step>

  <Step title="Complete a test purchase">
    1. Buka tautan pembayaran di tab browser baru
    2. Masukkan detail pembayaran uji dan selesaikan pembelian.

    <Check>
      Setelah pembayaran berhasil, Anda akan mendapatkan ID pelanggan yang akan kita gunakan dalam kode aplikasi.
    </Check>
  </Step>

  <Step title="Find your customer ID">
    1. Kembali ke dashboard Dodo Payments Anda
    2. Navigasikan ke **Sales → Customers** di sidebar
    3. Temukan pelanggan yang baru saja Anda buat (dengan email percobaan)
    4. Salin ID pelanggan - akan terlihat seperti `cus_abc123def456`

    <Note>
      Simpan ID pelanggan ini - kami akan meng-hardcode-nya dalam kode contoh aplikasi kami untuk memastikan event tercatat dengan benar.
    </Note>
  </Step>
</Steps>

## 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.

<Steps>
  <Step title="Set up your project">
    Buat direktori baru dan inisialisasi proyeknya:

    ```bash theme={null}
    mkdir pixelgen-ai
    cd pixelgen-ai
    npm init -y
    ```
  </Step>

  <Step title="Install dependencies">
    Instal paket yang kita perlukan:

    ```bash theme={null}
    npm install openai dotenv
    npm install -D typescript @types/node ts-node
    ```
  </Step>

  <Step title="Create the main application">
    Buat file bernama `index.ts` dan salin kode aplikasi lengkap ini:
  </Step>
</Steps>

Berikut adalah aplikasi PixelGen AI lengkap dengan penagihan terintegrasi:

<CodeGroup>
  ```typescript index.ts expandable theme={null}
  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);
  }
  ```

  ```bash .env theme={null}
  # Create .env file with your API keys
  OPENAI_API_KEY=your_openai_api_key_here
  DODO_PAYMENTS_API_KEY=your_DODO_PAYMENTS_payments_api_key_here
  # Note: Customer ID is hardcoded in the application code
  ```

  ```typescript package.json theme={null}
  {
    "name": "pixelgen-ai",
    "version": "1.0.0",
    "description": "AI Image Generation with Usage-Based Billing",
    "main": "index.js",
    "scripts": {
      "start": "ts-node index.ts",
      "build": "tsc",
      "dev": "ts-node --watch index.ts"
    },
    "dependencies": {
      "openai": "^4.0.0",
      "dotenv": "^16.0.0"
    },
    "devDependencies": {
      "@types/node": "^20.0.0",
      "typescript": "^5.0.0",
      "ts-node": "^10.0.0"
    }
  }
  ```
</CodeGroup>

## 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.

<Tip>
  **Apa yang sedang kami uji**: Kita akan menghasilkan beberapa gambar, memverifikasi event sampai ke Dodo Payments, dan memastikan perhitungan penagihan benar.
</Tip>

<Steps>
  <Step title="Set up your environment">
    Pertama, pastikan semua sudah dikonfigurasi:

    1. Buat file `.env` di direktori `pixelgen-ai`
    2. Tambahkan API key Anda yang sebenarnya:

    ```bash theme={null}
    OPENAI_API_KEY=sk-your-actual-openai-key
    DODO_PAYMENTS_API_KEY=your-actual-dodo-api-key
    # Customer ID is hardcoded in the application
    ```

    3. Instal dependensi dan jalankan aplikasi:

    ```bash theme={null}
    npm install
    npm start
    ```

    <Warning>
      Pastikan menggunakan API key yang valid dan perbarui ID pelanggan yang di-hardcode di kode dengan ID pelanggan aktual Anda dari Langkah 3!
    </Warning>
  </Step>

  <Step title="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...
    ```

    <Check>
      Jika Anda melihat "Usage event sent successfully", integrasi penagihan Anda berfungsi!
    </Check>
  </Step>

  <Step title="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".
  </Step>

  <Step title="Check your Dodo Payments dashboard">
    Sekarang mari kita verifikasi event sedang diterima:

    1. Buka dasbor Dodo Payments Anda
    2. Pergi ke *Penagihan Penggunaan* → \***Meter** → **Meter 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

    <Check>
      Anda harus melihat satu event untuk setiap gambar yang Anda hasilkan!
    </Check>
  </Step>

  <Step title="Verify billing calculations">
    Mari kita periksa apakah penghitungan penggunaan berfungsi:

    <Frame>
      <img src="https://mintcdn.com/dodopayments/w9oVTi6CzZMAOQA3/images/usage-based/UBB-1.png?fit=max&auto=format&n=w9oVTi6CzZMAOQA3&q=85&s=7fb86a266b5aa84f281b680601bd998e" alt="" style={{ maxHeight: '500px', width: 'auto' }} width="1536" height="1252" data-path="images/usage-based/UBB-1.png" />
    </Frame>

    1. Di meter Anda, pergi ke tab **Pelanggan**
    2. Temukan pelanggan uji coba Anda
    3. Periksa kolom "Unit yang Dikonsumsi"
  </Step>

  <Step title="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

    <Check>
      **Sukses!** Penagihan berbasis penggunaan Anda berfungsi dengan sempurna. Pelanggan akan otomatis dikenakan biaya berdasarkan penggunaan aktual pembuatan gambar mereka.
    </Check>
  </Step>
</Steps>

## Pemecahan Masalah

Masalah umum dan solusinya:

<AccordionGroup>
  <Accordion title="Events not appearing in dashboard">
    **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
  </Accordion>
</AccordionGroup>

## 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:

<CardGroup cols={2}>
  <Card title="Usage Meter" icon="sliders">
    Membuat "Image Generation Meter" yang melacak setiap event pembuatan gambar
  </Card>

  <Card title="Billing Product" icon="credit-card">
    Mengonfigurasi harga sebesar \$0.05 per gambar dengan 10 gambar gratis per bulan
  </Card>

  <Card title="AI Application" icon="robot">
    Membangun aplikasi TypeScript yang berfungsi yang menghasilkan gambar menggunakan DALL-E OpenAI
  </Card>

  <Card title="Automated Billing" icon="bolt">
    Mengintegrasikan pelacakan event waktu nyata yang secara otomatis menagih pelanggan
  </Card>
</CardGroup>