> ## 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.

# نظرة عامة على موصلات الإطار

> موصلات جاهزة للإطار الشائع لدمج مدفوعات دودي في دقائق مع الحد الأدنى من التعليمات البرمجية

تقدم مدفوعات دودي موصلات رسمية للإطار تسهل دمج المدفوعات. تم تصميم كل موصل للعمل بسلاسة مع تقاليد إطارك، مما يوفر معالجة الدفع، وبوابة العملاء، والتعامل مع الويب هوك بشكل مباشر.

<Tip>
  تتيح لك الموصلات الخاصة بالأطر دمج Dodo Payments بأقل من 10 أسطر من التعليمات البرمجية. تتولى المصادقة وتحليل الطلبات وتنسيق الاستجابات تلقائيًا.
</Tip>

## موصلات الإطار المتاحة

اختر الموصل الذي يتناسب مع إطارك:

<CardGroup cols={2}>
  <Card title="Next.js" icon="react" href="/developer-resources/nextjs-adaptor">
    دعم App Router مع معالجات المسارات للدفع والبوابة والويب هوكس
  </Card>

  <Card title="Nuxt" icon="vuejs" href="/developer-resources/nuxt-adaptor">
    إطار عمل متكامل مبني على Vue مع تكامل لمسارات الخادم
  </Card>

  <Card title="Express" icon="node-js" href="/developer-resources/express-adaptor">
    معالجات قائمة على الوسيط لإطار Node.js الشهير
  </Card>

  <Card title="Fastify" icon="bolt" href="/developer-resources/fastify-adaptor">
    إطار Node.js عالي الأداء مع بنية مكوّنات إضافية
  </Card>

  <Card title="Hono" icon="cloud" href="/developer-resources/hono-adaptor">
    إطار ويب فائق السرعة للحافة و Cloudflare Workers والمزيد
  </Card>

  <Card title="Astro" icon="star" href="/developer-resources/astro-adaptor">
    إطار يركز على المحتوى مع دعم نقاط نهاية الخادم
  </Card>

  <Card title="SvelteKit" icon="code" href="/developer-resources/sveltekit-adaptor">
    إطار Svelte متكامل كامل مع تكامل روابط الخادم
  </Card>

  <Card title="Remix" icon="react" href="/developer-resources/remix-adaptor">
    إطار React متكامل كامل مع معالجات المحمّل والإجراءات
  </Card>

  <Card title="TanStack Start" icon="chart-line" href="/developer-resources/tanstack-adaptor">
    إطار React متكامل آمن بالأنواع مع وظائف الخادم
  </Card>

  <Card title="Better Auth" icon="shield" href="/developer-resources/better-auth-adaptor">
    إضافة إطار عمل المصادقة لتجربة سلسة للمصادقة والدفع
  </Card>

  <Card title="Convex" icon="database" href="/developer-resources/convex-component">
    مكوّن Backend-as-a-Service لمزامنة الدفع في الوقت الفعلي
  </Card>

  <Card title="Bun" icon="bolt" href="/developer-resources/bun-adaptor">
    معالجات Bun.serve() الأصلية للدفع والبوابة والويب هوكس
  </Card>
</CardGroup>

## الميزات الأساسية

توفر جميع موصلات الأطر هذه القدرات المدمجة:

| الميزة               | الوصف                                                          |
| -------------------- | -------------------------------------------------------------- |
| **معالج الدفع**      | دعم لتدفقات الدفع الثابتة والديناميكية والتي تستند إلى الجلسات |
| **بوابة العملاء**    | معالج مبني مسبقًا لإدارة الاشتراكات والفوترة                   |
| **معالج الويب هوكس** | التحقق من التوقيع الآمن مع معالجات أحداث مطبوعة                |
| **إعداد البيئة**     | إعداد بسيط عبر متغيرات البيئة                                  |
| **أمان الأنواع**     | دعم كامل لـ TypeScript مع حمولات بيانات مطبوعة                 |

## البدء السريع

ابدأ بأي موصل إطار في ثلاث خطوات:

