このチュートリアルでは、ターミナルベースのアプリケーション用のサンプル実装コードを紹介します。React、Vue、Angular などの任意のフレームワーク向けにこのコードを変更し、アプリケーションの要件に応じてユーザー入力方法をカスタマイズできます。
- OpenAIのDALL-E APIを使用して画像を生成する
- 請求のためにすべての画像生成を追跡する
- 使用量に基づいて自動的に顧客に請求する
- 異なる品質レベル(標準とHD)を処理する
構築するもの
まず、PixelGen AIサービスを理解しましょう:- サービス: OpenAIのDALL-E APIを使用したAI画像生成
- 価格モデル: 画像ごとに支払い($0.05/画像)
- 無料枠: 顧客ごとに月10枚の無料画像
- 品質オプション: 標準およびHD画像(簡単のため同じ価格)
開始する前に、以下を用意していることを確認してください:
- Dodo Payments アカウント
- OpenAI の API へのアクセス
- TypeScript/Node.js の基本的な理解
ステップ1: 使用量メーターを作成する
Dodo Paymentsダッシュボードで、サービスが生成するすべての画像を追跡するメーターを作成します。これは、請求可能なイベントを追跡する「カウンター」と考えてください。
1
Open the Meters section
- Dodo Payments ダッシュボードにログイン
- 左サイドバーで Meters をクリック
- Create Meter ボタンをクリック
2
Fill in the basic meter information
これから PixelGen AI サービスの具体的な詳細を入力します:メーター名: 次を正確にコピーして貼り付けてください →
Image Generation Meter説明: 次をコピー → Tracks each AI image generation request made by customers using our DALL-E powered serviceイベント名: 重要です。正確にコピー → image.generated3
Configure how we count images
集計 (メーターがイベントをカウントする方法) を設定します:集計タイプ: ドロップダウンからカウントを選択します測定単位: 次を入力してください →
images「Count」を使用しているのは、生成した画像ごとに課金したいからです。サイズや生成時間ではなく、1 枚の画像 = 1 課金単位です。
4
Add quality filtering

- イベントフィルタリングを有効にする: これをオンに切り替え
- フィルターロジック: OR を選択(これは「これらの条件のいずれかが真であればカウントする」という意味です)
- 最初の条件を追加:
- プロパティキー:
quality - 比較演算子:
equals - 値:
standard
- プロパティキー:
- **「条件を追加」**をクリックして2つ目の条件を追加:
- プロパティキー:
quality - 比較演算子:
equals - 値:
hd
- プロパティキー:
5
Create your meter
- 上記の値とすべて一致していることを再確認します
- Create Meter をクリック
メーターが作成されました! 「Image Generation Meter」が画像生成のカウントを開始する準備が整いました。次にこれを請求製品に接続します。
ステップ2: 請求製品を作成する
次に、価格を定義する製品を作成する必要があります(画像ごとに$0.05、10枚の無料画像付き)。これにより、メーターが実際の請求に接続されます。1
Navigate to Products
- Dodo Payments ダッシュボードの左サイドバーで Products をクリック
- Create Product をクリック
- 製品タイプとして Usage-Based を選択
2
Enter product details
PixelGen AI サービスのために次の値を正確に入力してください:製品名: 次をコピー →
PixelGen AI - Image Generation説明: 次をコピー → AI-powered image generation service with pay-per-use billing製品画像: 明確で関連性のある画像をアップロードします。これらは顧客の請求書に表示されるため、明確でプロフェッショナルな表現にしてください。
3
Connect your meter

0 に設定して、顧客が基本料金なしで使用量に応じてのみ請求されるようにしてください。次に、先ほど作成したメーターをリンクします:- 関連メーターセクションまでスクロールします
- メーターを追加をクリックします
- ドロップダウンから**「画像生成メーター」**(先ほど作成したもの)を選択します
- 製品設定に表示されることを確認します
メーターはこの製品に正常に接続されました。
4
Set your pricing
ここでビジネスモデルを定義します:
単価 (Price Per Unit): 次を入力 →

