Skip to main content
لكي يكتب coding agent عملية التكامل، ثبّت Dodo Agent Plugin. يضيف مهارات Dodo Payments وخوادم MCP إلى Claude Code وCodex CLI وCursor وVS Code / GitHub Copilot وKiro وOpenCode.
ستبني PixelGen AI، وهي خدمة نموذجية لتوليد صور AI تحاسب العملاء على كل صورة باستخدام الفوترة المستندة إلى الاستخدام. ستنشئ meter للفوترة والمنتج وشفرة تطبيق نموذجية تُولّد الصور وترسل تقريرًا عن كل صورة إلى Dodo Payments فور حدوثها.
يوفّر هذا البرنامج التعليمي شفرة نموذجية لتطبيق يعمل عبر الطرفية. يمكنك تكييف الشفرة مع framework الخاص بك، مثل React أو Vue أو Angular، ومع الطريقة التي يجمع بها تطبيقك إدخالات المستخدم.
عند الانتهاء، سيكون لديك خدمة نموذجية عاملة تقوم بما يلي:
  • تنشئ صورًا باستخدام نموذج OpenAI gpt-image-2.5-flare.
  • تتتبّع كل عملية إنشاء صورة لأغراض الفوترة.
  • تفرض رسومًا على العملاء مقابل الصور التي ينشئونها.
  • تتعامل مع مستويي الجودة medium وhigh.

ما الذي سنبنيه

تعمل PixelGen AI على النحو التالي:
  • الخدمة: إنشاء صور بالذكاء الاصطناعي باستخدام OpenAI Image API
  • نموذج التسعير: الدفع مقابل كل صورة ($0.05 لكل صورة)
  • الخطة المجانية: 10 صور مجانية لكل عميل شهريًا
  • خيارات الجودة: صور بجودة medium وhigh بالسعر نفسه
قبل البدء، تحتاج إلى:
  • حساب Dodo Payments.
  • الوصول إلى OpenAI API. قد تتطلب OpenAI التحقق من مؤسسة API قبل استخدام نماذج GPT Image.
  • Node.js 22 أو إصدار أحدث، ومعرفة عملية بـ TypeScript وNode.js.

الخطوة 1: إنشاء Usage Meter

أنشئ meter في لوحة تحكم Dodo Payments يتتبّع كل صورة تولّدها الخدمة. يحسب meter الأحداث القابلة للفوترة.
Create Meter form in the Dodo Payments dashboard
ما الذي تبنيه: meter باسم “Image Generation Meter” يحسب كل عملية توليد صورة.
1

Open the Meters Section

  1. سجّل الدخول إلى لوحة تحكم Dodo Payments.
  2. انتقل إلى Products → Meters في الشريط الجانبي.
  3. انقر على Create Meter.
يُفتح نموذج meter.
2

Enter the Meter Details

أدخل تفاصيل PixelGen AI:Meter Name: Image Generation Meterالوصف: Tracks each AI image generation request made by customers using our OpenAI image serviceEvent Name: image.generated
يجب أن يتطابق اسم الحدث image.generated مع اسم الحدث الذي ترسله شفرة التطبيق. أسماء الأحداث حساسة لحالة الأحرف.
3

Configure How Images Are Counted

عيّن التجميع، الذي يتحكم في كيفية دمج meter للأحداث:Aggregation Type: CountMeasurement Unit: images
يحاسب Count على كل صورة تم توليدها، وليس حسب الحجم أو مدة التوليد. كل صورة ناجحة تمثل وحدة واحدة قابلة للفوترة.
4

Add Quality Filtering

Event filtering on the meter form with two quality conditions joined by OR
احسب الصور الحقيقية فقط، وليس عمليات الاختبار أو الأحداث غير الصحيحة:
  1. فعّل Enable Event Filtering.
  2. اضبط منطق المطابقة على OR، بحيث يُحتسب الحدث عند تطابق أي شرط.
  3. أضف الشرط الأول:
    • المفتاح: quality
    • العامل: equals
    • القيمة: medium
  4. انقر على Add condition وأضف الشرط الثاني:
    • المفتاح: quality
    • العامل: equals
    • القيمة: high
باستخدام هذا الفلتر، لا يحسب العداد سوى الأحداث التي تكون جودتها medium أو high، ويتجاهل الأحداث الاختبارية أو غير الصحيحة.
5

Create Your Meter

  1. تحقّق من أن كل إعداد يطابق القيم السابقة. لا يمكنك تعديل meter بعد إنشائه.
  2. انقر على Create Meter.
تم إنشاء meter. أصبح “Image Generation Meter” جاهزًا لحساب عمليات توليد الصور. بعد ذلك، صِله بمنتج فوترة.

الخطوة 2: إنشاء منتج الفوترة

