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

# نموذج إكسبو الأساسي

> قم ببناء تطبيقات موبايل React Native مع مدفوعات دودي باستخدام نموذج إكسبو الأساسي الخاص بنا. يتضمن تكامل الدفع، معالجة المدفوعات، ودعم TypeScript.

<Card title="GitHub Repository" icon="github" href="https://github.com/dodopayments/expo-boilerplate">
  هيكل متكامل لـ Expo + React Native + Dodo Payments
</Card>

## نظرة عامة

نموذج جاهز للإنتاج لتكامل مدفوعات دودي في تطبيقات إكسبو/React Native. يتضمن هذا القالب إنشاء جلسات الدفع، معالجة المدفوعات، وتكوين TypeScript المناسب لمساعدتك في البدء بقبول المدفوعات في تطبيقك المحمول بسرعة.

<Info>
  يستخدم هذا الهيكل SDK لـ Expo مع TypeScript ويتضمن تنفيذاً نموذجياً لجلسات الدفع ومعالجة المدفوعات.
</Info>

<Frame>
  <iframe className="w-full aspect-video rounded-md" src="https://www.youtube.com/embed/78N1qw14m0Y" title="عرض توضيحي لهيكل Expo | Dodo Payments" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

## المتطلبات الأساسية

* Node.js 18+
* Expo CLI أو EAS CLI
* حساب مدفوعات دودي (مفتاح API من لوحة التحكم)
* محاكي iOS أو محاكي Android (أو جهاز فعلي)

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

<Steps>
  <Step title="Clone the Repository">
    استنسخ مستودع الهيكل وانتقل إلى دليل المشروع:

    ```bash theme={null}
    git clone https://github.com/dodopayments/expo-boilerplate.git
    cd expo-boilerplate
    ```
  </Step>

  <Step title="Get Your API Credentials">
    احصل على بيانات الاعتماد من لوحة تحكم Dodo Payments في وضع الاختبار:

    * **مفتاح API**: انتقل إلى **المطور → مفاتيح API** في [لوحة التحكم](https://app.dodopayments.com)

    <Tip>
      ابدأ بوضع الاختبار لاختبار التكامل بأمان دون معالجة مدفوعات حقيقية.
    </Tip>
  </Step>

  <Step title="Configure Environment Variables">
    أنشئ ملف `.env` في الدليل الجذري:

    ```bash theme={null}
    touch .env
    ```

    أضف بيانات اعتماد مدفوعات دودي الخاصة بك:

    ```bash .env theme={null}
    EXPO_PUBLIC_DODO_API_KEY=your_test_api_key_here
    ```

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

  <Step title="Install Dependencies">
    قم بتثبيت حزم npm المطلوبة:

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

  <Step title="Start the Development Server">
    ابدأ خادم تطوير Expo:

    ```bash theme={null}
    npx expo start
    ```

    امسح رمز الاستجابة السريعة باستخدام تطبيق Expo Go على جهازك، أو اضغط `i` لمحاكي iOS أو `a` لمحاكي Android.

    <Check>
      أنت جاهز للبدء في البناء! يتضمن الهيكل شاشات ومكونات نموذجية لمساعدتك على فهم التكامل.
    </Check>
  </Step>
</Steps>

## ما هو مدرج

يأتي النموذج مع الأساسيات المكونة مسبقًا:

<CardGroup cols={2}>
  <Card title="Checkout Integration" icon="shopping-cart">
    تنفيذ نموذجي لإنشاء جلسات الخروج ومعالجتها
  </Card>

  <Card title="Payment Handling" icon="credit-card">
    تدفق الدفع الكامل مع معالجة النجاح والأخطاء
  </Card>

  <Card title="TypeScript Support" icon="code">
    إعداد TypeScript كامل مع تعريفات أنواع مناسبة
  </Card>

  <Card title="Expo Router" icon="route">
    إعداد التنقل باستخدام Expo Router لتوجيه سلس
  </Card>
</CardGroup>

## هيكل المشروع

```
expo-boilerplate/
├── app/
│   ├── (tabs)/
│   │   └── index.tsx          # Home screen with examples
│   └── checkout.tsx           # Checkout screen
├── components/
│   └── PaymentButton.tsx      # Payment button component
├── lib/
│   └── dodo.ts                # Dodo Payments client setup
├── .env.example               # Environment variables template
└── package.json
```

## الخطوات التالية

بمجرد تشغيل النموذج:

<Steps>
  <Step title="Create Your Products">
    أضف المنتجات في [لوحة تحكم Dodo Payments](https://app.dodopayments.com) لتمكين وظيفة الخروج.
  </Step>

  <Step title="Customize the Integration">
    كيفية التكيف مع الكود النموذجي بما يتناسب مع احتياجات وتصميم تطبيقك.
  </Step>

  <Step title="Test on Real Devices">
    اختبر تدفق الدفع على الأجهزة الحقيقية لضمان عمل كل شيء بشكل صحيح.
  </Step>

  <Step title="Go Live">
    عند الاستعداد، قم بالتبديل إلى مفاتيح واجهة برمجة التطبيقات في الوضع الحي وأنشئ تطبيقك للإنتاج.
  </Step>
</Steps>

## البناء للإنتاج

<Steps>
  <Step title="Install EAS CLI">
    ```bash theme={null}
    npm install -g eas-cli
    ```
  </Step>

  <Step title="Configure EAS">
    ```bash theme={null}
    eas build:configure
    ```
  </Step>

  <Step title="Build Your App">
    لنظام iOS:

    ```bash theme={null}
    eas build --platform ios
    ```

    لـ Android:

    ```bash theme={null}
    eas build --platform android
    ```
  </Step>
</Steps>

## موارد إضافية

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    دليل مفصل لتنفيذ المدفوعات في تطبيقات الجوال
  </Card>

  <Card title="React Native Integration" icon="react" href="/developer-resources/react-native-integration">
    توثيق التكامل الخاص بـ React Native
  </Card>

  <Card title="Integration Guide" icon="book" href="/developer-resources/integration-guide">
    دليل مفصل لتنفيذ المدفوعات لمرة واحدة
  </Card>

  <Card title="API Reference" icon="brackets-curly" href="/api-reference/introduction">
    استكشف التوثيق الكامل لواجهة برمجة تطبيقات Dodo Payments
  </Card>
</CardGroup>

## الدعم

تحتاج إلى مساعدة بشأن النموذج؟

* انضم إلى [مجتمع Discord](https://discord.gg/bYqAp4ayYh) لطرح الأسئلة والنقاشات
* تحقق من [مستودع GitHub](https://github.com/dodopayments/expo-boilerplate) للمشاكل والتحديثات
* اتصل بفريق [الدعم الخاص بنا](mailto:support@dodopayments.com) للحصول على المساعدة