<Steps>
  <Step title="Install the Adaptor">
    استخدم مدير الحزم الخاص بك لتثبيت الموصل الخاص بالإطار:

    <Tabs>
      <Tab title="Next.js">
        ```bash theme={null}
        npm install @dodopayments/nextjs
        ```
      </Tab>

      <Tab title="Nuxt">
        ```bash theme={null}
        npm install @dodopayments/nuxt
        ```
      </Tab>

      <Tab title="Express">
        ```bash theme={null}
        npm install @dodopayments/express
        ```
      </Tab>

      <Tab title="Hono">
        ```bash theme={null}
        npm install @dodopayments/hono
        ```
      </Tab>

      <Tab title="Astro">
        ```bash theme={null}
        npm install @dodopayments/astro
        ```
      </Tab>

      <Tab title="SvelteKit">
        ```bash theme={null}
        npm install @dodopayments/sveltekit
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Configure Environment Variables">
    أضف بيانات اعتماد Dodo Payments إلى بيئتك:

    ```env theme={null}
    DODO_PAYMENTS_API_KEY=your-api-key
    DODO_PAYMENTS_WEBHOOK_KEY=your-webhook-secret
    DODO_PAYMENTS_RETURN_URL=https://yourdomain.com/checkout/success
    DODO_PAYMENTS_ENVIRONMENT="test_mode" # or "live_mode"
    ```

    <Warning>
      لا تُدرِج ملف `.env` أو الأسرار في نظام التحكم في الإصدارات أبدًا.
    </Warning>
  </Step>

  <Step title="Create Route Handlers">
    أعد إعداد مسارات Checkout والبوابة والويب هوكس الخاصة بك:

    <Tabs>
      <Tab title="Next.js">
        ```typescript theme={null}
        // app/checkout/route.ts
        import { Checkout } from "@dodopayments/nextjs";

        export const GET = Checkout({
          bearerToken: process.env.DODO_PAYMENTS_API_KEY,
          returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
          environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
        });
        ```
      </Tab>

      <Tab title="Express">
        ```typescript theme={null}
        import { checkoutHandler } from '@dodopayments/express';

        app.get('/api/checkout', checkoutHandler({
          bearerToken: process.env.DODO_PAYMENTS_API_KEY,
          returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
          environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
        }));
        ```
      </Tab>

      <Tab title="Hono">
        ```typescript theme={null}
        import { Checkout } from "@dodopayments/hono";

        app.get('/checkout', Checkout({
          bearerToken: process.env.DODO_PAYMENTS_API_KEY,
          returnUrl: process.env.DODO_PAYMENTS_RETURN_URL,
          environment: process.env.DODO_PAYMENTS_ENVIRONMENT,
        }));
        ```
      </Tab>
    </Tabs>

    <Check>
      أنت الآن جاهز لمعالجة المدفوعات! قم بزيارة صفحات الموصل الفردية لمعرفة الأدلة التفصيلية وجميع الخيارات المتاحة.
    </Check>
  </Step>
</Steps>

## أنواع تدفقات الدفع

جميع الموصلات تدعم ثلاثة أنواع من تدفق الدفع:

<AccordionGroup>
  <Accordion title="Static Checkout (GET)">
    استخدم الدفع الثابت للروابط البسيطة والمشاركة. مرر معرف المنتج كمعامل استعلام:

    ```
    /api/checkout?productId=pdt_xxx&quantity=1
    ```

    يدعم ملء بيانات العميل المسبق والتخصيص اختياريًا عبر معاملات الاستعلام.
  </Accordion>

  <Accordion title="Dynamic Checkout (POST)">
    استخدم الدفع الديناميكي لإنشاء المدفوعات برمجيًا بتفاصيل مخصصة:

    ```json theme={null}
    {
      "product_id": "pdt_xxx",
      "customer": {
        "email": "customer@example.com",
        "name": "John Doe"
      },
      "quantity": 1
    }
    ```

    يدعم كل من المدفوعات مرة واحدة والاشتراكات.
  </Accordion>

  <Accordion title="Checkout Sessions (POST)">
    استخدم جلسات الدفع لأكثر تجارب الدفع مرونة مع دعم السلة:

    ```json theme={null}
    {
      "product_cart": [
        { "product_id": "pdt_xxx", "quantity": 1 },
        { "product_id": "pdt_yyy", "quantity": 2 }
      ],
      "customer": {
        "email": "customer@example.com"
      }
    }
    ```

    تعرف على المزيد في [دليل جلسات الدفع](/developer-resources/checkout-session).
  </Accordion>
</AccordionGroup>

## معالجة أحداث الويب هوكس

جميع الموصلات توفر معالجة ويب هوكس آمنة بأنواع مع ردود نداء للأحداث التفصيلية:

```typescript theme={null}
Webhooks({
  webhookKey: process.env.DODO_PAYMENTS_WEBHOOK_KEY,
  onPayload: async (payload) => {
    // Handle any webhook event
  },
  onPaymentSucceeded: async (payload) => {
    // Handle successful payments
  },
  onSubscriptionActive: async (payload) => {
    // Handle new subscriptions
  },
  // ... 20+ event types supported
});
```

<Info>
  جميع معالجات الويب هوكس تتحقق تلقائيًا من التوقيعات وتتحقق من صحة الحمولات باستخدام مخططات Zod. يتم رفض الطلبات غير الصالحة مع رموز خطأ مناسبة.
</Info>

## اختيار الموصل المناسب

| الإطار             | الأفضل من أجله                                   | وقت التشغيل    |
| ------------------ | ------------------------------------------------ | -------------- |
| **Next.js**        | تطبيقات React الكاملة مع App Router              | Node.js، Edge  |
| **Nuxt**           | تطبيقات Vue.js الكاملة                           | Node.js        |
| **Express**        | واجهات برمجة التطبيقات REST والتطبيقات التقليدية | Node.js        |
| **Fastify**        | واجهات برمجة تطبيقات عالية الأداء                | Node.js        |
| **Hono**           | عمليات النشر على الحافة و Cloudflare Workers     | Edge، Node.js  |
| **Astro**          | مواقع محتوى مع نقاط نهاية الخادم                 | Node.js، Edge  |
| **SvelteKit**      | تطبيقات Svelte الكاملة                           | Node.js        |
| **Remix**          | React كامل مع التوجيه المتداخل                   | Node.js        |
| **TanStack Start** | React الكامل الآمن بالأنواع                      | Node.js        |
| **Better Auth**    | التطبيقات التي تستخدم Better Auth بالفعل         | متنوع          |
| **Convex**         | التطبيقات التي تستخدم Convex للبنية الخلفية      | Convex Runtime |
| **Bun**            | تطبيقات خادم Bun الأصلية                         | Bun            |

## الحصول على المساعدة

هل تحتاج لمساعدة في موصلات الأطر؟

* **Discord**: انضم إلى [خادم المجتمع](https://discord.gg/bYqAp4ayYh) للحصول على مساعدة فورية

* **البريد الإلكتروني**: تواصل معنا عبر [support@dodopayments.com](mailto:support@dodopayments.com)

* **GitHub**: افتح مشكلة في مستودع الموصل المعني

* **التوثيق**: تصفح [مرجع واجهة برمجة التطبيقات](/api-reference/introduction)

* **Discord**: انضم إلى [خادم المجتمع](https://discord.gg/bYqAp4ayYh) للحصول على مساعدة في الوقت الحقيقي

* **البريد الإلكتروني**: اتصل بنا على [support@dodopayments.com](mailto:support@dodopayments.com)

* **GitHub**: افتح مشكلة في مستودع الموصل المعني

* **التوثيق**: قم بزيارة [مرجع API](/api-reference/introduction)

* **Discord**: Join our [community server](https://discord.gg/bYqAp4ayYh) for real-time help

* **Email**: Contact us at [support@dodopayments.com](mailto:support@dodopayments.com)

* **GitHub**: Open an issue on the respective adaptor repository

* **Documentation**: Visit our [API reference](/api-reference/introduction)