الانتقال إلى المحتوى الرئيسي
هذه هي تنفيذ مثال ونموذج مصمم كنقطة انطلاق لمطوري إضافات Figma الذين يرغبون في دمج واجهة برمجة تطبيقات مفتاح ترخيص Dodo Payments لمنح الوصول إلى إضافاتهم. يُظهر القالب وظيفة التحقق من مفتاح الترخيص والتفعيل بشكل كامل، مما يوفر كل ما تحتاجه لإنشاء إضافات Figma متميزة مع ترخيص مدمج.

​
الميزات

  • التحقق من مفتاح الترخيص: يتحقق من مفاتيح الترخيص مقابل واجهة برمجة تطبيقات Dodo Payments
  • تفعيل مفتاح الترخيص: يقوم بتفعيل مفاتيح الترخيص مع تحديد هوية المستخدم
  • دعم البيئة: قابل للتكوين لكل من البيئات التجريبية والحية
  • وكيل CORS: يستخدم وكيل Cloudflare Worker للتعامل مع قيود CORS
  • دعم TypeScript: تنفيذ مكتوب بالكامل مع معالجة الأخطاء بشكل صحيح

​
البدء

1

إنشاء المكون الأساسي

قم بإنشاء مشروع مكون Figma الخاص بك باستخدام دليل البدء السريع لمكونات Figma. سيؤدي ذلك إلى إنشاء هيكل مع ملف manifest.json .
هذه الخطوة تهدف فقط للحصول على اسم فريد ومعرف لإضافتك. يمكنك تجاهل الملفات التي تم إنشاؤها بعد تسجيل المعرف والاسم في مستودع git الخاص بك في الخطوة التالية.
2

استنساخ تنفيذ المثال

استنساخ مستودع dodopayments-figma وتحديث manifest.json بالاسم والمعرف من مجلد المكون الذي تم إنشاؤه.
git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma
يعمل هذا المثال كنقطة انطلاق لك للدمج.
تحتاج إلى تغيير عنوان URL للمستودع البعيد إلى مستودعك الخاص للتحكم في الإصدار.
3

تثبيت التبعيات

قم بتشغيل الأمر التالي في جذر مشروعك:
npm install
4

تكوين البيئة

قم بتعيين API_MODE في src/ui/api.ts:
const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production
استخدم دائمًا test_mode أثناء التطوير لتجنب معالجة المدفوعات الحقيقية.
5

تخصيص المكونات

خصص مكونات الإضافة لتناسب احتياجاتك:
  • تحديث Authenticated.tsx لعرض الوظائف للمستخدمين الذين لديهم مفاتيح ترخيص صالحة
  • تخصيص LicenseKeyInput.tsx ليتناسب مع تفضيلات التصميم الخاصة بك
مكون Authenticated.tsx هو المكان الذي ستضيف فيه ميزات مكونك المميزة التي تتطلب ترخيصًا صالحًا.

​
التكوين

1

تكوين الوصول إلى الشبكة

يحتاج المكون إلى الوصول إلى الشبكة للتواصل مع وكيل CORS. أضف ما يلي إلى manifest.json:
{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}
هذا يسمح للإضافة بالتحقق من مفاتيح الترخيص وتفعيلها باستخدام واجهة برمجة تطبيقات Dodo Payments.
وكيل CORS ضروري لأن واجهة برمجة تطبيقات Dodo Payments لا تسمح بإجراء مكالمات API من التطبيقات المستندة إلى المتصفح حتى الآن.
2

تكوين وضع API

في src/ui/api.ts، قم بتكوين وضع API:
const API_MODE = "test_mode"; // or "live_mode"
قم بالتبديل إلى live_mode فقط عندما تكون جاهزًا للإنتاج وقد اختبرت بدقة في وضع الاختبار.

​
التطوير

1

استيراد الإضافة

استورد الإضافة إلى Figma باستخدام “استيراد البيان” من تطبيق Figma لسطح المكتب.
ستحتاج إلى تثبيت تطبيق Figma لسطح المكتب لتطوير واختبار الإضافات محليًا.
2

بدء خادم التطوير

npm run dev
هذا يبدأ خادم التطوير مع مراقبة الملفات لإعادة البناء التلقائي.
ستتم إعادة بناء الإضافة تلقائيًا عند إجراء تغييرات على الشيفرة المصدرية.

​
أوامر البناء

الأمرالوصف
npm run buildبناء المكون للإنتاج
npm run devبدء خادم التطوير مع مراقبة الملفات
npm run lintتحقق من نمط الكود والأخطاء
npm run formatتنسيق الكود باستخدام Prettier

​
دمج مفتاح الترخيص

يتضمن تنفيذ المثال التحقق الكامل من مفتاح الترخيص وتفعيله الذي يمكنك تخصيصه لإضافتك:
  1. إدخال المستخدم: يدخل المستخدمون مفتاح الترخيص الخاص بهم في واجهة الإضافة
  2. التحقق: تتحقق الإضافة من المفتاح مقابل واجهة برمجة تطبيقات Dodo Payments
  3. التفعيل: يتم تفعيل المفاتيح الصالحة مع تحديد هوية المستخدم
  4. التحكم في الوصول: يتم فتح وظائف الإضافة لحاملي المفاتيح الصالحة

​
النشر

بمجرد أن تكون الإضافة جاهزة:
  1. بناء للإنتاج: npm run build
  2. اختبار بدقة في كل من أوضاع الاختبار والعيش
  3. اتبع إرشادات نشر مكونات Figma
  4. تقديم للمراجعة من خلال مجتمع Figma

​
المستودع

يتوفر تنفيذ المثال الكامل على: github.com/dodopayments/dodopayments-figma استخدم هذا كنقطة انطلاق لبناء إضافة Figma المتميزة الخاصة بك مع دمج مفتاح ترخيص Dodo Payments.