Skip to main content
Agar coding agent Anda menulis integrasinya, instal Dodo Agent Plugin. Plugin ini menambahkan skill Dodo Payments dan server MCP ke Claude Code, Codex CLI, Cursor, VS Code / GitHub Copilot, Kiro, dan OpenCode.
Anda akan membangun PixelGen AI, layanan pembuatan gambar AI contoh yang menagih pelanggan per gambar dengan usage-based billing. Anda membuat billing meter, produk, dan kode aplikasi contoh yang menghasilkan gambar serta melaporkan setiap gambar ke Dodo Payments saat gambar tersebut dibuat.
Tutorial ini menyediakan kode contoh untuk aplikasi terminal. Anda dapat menyesuaikan kode ini dengan framework Anda, seperti React, Vue, atau Angular, serta dengan cara aplikasi Anda mengumpulkan input pengguna.
Setelah selesai, Anda akan memiliki layanan sampel yang berfungsi dan dapat:
  • Menghasilkan gambar dengan model gpt-image-2.5-flare milik OpenAI.
  • Melacak setiap pembuatan gambar untuk penagihan.
  • Menagih pelanggan atas gambar yang mereka hasilkan.
  • Menangani dua tingkat kualitas, medium dan high.

Yang Akan Kita Bangun

PixelGen AI bekerja seperti ini:
  • Layanan: Pembuatan gambar AI dengan OpenAI Image API
  • Model Harga: Bayar per gambar ($0.05 per gambar)
  • Tingkat Gratis: 10 gambar gratis per pelanggan per bulan
  • Opsi Kualitas: Gambar berkualitas medium dan high, dengan harga yang sama
Sebelum memulai, Anda memerlukan:
  • Akun Dodo Payments.
  • Akses ke OpenAI API. OpenAI mungkin memerlukan API Organization Verification sebelum Anda menggunakan model GPT Image.
  • Node.js 22 atau versi yang lebih baru, serta pemahaman tentang TypeScript dan Node.js.

Langkah 1: Buat Usage Meter Anda

Buat meter di dashboard Dodo Payments yang melacak setiap gambar yang dihasilkan layanan. Meter ini menghitung billable events.
Form Create Meter di dashboard Dodo Payments
Yang Anda bangun: Meter bernama “Image Generation Meter” yang menghitung setiap pembuatan gambar.
1

Open the Meters Section

  1. Masuk ke dashboard Dodo Payments.
  2. Buka Products → Meters di sidebar.
  3. Klik Create Meter.
Form meter akan terbuka.
2

Enter the Meter Details

Masukkan detail untuk PixelGen AI:Meter Name: Image Generation MeterDeskripsi: Tracks each AI image generation request made by customers using our OpenAI image serviceEvent Name: image.generated
Nama event image.generated harus sama dengan nama event yang dikirim oleh kode aplikasi. Nama event peka huruf besar-kecil.
3

Configure How Images Are Counted

Atur agregasi, yang mengontrol cara meter menggabungkan event:Aggregation Type: CountMeasurement Unit: images
Count menagih berdasarkan jumlah gambar yang dihasilkan, bukan ukuran atau waktu pembuatan. Setiap gambar yang berhasil dibuat merupakan satu billable unit.
4

Add Quality Filtering

Pemfilteran event pada form meter dengan dua kondisi kualitas yang digabungkan dengan OR
Hitung hanya gambar yang sebenarnya, bukan test runs atau event yang formatnya tidak valid:
  1. Aktifkan Enable Event Filtering.
  2. Atur logika pencocokan ke OR, sehingga suatu event dihitung ketika salah satu kondisi cocok.
  3. Tambahkan kondisi pertama:
    • Key: quality
    • Operator: equals
    • Value: medium
  4. Klik Add condition dan tambahkan kondisi kedua:
    • Key: quality
    • Operator: equals
    • Value: high
Dengan filter ini, meter hanya menghitung event yang kualitasnya adalah medium atau high, serta mengabaikan event pengujian atau event yang formatnya tidak valid.
5

Create Your Meter

  1. Pastikan setiap pengaturan sesuai dengan nilai di atas. Anda tidak dapat mengedit meter setelah membuatnya.
  2. Klik Create Meter.
