> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.

# نموذج إضافة Figma

> بناء إضافات Figma مع التحقق من مفتاح ترخيص Dodo Payments وتفعيله

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

## الميزات

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

## البدء

<Steps>
  <Step title="Create Base Plugin">
    أنشئ مشروع ملحق Figma خاص بك باستخدام [دليل البدء السريع لملحقات Figma](https://www.figma.com/plugin-docs/plugin-quickstart-guide/). سيؤدي ذلك إلى إنشاء هيكل أساسي مع ملف `manifest.json`.

    <Tip>
      هذه الخطوة تهدف فقط للحصول على اسم فريد ومعرّف لملحقك. يمكنك حذف الملفات المُنشأة بعد الالتزام بالمُعرف والاسم في مستودع Git الخاص بك في الخطوة التالية.
    </Tip>
  </Step>

  <Step title="Clone the Example Implementation">
    استنسخ مستودع [dodopayments-figma](https://github.com/dodopayments/dodopayments-figma) وقم بتحديث `manifest.json` فيه بالاسم والمعرّف من مجلد الملحق المُنشأ.

    ```bash theme={null}
    git clone https://github.com/dodopayments/dodopayments-figma.git
    cd dodopayments-figma
    ```

    يعمل هذا المثال كنقطة انطلاق لك للدمج.

    <Tip>
      تحتاج إلى تغيير عنوان URL للـ remote origin إلى مستودعك الخاص للتحكم في الإصدارات.
    </Tip>
  </Step>

  <Step title="Install Dependencies">
    شغّل الأمر التالي في جذر مشروعك:

    ```bash theme={null}
    npm install
    ```
  </Step>

  <Step title="Configure Environment">
    قم بتعيين `API_MODE` في `src/ui/api.ts`:

    ```typescript theme={null}
    const API_MODE = "test_mode"; // for development
    // const API_MODE = "live_mode"; // for production
    ```

    <Warning>
      استخدم دائماً `test_mode` أثناء التطوير لتجنب معالجة مدفوعات حقيقية.
    </Warning>
  </Step>

  <Step title="Customize Components">
    خصص مكونات الملحق لتتناسب مع احتياجاتك:

    * قم بتحديث `Authenticated.tsx` لعرض وظائف للمستخدمين الذين لديهم مفاتيح ترخيص صالحة
    * خصص `LicenseKeyInput.tsx` لتتوافق مع تفضيلات التصميم الخاصة بك

    <Note>
      مكون `Authenticated.tsx` هو المكان الذي ستضيف فيه الميزات المميزة لملحقك التي تتطلب ترخيصاً صالحاً.
    </Note>
  </Step>
</Steps>

## التكوين

<Steps>
  <Step title="Configure Network Access">
    يحتاج الملحق إلى الوصول إلى الشبكة للتواصل مع وكيل CORS. أضف التالية إلى `manifest.json`:

    ```json theme={null}
    {
      "networkAccess": {
        "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
      }
    }
    ```

    هذا يسمح للإضافة بالتحقق من مفاتيح الترخيص وتفعيلها باستخدام واجهة برمجة تطبيقات Dodo Payments.

    <Info>
      يلزم وجود وكيل CORS لأن واجهة برمجة تطبيقات Dodo Payments لا تسمح حالياً بإجراء استدعاءات API من التطبيقات المبنية على المتصفح.
    </Info>
  </Step>

  <Step title="Configure API Mode">
    في `src/ui/api.ts`، قم بتكوين وضع API:

    ```typescript theme={null}
    const API_MODE = "test_mode"; // or "live_mode"
    ```

    <Tip>
      انتقل إلى `live_mode` فقط عندما تكون جاهزاً للإنتاج وقد أجريت اختبارات دقيقة في وضع الاختبار.
    </Tip>
  </Step>
</Steps>

## التطوير

<Steps>
  <Step title="Import Plugin">
    قم باستيراد الملحق إلى Figma باستخدام "اِستيراد العَرْض" من تطبيق Figma لسطح المكتب.

    <Note>
      ستحتاج إلى تثبيت تطبيق Figma لسطح المكتب لتطوير الملحقات واختبارها محلياً.
    </Note>
  </Step>

  <Step title="Start Development Server">
    ```bash theme={null}
    npm run dev
    ```

    هذا يبدأ خادم التطوير مع مراقبة الملفات لإعادة البناء التلقائي.

    <Check>
      سيتم إعادة بناء الملحق تلقائياً عند إدخال تغييرات على كود المصدر.
    </Check>
  </Step>
</Steps>

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

| الأمر            | الوصف                                |
| ---------------- | ------------------------------------ |
| `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](https://www.figma.com/plugin-docs/publishing-plugins/)
4. قدّم للمراجعة عبر مجتمع Figma

## المستودع

يتوفر تنفيذ المثال الكامل على: [github.com/dodopayments/dodopayments-figma](https://github.com/dodopayments/dodopayments-figma)

استخدم هذا كنقطة انطلاق لبناء إضافة Figma المتميزة الخاصة بك مع دمج مفتاح ترخيص Dodo Payments.