0.05(これは画像 1 枚あたり $0.05)無料枠 (Free Threshold): 次を入力 → 10(顧客は月に 10 枚の画像を無料で利用できます)5
Save your product
- 以下の設定をすべて確認:
- 名前: PixelGen AI - Image Generation
- メーター: Image Generation Meter
- 価格: 画像 1 枚あたり $0.05
- 無料枠: 10 枚
- Save Changes をクリック
製品が作成されました! 課金設定は完了しました。顧客は画像生成の使用量に基づいて自動的に請求されます。
ステップ3: テスト購入を行う
使用量イベントを取り込む前に、テスト購入を行う必要があります。1
Get your payment link
- Dodo Payments ダッシュボードで Products に移動
- 「PixelGen AI - Image Generation」製品を探す
- 製品の横にある Share ボタンをクリック
- 表示された支払いリンクをコピーする
https://test.checkout.dodopayments.com/buy/pdt_IgPWlRsfpbPd5jQKezzW1?quantity=12
Complete a test purchase
- 支払いリンクを新しいブラウザタブで開く
- テスト用の支払い情報を入力し、購入を完了する。
支払いが成功すると、アプリケーションコードで使用する顧客 ID が取得できます。
3
Find your customer ID
- Dodo Payments ダッシュボードに戻る
- サイドバーの Sales → Customers に移動
- 作成したばかりの顧客(テストメール使用)を見つける
- 顧客 ID をコピーする - それは
cus_abc123def456のように見えるでしょう
この顧客 ID を保存してください — サンプルアプリケーションコードにハードコードして、イベントが正しく追跡されることを確認します。
ステップ4: サンプルアプリケーションを構築する
請求設定が完了し、テスト顧客が作成されました。画像を生成し、請求のために自動的に使用量を追跡するサンプルPixelGen AIアプリケーションを構築しましょう。1
Set up your project
新しいディレクトリを作成し、プロジェクトを初期化します:
2
Install dependencies
必要なパッケージをインストール:
3
Create the main application
index.ts というファイルを作成し、以下の完全なアプリケーションコードをコピーしてください:ステップ5: サンプルアプリケーションをテストする
サンプルPixelGen AIサービスをテストし、請求が機能するか確認する時間です!すべてがエンドツーエンドで動作することを確認しましょう。1
Set up your environment
まず、すべての設定が完了していることを確認してください:
.envファイルをpixelgen-aiディレクトリに作成- 実際の API キーを追加:
- 依存関係をインストールし、アプリを実行します:
2
Generate your first test image
アプリを起動すると、次のように表示されます:このプロンプトを試してください: “かわいいロボットが風景を描いている”次のような出力が表示されるはずです:
「Usage event sent successfully」が表示されたら、課金統合は正常に動作しています!
3
Generate a few more images
さらに 2〜3 枚の画像を生成して複数のイベントをテストしましょう。以下のプロンプトを試してください:
- “紫の雲のある山の上の夕日”
- “ビクトリア朝のキッチンにあるスチームパンクのコーヒーマシン”
- “図書館で本を読んでいる友好的なドラゴン”
4
Check your Dodo Payments dashboard
続いて、イベントが届いているか確認します:
- Dodo Paymentsダッシュボードを開きます
- 使用量請求 → *メーター → 画像生成メーターに移動します
- イベントタブをクリックします
- 画像生成イベントがリストされているのを確認します
- イベント名:
image.generated - 顧客 ID: テスト顧客の ID
生成した画像ごとに 1 件のイベントが表示されるはずです!
5
Verify billing calculations
利用状況のカウントが正しく行われているか確認しましょう:

- メーターで、顧客タブに移動します
- テスト顧客を見つけます
- 「消費単位」列を確認します
6
Test the billing threshold
無料枠を超えて請求がどのようになるか確認しましょう:
- さらに8枚の画像を生成します(合計12枚に到達)
- メーターダッシュボードを再度確認します
- 次のように表示されるはずです:
- 消費単位: 12
- 請求単位: 2(12 - 10の無料)
- 請求額: $0.10
成功! 使用量ベースの課金は正常に動作しています。顧客は実際の画像生成の使用量に基づいて自動的に請求されます。
トラブルシューティング
一般的な問題とその解決策:Events not appearing in dashboard
Events not appearing in dashboard
考えられる原因:
- イベント名がメーター設定と完全に一致していない
- 顧客 ID がアカウントに存在しない
- API キーが無効または期限切れ
- ネットワーク接続の問題
- イベント名がメーター設定と完全に一致しているか確認する(大文字小文字を区別します)
- 顧客 ID が Dodo Payments に存在することを確認する
- シンプルな API 呼び出しで API キーをテストする
- ネットワーク接続とファイアウォールの設定を確認する
おめでとうございます! PixelGen AIを構築しました
使用量ベースの請求を伴うAI画像生成のスニペットを成功裏に作成しました!達成したことは次のとおりです:Usage Meter
「Image Generation Meter」を作成し、すべての画像生成イベントを追跡できるようにしました
Billing Product
1 画像あたり $0.05、月に 10 枚無料の価格設定を構成しました
AI Application
OpenAI の DALL-E を使用して画像を生成する動作する TypeScript アプリを構築しました
Automated Billing
リアルタイムのイベントトラッキングを統合し、顧客に自動で請求されるようにしました