このチュートリアルでは、ターミナルベースのアプリケーション用のサンプル実装コードを紹介します。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ダッシュボードで、サービスが生成するすべての画像を追跡するメーターを作成します。これは、請求可能なイベントを追跡する「カウンター」と考えてください。
Open the Meters section
- Dodo Payments ダッシュボードにログイン
- 左サイドバーで Meters をクリック
- Create Meter ボタンをクリック
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.generatedConfigure how we count images
集計 (メーターがイベントをカウントする方法) を設定します:集計タイプ: ドロップダウンからカウントを選択します測定単位: 次を入力してください →
images「Count」を使用しているのは、生成した画像ごとに課金したいからです。サイズや生成時間ではなく、1 枚の画像 = 1 課金単位です。
Add quality filtering

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

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

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