# مقدمة (/ar/sdk)

مرجع لـ SDKs العميل بتاعة XPay. أدلة الدمج بتشرح إزاي تستخدمهم؛ والتاب ده بيسرد كل رمز عام.

XPay بتوفّر مكتبتين عميل رسميتين النهارده: محمّل JavaScript للمتصفّح، وغلاف React خفيف مبني فوقه. التاب ده **مرجع** لكل حاجة بيصدّرها كل package، وتواقيع الدوال، وأنواع الخيارات. لشرح إزاي تدمج كل نمط (Drop-in، Elements، الدفع المستضاف، روابط الدفع)، شوف [أنماط الدمج](/integrate/integration-patterns/hosted-checkout) تحت تاب Integrate.

## اختار الـ package المناسب [#اختار-الـ-package-المناسب]

<Cards>
  <Card icon="<Code />" title="JavaScript SDK" href="/sdk/sdk-js">
    `@xpayeg/sdk`. محمّل الـ SDK بتاع المتصفّح، والـ factory، وElements، وdrop-in checkout،
    والأنواع. استخدمه مباشرة لو مش على React.
  </Card>

  <Card icon="<FileCode />" title="React SDK" href="/sdk/sdk-react">
    `@xpayeg/react`. `XPayProvider`، والـ hooks (`useCheckout`، `useXPay`، `useElements`،
    `useConfirmPayment`)، والمكوّنات `PaymentElement` و`CheckoutButton`. بيغلّف الـ JS SDK لتطبيقات
    React.
  </Card>

  <Card icon="<Smartphone />" title="الموبايل" href="/sdk/mobile">
    SDKs الـ iOS / Android / React Native لسه ما اتشحنتش. مكان محجوز لحد ما تنزل.
  </Card>
</Cards>

## التاب ده بيستخدم في إيه [#التاب-ده-بيستخدم-في-إيه]

الصفحات اللي تحت التاب ده صفحات مرجعية. كل تصدير عام في كل package بياخد قسم واحد، مع توقيعه ومثال بالحد الأدنى. متهيّأة للبحث، مش للتعلّم.

* لشرح موجّه لـ **drop-in checkout**: [نمط Drop-in](/integrate/integration-patterns/drop-in).
* لشرح موجّه لـ **Elements**: [نمط Elements](/integrate/integration-patterns/elements).
* لنمط **الدفع المستضاف** (من غير SDK): [الدفع المستضاف](/integrate/integration-patterns/hosted-checkout).
* لـ **روابط الدفع** (من غير أي كود خالص): [روابط الدفع](/integrate/integration-patterns/payment-links).

## تطبيقات الأمثلة [#تطبيقات-الأمثلة]

تحب تقرا كود شغّال؟ الاتنين SDKs ليهم مثال جاهز للتشغيل في ريبو [xpay-examples](https://github.com/xpayeg/xpay-examples). اعمل clone، وحطّ مفاتيح الاختبار بتاعتك، وشغّل.

<Cards>
  <Card icon="<SquareCode />" title="مثال HTML عادي" href="https://github.com/xpayeg/xpay-examples/tree/main/vanilla-html">
    صفحات HTML عادية جاهزة للتشغيل لكل نمط: CDN script tag + الـ factory العام `XPay()`، وسيرفر
    Express صغيّر، من غير build step.
  </Card>

  <Card icon="<Atom />" title="متجر مثال Next.js" href="https://github.com/xpayeg/xpay-examples/tree/main/nextjs-react">
    متجر شغّال بيغطي الدفع المستضاف، وdrop-in، وinline، وElements، زائد مستقبِل webhooks متحقّق من
    التوقيع.
  </Card>
</Cards>

- [@xpayeg/sdk](/ar/sdk/sdk-js) — الـ JavaScript SDK بتاع المتصفّح. مرجع لكل تصدير عام، وتوقيع دالة، ونوع خيار.
- [@xpayeg/react](/ar/sdk/sdk-react) — الـ React SDK. XPayProvider، والـ hooks، والمكوّنات المبنية فوق @xpayeg/sdk.
- [الموبايل](/ar/sdk/mobile) — SDKs الـ iOS وAndroid وReact Native الأصلية لسه ما اتشحنتش.