Meter dibuat. “Image Generation Meter” siap menghitung pembuatan gambar. Selanjutnya, hubungkan meter ini ke billing product.

Langkah 2: Buat Billing Product Anda

Buat produk yang menentukan harga: $0.05 per gambar, dengan 10 gambar gratis. Produk ini menghubungkan meter ke billing.
Yang Anda bangun: 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 dashboard Dodo Payments, klik Products di sidebar.
  2. Klik Add Product.
  3. Di bagian Pricing Type, pilih Usage Based Billing.
Dengan jenis harga ini, Dodo Payments menagih berdasarkan penggunaan meter, bukan harga subscription tetap.
2

Enter Product Details

Masukkan nilai berikut:Product Name: PixelGen AI - Image GenerationDescription: AI-powered image generation service with pay-per-use billingProduct Image: Unggah gambar yang jelas dan relevan.
Nama dan deskripsi akan ditampilkan pada invoice pelanggan.
3

Connect Your Meter

Harga Usage Based Billing pada form produk dengan bagian Associated Meters
Pastikan jenis harga produk adalah Usage Based Billing.Atur Price ke 0, sehingga pelanggan hanya membayar berdasarkan penggunaan, tanpa biaya dasar.Selanjutnya, hubungkan meter yang telah Anda buat:
  1. Gulir ke bagian Associated Meters.
  2. Klik Add meters.
  3. Pilih “Image Generation Meter” dari dropdown.
  4. Pastikan meter tersebut muncul dalam konfigurasi produk.
Meter terhubung ke produk.
4

Set Your Pricing

Tentukan harga per gambar dan tingkat gratis:
Harga meter dengan kolom harga per unit dan ambang batas gratis
Price per unit: 0.05, yaitu $0.05 per gambar.Free Threshold: 10. Setiap pelanggan mendapatkan 10 gambar gratis per bulan.
Cara kerja billing: Pelanggan yang menghasilkan 25 gambar dalam sebulan membayar 15 gambar (25 − 10 gratis). 15 × $0.05 = $0.75.
5

Save Your Product

  1. Tinjau pengaturan:
    • Name: PixelGen AI - Image Generation
    • Meter: Image Generation Meter
    • Price: $0.05 per gambar
    • Free tier: 10 gambar
  2. Klik Save Changes.
Produk dibuat. Billing telah dikonfigurasi, dan pelanggan akan ditagih untuk gambar yang mereka hasilkan.

Langkah 3: Lakukan Test Purchase

Beli produk sekali dalam test mode. Pembelian ini membuat pelanggan yang akan digunakan aplikasi untuk mengirim usage events.
1

Get Your Payment Link

  1. Di dashboard Dodo Payments, buka Products.
  2. Cari produk “PixelGen AI - Image Generation”.
  3. Klik Share di samping produk.
  4. Salin payment link.
Payment link akan terlihat seperti https://test.checkout.dodopayments.com/buy/pdt_IgPWlRsfpbPd5jQKezzW1?quantity=1.
2

Complete a Test Purchase

  1. Buka payment link di tab browser baru.
  2. Masukkan detail pembayaran pengujian dan selesaikan pembelian.
Setelah pembayaran berhasil, pembelian akan membuat pelanggan. Kode aplikasi menggunakan ID pelanggan tersebut.
3

Find Your Customer ID

  1. Kembali ke dashboard Dodo Payments.
  2. Buka Sales → Customers di sidebar.
  3. Cari pelanggan yang Anda buat berdasarkan alamat email pengujiannya.
  4. Salin customer ID. ID tersebut terlihat seperti cus_abc123def456.
Simpan customer ID ini. Aplikasi contoh menetapkannya di dalam kode, sehingga setiap event dicatat untuk pelanggan tersebut.

Langkah 4: Bangun Aplikasi Contoh

Setelah billing disiapkan dan pelanggan pengujian dibuat, bangun aplikasi PixelGen AI contoh. Aplikasi ini menghasilkan gambar dan melaporkannya ke Dodo Payments untuk billing.
Sampel ini memanggil model gpt-image-2.5-flare milik OpenAI melalui Image API. Image API mengembalikan data gambar yang dikodekan dalam base64, sehingga sampel menyimpan setiap gambar sebagai file PNG. Bagian Dodo Payments (meter, produk, dan event penggunaan image.generated) tidak bergantung pada model.
1