أنشئ منتجًا يحدد التسعير: $0.05 لكل صورة، مع 10 صور مجانية. يصل المنتج meter بالفوترة.
ما الذي تبنيه: منتج باسم “PixelGen AI - Image Generation” يفرض $0.05 لكل صورة بعد أول 10 صور مجانية كل شهر.
1

Navigate to Products

  1. في لوحة تحكم Dodo Payments، انقر على Products في الشريط الجانبي.
  2. انقر على Add Product.
  3. ضمن Pricing Type، حدّد Usage Based Billing.
باستخدام نوع التسعير هذا، تحاسب Dodo Payments بناءً على استخدام meter بدلًا من سعر اشتراك ثابت.
2

Enter Product Details

أدخل القيم التالية:Product Name: PixelGen AI - Image GenerationDescription: AI-powered image generation service with pay-per-use billingProduct Image: حمّل صورة واضحة وملائمة.
يظهر الاسم والوصف في فواتير العملاء.
3

Connect Your Meter

Usage Based Billing pricing on the product form with the Associated Meters section
تحقّق من أن نوع تسعير المنتج هو Usage Based Billing.عيّن Price إلى 0، بحيث يدفع العملاء مقابل الاستخدام فقط، من دون رسوم أساسية.بعد ذلك، اربط meter الذي أنشأته:
  1. مرّر إلى قسم Associated Meters.
  2. انقر على Add meters.
  3. حدّد “Image Generation Meter” من القائمة المنسدلة.
  4. تأكّد من ظهور meter في إعدادات المنتج.
تم ربط meter بالمنتج.
4

Set Your Pricing

حدّد سعر الصورة والباقة المجانية:
Meter pricing with price per unit and free threshold fields
Price per unit: 0.05، أي $0.05 لكل صورة.Free Threshold: 10. يحصل كل عميل على 10 صور مجانية شهريًا.
كيفية عمل الفوترة: العميل الذي يولّد 25 صورة في شهر يدفع مقابل 15 صورة (25 − 10 مجانية). 15 × $0.05 = $0.75.
5

Save Your Product

  1. راجع الإعدادات:
    • Name: PixelGen AI - Image Generation
    • Meter: Image Generation Meter
    • Price: $0.05 per image
    • Free tier: 10 images
  2. انقر على Save Changes.
تم إنشاء المنتج. تم إعداد الفوترة، وأصبح العملاء يُحاسبون على الصور التي يولّدونها.

الخطوة 3: إجراء عملية شراء اختبارية

اشترِ المنتج مرة واحدة في test mode. تنشئ عملية الشراء العميل الذي يرسل التطبيق أحداث الاستخدام الخاصة به.
1

Get Your Payment Link

  1. في لوحة تحكم Dodo Payments، انتقل إلى Products.
  2. ابحث عن المنتج “PixelGen AI - Image Generation”.
  3. انقر على Share بجانب المنتج.
  4. انسخ رابط الدفع.
يبدو رابط الدفع على النحو التالي https://test.checkout.dodopayments.com/buy/pdt_IgPWlRsfpbPd5jQKezzW1?quantity=1.
2

Complete a Test Purchase

  1. افتح رابط الدفع في علامة تبويب جديدة في المتصفح.
  2. أدخل تفاصيل الدفع الاختبارية وأكمل عملية الشراء.
بعد نجاح الدفع، تنشئ عملية الشراء عميلًا. تستخدم شفرة التطبيق معرّف ذلك العميل.
3

Find Your Customer ID

  1. عُد إلى لوحة تحكم Dodo Payments.
  2. انتقل إلى Sales → Customers في الشريط الجانبي.
  3. ابحث عن العميل الذي أنشأته باستخدام عنوان بريده الإلكتروني الاختباري.
  4. انسخ معرّف العميل. يبدو على النحو التالي cus_abc123def456.
احفظ معرّف العميل هذا. يعيّنه التطبيق النموذجي في الشفرة، ولذلك يُسجّل كل حدث لهذا العميل.

الخطوة 4: بناء التطبيق النموذجي

بعد إعداد الفوترة وإنشاء عميل اختباري، ابنِ تطبيق PixelGen AI النموذجي. فهو يولّد صورة ويرسل تقريرًا بها إلى Dodo Payments لأغراض الفوترة.
يستدعي المثال نموذج OpenAI gpt-image-2.5-flare من خلال Image API. يعيد Image API بيانات الصور بترميز base64، لذلك يحفظ المثال كل صورة كملف PNG. ولا يعتمد جزء Dodo Payments (العداد والمنتج وحدث الاستخدام image.generated) على النموذج.
1

Set Up Your Project

أنشئ directory وابدأ تهيئة المشروع:
2

Install Dependencies

