Skip to main content
مثال Dodo Payments الخاص بـ Figma هو إضافة نموذجية لا تُفعّل ميزاتها إلا للمستخدمين الذين يملكون مفتاح ترخيص صالحًا من Dodo Payments. استخدمه كنقطة بداية لإضافة Figma متميزة؛ إذ يتضمن حقلًا لإدخال مفتاح الترخيص، والتحقق من المفتاح وتنشيطه عبر Dodo Payments API، ومكوّنًا لميزاتك المتميزة.

​
الميزات

  • التحقق من مفتاح الترخيص: يتحقق من مفاتيح الترخيص مقابل Dodo Payments API.
  • تنشيط مفتاح الترخيص: ينشّط مفاتيح الترخيص باستخدام اسم مثيل، للمفاتيح التي لها حد للتنشيط.
  • دعم البيئات: قابل للتهيئة لكل من وضع الاختبار والوضع المباشر.
  • دعم TypeScript: تنفيذ مكتوب بالكامل مع معالجة الأخطاء.

​
البدء

قبل البدء، تحتاج إلى تطبيق Figma لسطح المكتب ومنتج Dodo Payments يُصدر مفاتيح ترخيص.
1

Create Base Plugin

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

Clone the Example Implementation

استنسخ مستودع dodopayments-figma:
في manifest.json المستنسخ، استبدل name وid بالقيم من manifest.json الخاص بإضافتك التي أنشأتها. هذا المثال هو نقطة البداية لتكامل الخدمة.
غيّر عنوان remote origin إلى مستودعك الخاص للتحكم في الإصدارات، مثلًا باستخدام git remote set-url origin <your-repository-url>.
3

Install Dependencies

في جذر المشروع، شغّل:
4

Configure Environment

عيّن API_MODE في src/ui/api.ts:
يحدد API_MODE مضيف API: https://test.dodopayments.com لـ test_mode، أو https://live.dodopayments.com لـ live_mode.
استخدم test_mode أثناء التطوير لتجنب معالجة مدفوعات حقيقية.
5

Customize Components

خصّص مكوّنات الإضافة في src/ui/components/ لتناسب احتياجاتك:
  • حدّث Authenticated.tsx لإتاحة الوظائف للمستخدمين الذين يملكون مفاتيح ترخيص صالحة.
  • خصّص LicenseKeyInput.tsx ليتوافق مع تصميمك.
Authenticated.tsx هو المكان الذي تضيف فيه ميزات إضافتك المتميزة. لا تعرض الإضافة هذه الميزات إلا بعد التحقق من مفتاح ترخيص أو تنشيطه.

​
الإعداد

1

Configure Network Access

يرسل المثال كل طلبات مفاتيح الترخيص من خلال وكيل CORS على https://dodo-payments-proxy.aagarwal9782.workers.dev، كما يسمح manifest.json بالوصول إلى الشبكة لهذا الوكيل فقط. الوكيل غير متاح، لذا استدعِ Dodo Payments API مباشرةً. تقبل API الطلبات من مصادر متعددة النطاقات من أي مصدر، بما في ذلك مصدر null لواجهة مستخدم المكوّن الإضافي.في manifest.json، استبدل نطاق الوكيل بمضيفي Dodo Payments API:
في src/ui/api.ts، استبدل fetch(proxyReq) بـ fetch(req) في validateLicenseKey وactivateLicenseKey، بحيث يذهب كل طلب إلى API مباشرةً.يسمح ذلك للمكوّن الإضافي بالتحقق من مفاتيح الترخيص وتنشيطها باستخدام Dodo Payments API.
2

Configure API Mode

في src/ui/api.ts، اضبط وضع API:
بدّل إلى live_mode فقط عندما تكون مستعدًا للإنتاج وبعد إجراء اختبارات شاملة في وضع الاختبار.

​
التطوير

1

Import Plugin

استورد المكوّن الإضافي إلى تطبيق Figma لسطح المكتب:
  1. افتح ملف تصميم.
  2. افتح قائمة Figma وحدد المكوّنات الإضافية.
  3. ضمن التطوير، حدد استيراد مكوّن إضافي جديد من البيان…، ثم حدد ملف manifest.json في جذر المشروع.
يحمّل البيان المكوّن الإضافي من الملفات المُنشأة في dist/، لذا ابدأ خادم التطوير أو شغّل npm run build قبل تشغيل المكوّن الإضافي.
تحتاج إلى تطبيق Figma لسطح المكتب لتطوير المكوّنات الإضافية واختبارها محليًا، لأن Figma يقرأ رمز المكوّن الإضافي من الملفات المحلية.
2

Start Development Server

يبدأ ذلك خادم التطوير مع مراقبة الملفات لإجراء عمليات إعادة إنشاء تلقائية. كما يتحقق من أنواع الرمز أثناء تغييره.
تُعاد عملية إنشاء المكوّن الإضافي تلقائيًا عند تغيير الرمز المصدر.

​
أوامر الإنشاء

يتضمن المشروع نصوص npm البرمجية التالية:

​
تكامل مفتاح الترخيص

يتحقق التنفيذ النموذجي من مفتاح الترخيص قبل إلغاء قفل المكوّن الإضافي. يمكنك تخصيص كل خطوة:
  1. إدخال المستخدم: يُدخل المستخدمون مفتاح الترخيص في واجهة مستخدم المكوّن الإضافي.
  2. التحقق: يتحقق المكوّن الإضافي افتراضيًا من المفتاح باستخدام التحقق من الترخيص (POST /licenses/validate).
  3. التنشيط: إذا كانت مفاتيح الترخيص لديك تتضمن حدًا للتنشيط، فاضبط needsActivation على true في src/ui/components/Unauthenticated.tsx. بعد ذلك ينشّط المكوّن الإضافي المفتاح باستخدام تنشيط الترخيص (POST /licenses/activate) بدلًا من التحقق منه، ويُسمّي المثيل Figma Plugin.
  4. التحكم في الوصول: بالنسبة إلى مفتاح صالح، يحفظ المكوّن الإضافي المفتاح باستخدام figma.clientStorage ويعرض Authenticated.tsx. عند فتح المكوّن الإضافي في المرة التالية، يتحقق من المفتاح المحفوظ مرة أخرى.

​
النشر

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

​
المستودع

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