Set Up Your Project

Buat direktori dan inisialisasi project:
2

Install Dependencies

Instal package:
3

Create the Main Application

Buat file bernama index.ts dan tempelkan kode aplikasi di bawah ini.
Aplikasi PixelGen AI lengkap dengan billing, beserta .env dan package.json yang sesuai:

Langkah 5: Uji Aplikasi Contoh Anda

Uji PixelGen AI dari awal hingga akhir dan lihat usage masuk ke Dodo Payments.
Yang Anda uji: Anda menghasilkan beberapa gambar, memastikan event sampai ke Dodo Payments, dan memeriksa perhitungan billing.
1

Set Up Your Environment

  1. Buat file .env di direktori pixelgen-ai.
  2. Tambahkan API keys Anda:
  1. Instal dependencies dan jalankan aplikasi:
Gunakan API keys yang sebenarnya, lalu ganti customer ID hardcode di index.ts dengan customer ID dari Langkah 3.
2

Generate Your First Test Image

Saat aplikasi dimulai, aplikasi mencetak:
Masukkan prompt ini: “A cute robot painting a landscape”Outputnya terlihat seperti ini. Baris debug request yang dicetak oleh sendUsageEvent tidak disertakan:
Jika output menyertakan “Usage event sent successfully”, integrasi billing berfungsi.
3

Generate a Few More Images

Hasilkan dua atau tiga gambar lagi untuk menguji beberapa event. Jalankan npm start sekali untuk setiap gambar, dengan prompt berikut:
  1. “A sunset over mountains with purple clouds”
  2. “A steampunk coffee machine in a Victorian kitchen”
  3. “A friendly dragon reading a book in a library”
Setiap kali, periksa pesan “Usage event sent successfully”.
4

Check Your Dodo Payments Dashboard

Pastikan Dodo Payments menerima event tersebut:
  1. Buka dashboard Dodo Payments.
  2. Buka Products → Meters dan buka Image Generation Meter.
  3. Pilih tab Events.
  4. Cari event pembuatan gambar Anda dalam daftar.
Yang perlu dicari:
  • Event name: image.generated
  • Customer ID: customer ID pengujian Anda
Daftar tersebut memiliki satu event untuk setiap gambar yang Anda hasilkan.
5

Verify Billing Calculations

Periksa jumlah usage:
Tab Customers pada meter yang menampilkan unit terpakai per pelanggan
  1. Di meter, pilih tab Customers.
  2. Cari pelanggan pengujian Anda.
  3. Periksa kolom Consumed Units.
6

Test the Billing Threshold

Lampaui tingkat gratis untuk melihat billing:
  1. Hasilkan 8 gambar lagi, sehingga totalnya menjadi 12.
  2. Buka kembali tab Customers pada meter.
  3. Periksa nilainya:
    • Consumed Units: 12
    • Chargeable Units: 2 (12 − 10 gratis)
    • Total Price: $0.10
Usage-based billing berfungsi. Pelanggan ditagih untuk gambar yang mereka hasilkan.

Pemecahan Masalah

Masalah umum dan solusinya:
Kemungkinan penyebab:
  • Nama event tidak sama persis dengan konfigurasi meter
  • Customer ID tidak ada di akun Anda
  • API key tidak valid atau sudah kedaluwarsa
  • Masalah konektivitas jaringan
Solusi:
  1. Pastikan nama event sama persis dengan meter. Nama tersebut peka huruf besar-kecil.
  2. Pastikan customer ID ada di Dodo Payments.
  3. Uji API key dengan API call sederhana.
  4. Periksa konektivitas jaringan dan pengaturan firewall.

Selamat! Anda Telah Membangun PixelGen AI

Anda telah membangun generator gambar AI contoh dengan usage-based billing:

Usage Meter

“Image Generation Meter” yang menghitung setiap event pembuatan gambar.

Billing Product

Harga $0.05 per gambar, dengan 10 gambar gratis per bulan.

AI Application

Aplikasi TypeScript yang menghasilkan gambar dengan OpenAI image API.

Automated Billing

Pelacakan event yang melaporkan setiap gambar saat dibuat, sehingga pelanggan ditagih berdasarkan penggunaan.
Terakhir diubah pada 26 September 2026