ثبّت الحزم:
3

Create the Main Application

أنشئ ملفًا باسم index.ts والصق فيه شفرة التطبيق أدناه.
تطبيق PixelGen AI الكامل مع الفوترة، بالإضافة إلى .env وpackage.json المطابقين:

الخطوة 5: اختبار التطبيق النموذجي

اختبر PixelGen AI من البداية إلى النهاية وراقب وصول الاستخدام إلى Dodo Payments.
ما الذي تختبره: تولّد بعض الصور، وتتأكد من وصول الأحداث إلى Dodo Payments، وتتحقق من حساب الفوترة.
1

Set Up Your Environment

  1. أنشئ ملف .env في directory‏ pixelgen-ai.
  2. أضف مفاتيح API الخاصة بك:
  1. ثبّت dependencies وشغّل التطبيق:
استخدم مفاتيح API حقيقية، واستبدل customer ID المضمّن في index.ts بمعرّف العميل من الخطوة 3.
2

Generate Your First Test Image

عند بدء تشغيل التطبيق، يطبع ما يلي:
أدخل هذا prompt: “روبوت لطيف يرسم منظرًا طبيعيًا”يبدو الناتج بهذا الشكل. تم حذف أسطر تصحيح الطلب التي يطبعها sendUsageEvent:
إذا تضمّن الناتج الرسالة “Usage event sent successfully”، فهذا يعني أن تكامل الفوترة يعمل.
3

Generate a Few More Images

ولّد صورتين أو ثلاث صور إضافية لاختبار أحداث متعددة. شغّل npm start مرة واحدة لكل صورة، باستخدام prompts التالية:
  1. “غروب فوق جبال مع سحب بنفسجية”
  2. “آلة قهوة تعمل بالبخار في مطبخ من العصر الفيكتوري”
  3. “تنين ودود يقرأ كتابًا في مكتبة”
في كل مرة، تحقّق من ظهور الرسالة “Usage event sent successfully”.
4

Check Your Dodo Payments Dashboard

تأكّد من أن Dodo Payments يستقبل الأحداث:
  1. افتح لوحة تحكم Dodo Payments.
  2. انتقل إلى Products → Meters وافتح Image Generation Meter.
  3. حدّد علامة التبويب Events.
  4. ابحث عن أحداث توليد الصور في القائمة.
ما يجب البحث عنه:
  • Event name: image.generated
  • Customer ID: معرّف العميل الاختباري الخاص بك
تحتوي القائمة على حدث واحد لكل صورة ولّدتها.
5

Verify Billing Calculations

تحقّق من عدد الاستخدام:
Customers tab of the meter showing consumed units per customer
  1. في meter، حدّد علامة التبويب Customers.
  2. ابحث عن عميلك الاختباري.
  3. تحقّق من عمود Consumed Units.
6

Test the Billing Threshold

تجاوز الباقة المجانية لرؤية الفوترة:
  1. ولّد 8 صور إضافية، ليصبح المجموع 12 صورة.
  2. افتح علامة التبويب Customers الخاصة بـ meter مرة أخرى.
  3. تحقّق من القيم:
    • Consumed Units: 12
    • Chargeable Units: 2 (12 − 10 مجانية)
    • Total Price: $0.10
تعمل الفوترة المستندة إلى الاستخدام. يُحاسب العملاء على الصور التي يولّدونها.

استكشاف الأخطاء وإصلاحها

المشكلات الشائعة وحلولها:
الأسباب المحتملة:
  • لا يطابق اسم الحدث إعداد meter تمامًا
  • معرّف العميل غير موجود في حسابك
  • مفتاح API غير صالح أو منتهي الصلاحية
  • مشكلات في الاتصال بالشبكة
الحلول:
  1. تحقّق من تطابق اسم الحدث مع meter تمامًا. فهو حساس لحالة الأحرف.
  2. تحقّق من وجود معرّف العميل في Dodo Payments.
  3. اختبر مفتاح API باستخدام استدعاء API بسيط.
  4. تحقّق من اتصال الشبكة وإعدادات جدار الحماية.

تهانينا! لقد بنيت PixelGen AI

لقد بنيت مولّد صور AI نموذجيًا مع فوترة مستندة إلى الاستخدام:

Usage Meter

“Image Generation Meter” يحسب كل حدث لتوليد صورة.

Billing Product

تسعير قدره $0.05 لكل صورة، مع 10 صور مجانية شهريًا.

AI Application

تطبيق TypeScript يولّد الصور باستخدام OpenAI image API.

Automated Billing

تتبّع للأحداث يرسل تقريرًا عن كل صورة عند توليدها، بحيث يُحاسب العملاء مقابل الاستخدام.
آخر تعديل في ٢٨ سبتمبر ٢٠٢٦