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

​
الميزات

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

​
البدء

1

Create Base Plugin

أنشئ مشروع ملحق Figma خاص بك باستخدام دليل البدء السريع لملحقات Figma. سيؤدي ذلك إلى إنشاء هيكل أساسي مع ملف manifest.json.
هذه الخطوة تهدف فقط للحصول على اسم فريد ومعرّف لملحقك. يمكنك حذف الملفات المُنشأة بعد الالتزام بالمُعرف والاسم في مستودع Git الخاص بك في الخطوة التالية.
2

Clone the Example Implementation

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

Install Dependencies

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

Configure Environment

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

Customize Components

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

​
التكوين

1

Configure Network Access

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

Configure API Mode

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

​
التطوير

1

Import Plugin

قم باستيراد الملحق إلى Figma باستخدام “اِستيراد العَرْض” من تطبيق Figma لسطح المكتب.
ستحتاج إلى تثبيت تطبيق Figma لسطح المكتب لتطوير الملحقات واختبارها محلياً.
2

Start Development Server

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.