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

> دليل كامل لدمج Dodo Payments SDK في تطبيق React Native الخاص بك لمعالجة المدفوعات بشكل آمن

# دمج SDK لـ React Native

يمكنك من خلال Dodo Payments React Native SDK بناء تجارب دفع آمنة في تطبيقات Android و iOS الأصلية الخاصة بك. يوفر SDK مكونات واجهة مستخدم قابلة للتخصيص وشاشات لجمع تفاصيل الدفع.

* 📦 قم بتثبيت SDK الخاص بنا من [NPM](https://www.npmjs.com/package/dodopayments-react-native-sdk)
* 📚 عرض [مستودع العرض التوضيحي](https://github.com/dodopayments/dodopayments-react-native-demo) للحصول على أمثلة تنفيذ كاملة
* 🎥 شاهد [فيديو العرض التوضيحي](https://youtu.be/eicctkqK04Y) لرؤية Dodo Payments SDK في العمل

<Frame>
  <iframe className="w-full aspect-video rounded-md" src="https://www.youtube.com/embed/eicctkqK04Y" title="React Native SDK Demo | Dodo Payments" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>

## الميزات

<CardGroup cols={1}>
  <Card title="Simplified Security" icon="shield-check">
    اجمع بيانات الدفع الحساسة بأمان مع الالتزام بمتطلبات PCI
  </Card>

  <Card title="Multiple Payment Methods" icon="credit-card">
    اقبل [طرق الدفع](/features/payment-methods) المتنوعة لتوسيع التواجد العالمي
  </Card>

  <Card title="Native UI" icon="mobile">
    شاشات وعناصر أصيلة لأندرويد وiOS
  </Card>
</CardGroup>

<Note>
  حاليًا، Apple Pay وGoogle Pay وCash App وUPI غير مدعومة في SDK ريأكت نيتيف. نحن نعمل بنشاط لإضافة دعم لهذه طرق الدفع في الإصدارات القادمة.
</Note>

## التثبيت

<Steps>
  <Step title="Install the SDK">
    قم بتثبيت SDK من Dodo Payments باستخدام مدير الحزم المفضل لديك:

    <Tabs>
      <Tab title="npm">
        ```bash theme={null}
        npm install dodopayments-react-native-sdk
        ```
      </Tab>

      <Tab title="yarn">
        ```bash theme={null}
        yarn add dodopayments-react-native-sdk
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Platform-specific setup">
    <Tabs>
      <Tab title="iOS">
        قم بتشغيل pod install في مجلد iOS الخاص بك:

        ```bash theme={null}
        cd ios && pod install && npm run ios
        ```
      </Tab>

      <Tab title="Android">
        قم بتشغيل الأمر التالي:

        ```bash theme={null}
        npm run android
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

## إعداد جانب العميل

<Steps>
  <Step title="Get Publishable Key">
    احصل على مفتاح النشر من لوحة تحكم Dodo Payments. (مختلف لكل من وضعي الاختبار والحي)
    [https://app.dodopayments.com/developer/others](https://app.dodopayments.com/developer/others)
  </Step>

  <Step title="Setup Payment Provider">
    قم بتغليف تطبيقك بـ `DodoPaymentProvider`:

    ```tsx App.tsx theme={null}
    import React from 'react';
    import { DodoPaymentProvider } from 'dodopayments-react-native-sdk';
    import PaymentScreen from './PaymentScreen';

    function App() {
      return (
        <DodoPaymentProvider publishableKey="YOUR_PUBLISHABLE_KEY">
          <PaymentScreen />
        </DodoPaymentProvider>
      );
    }

    export default App;
    ```

    <Note>
      ستحتاج إلى إنشاء مفاتيح API من لوحة تحكم Dodo Payments. راجع [دليل إنشاء مفاتيح API](/api-reference/introduction#api-key-generation) للحصول على تعليمات مفصلة.
    </Note>
  </Step>

  <Step title="Create payment utility function">
    أنشئ دالة مساعدة لجلب معلمات الدفع من واجهة برمجة التطبيقات الخلفية الخاصة بك:

    ```tsx utils/fetchPaymentParams.ts theme={null}
    const API_URL = 'YOUR_BACKEND_URL'; // Replace with your server URL

    const fetchPaymentParams = async () => {
      const response = await fetch(`${API_URL}/create-payment`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });
      
      if (!response.ok) {
        throw new Error('Failed to fetch payment parameters');
      }
      
      return await response.json();
    };

    export default fetchPaymentParams;
    ```

    <Note>
      تفترض هذه الدالة وجود نقطة نهاية في الواجهة الخلفية تنشئ نوايا دفع وتعيد السر الخاص بالعميل. تأكد من تكوين الواجهة الخلفية بشكل صحيح للتعامل مع إنشاء الدفع. راجع [دليل تكامل API](/developer-resources/integration-guide) لأمثلة إعداد الواجهة الخلفية.
    </Note>
  </Step>

  <Step title="Implement the payment screen">
    أنشئ شاشة الدفع الخاصة بك باستخدام هوك `useCheckout`. فيما يلي تنفيذ كامل:

    ```tsx PaymentScreen.tsx theme={null}
    import React from 'react';
    import { View, Text, useColorScheme } from 'react-native';
    import { useCheckout, type sessionParams } from 'dodopayments-react-native-sdk';
    import fetchPaymentParams from './utils/fetchPaymentParams';

    const PaymentScreen = () => {
      const { initPaymentSession, presentPaymentSheet } = useCheckout();
      const [error, setError] = React.useState('');
      const [message, setMessage] = React.useState('');
      const [loading, setLoading] = React.useState(false);
      const [showSuccessScreen, setShowSuccessScreen] = React.useState(false);
      const isDarkMode = useColorScheme() === 'dark';

      const processPayment = async () => {
        setLoading(true);
        setMessage('');
        setError('');

        try {
          // 1. Get payment parameters from your backend
          const key = await fetchPaymentParams();
          
          // 2. Initialize payment session
          const paymentSheetParamsResult = await initPaymentSession({
            clientSecret: key.clientSecret,
          });
          
          // 3. Configure and present payment sheet
          const params: sessionParams = {
            ...(paymentSheetParamsResult as sessionParams),
            configuration: {
              appearance: {
                themes: isDarkMode ? 'dark' : 'light',
                primaryButton: {
                  colors: {
                    light: {
                      background: 'green',
                      componentBorder: 'green',
                      placeholderText: 'yellow',
                    },
                    dark: {
                      background: 'green',
                      componentBorder: 'green',
                      placeholderText: 'yellow',
                    },
                  },
                  shapes: {
                    borderRadius: 30,
                    borderWidth: 3,
                  },
                },
              },
              mode: 'test', // DEFAULTS TO TEST MODE
            },
          };

          const paymentSheetResponse = await presentPaymentSheet(params);

          // 4. Handle payment result
          switch (paymentSheetResponse?.status) {
            case 'cancelled':
              setError('Payment cancelled by user.');
              break;
            case 'succeeded':
              setMessage('');
              setShowSuccessScreen(true);
              break;
            case 'failed':
              setError('Payment failed : \n' + paymentSheetResponse?.message);
              break;
            default:
              setError(paymentSheetResponse?.message);
              setMessage('');
          }
        } catch (err) {
          setError('Failed to process payment');
        } finally {
          setLoading(false);
        }
      };

      return (
        <View>
          <Button 
            onPress={processPayment}
            disabled={loading}
            title={loading ? 'Processing...' : 'Pay Now'}
          />
          {error && <Text style={{ color: 'red' }}>{error}</Text>}
          {message && <Text style={{ color: 'green' }}>{message}</Text>}
          {showSuccessScreen && (
            <PaymentSuccessScreen
              amount={total}
              onContinue={() => setShowSuccessScreen(false)}
            />
          )}
        </View>
      );
    };

    export default PaymentScreen;
    ```

    <Note>
      للحصول على أمثلة كاملة مع التنسيق والتعامل مع الأخطاء وخيارات التخصيص، اطلع على مستودعات العرض التوضيحي:

      * [مثال التكامل الأساسي](https://github.com/dodopayments/dodopayments-react-native-demo)
    </Note>
  </Step>
</Steps>

## خيارات التكوين

### معلمات الجلسة

<ParamField path="clientSecret" type="string" required>
  سر العميل من نية الدفع، يتم الحصول عليه من واجهة One time payment أو الاشتراك.
</ParamField>

<ParamField path="mode" type="string" required>
  وضع جلسة الدفع (تجريبي أو حي).
</ParamField>

<ParamField path="configuration.appearance" type="object">
  خيارات التخصيص لمظهر صفحة الدفع
</ParamField>

<ParamField path="configuration.appearance.themes" type="string">
  وضع السمة: `'light'` أو `'dark'`
</ParamField>

### تخصيص المظهر

يمكنك تخصيص تجربة الدفع الموحدة في React Native لتتناسب مع تصميم تطبيقك عن طريق تعديل الألوان والخطوط والمزيد من خلال معلمة appearance عند استدعاء `initPaymentSession()`.

#### تخصيص الألوان

تحدد كل فئة لون لون مكون واحد أو أكثر في واجهة المستخدم. على سبيل المثال، `primary` يحدد لون زر الدفع.

| فئة اللون             | الاستخدام                                          |
| --------------------- | -------------------------------------------------- |
| `primary`             | اللون الأساسي لزر الدفع والعناصر المحددة           |
| `background`          | لون خلفية صفحة الدفع                               |
| `componentBackground` | لون خلفية الحقول والعلامات والمكونات الأخرى        |
| `componentBorder`     | لون الحد الخارجي للحقول والعلامات والمكونات الأخرى |
| `componentDivider`    | لون الحد الداخلي (الحدود المشتركة) للمكونات        |
| `primaryText`         | لون نص العنوان                                     |
| `secondaryText`       | لون نص التصنيفات لحقول الإدخال                     |
| `componentText`       | لون نص الإدخال (مثل رقم البطاقة، الرمز البريدي)    |
| `placeholderText`     | لون النص الوهمي لحقول الإدخال                      |
| `icon`                | لون الرموز (مثل زر الإغلاق)                        |
| `error`               | لون رسائل الخطأ والإجراءات المدمرة                 |

مثال على التكوين مع دعم للوضعين الفاتح والداكن:

```tsx theme={null}
const appearance = {
  colors: {
    light: {
      primary: '#F8F8F2',
      background: '#ffffff',
      componentBackground: '#E6DB74',
      componentBorder: '#FD971F',
      componentDivider: '#FD971F',
      primaryText: '#F8F8F2',
      secondaryText: '#75715E',
      componentText: '#AE81FF',
      placeholderText: '#E69F66',
      icon: '#F92672',
      error: '#FF0000',
    },
    dark: {
      primary: '#00ff0099',
      background: '#ff0000',
      componentBackground: '#ff0080',
      componentBorder: '#62ff08',
      componentDivider: '#d6de00',
      primaryText: '#5181fc',
      secondaryText: '#ff7b00',
      componentText: '#00ffff',
      placeholderText: '#00ffff',
      icon: '#f0f0f0',
      error: '#0f0f0f',
    },
  },
};
```

#### تخصيص الشكل

يمكنك تخصيص نصف قطر الحدود، وعرض الحدود، والظل المستخدم في جميع أنحاء واجهة الدفع:

```tsx theme={null}
const appearance = {
  shapes: {
    borderRadius: 10, // Border radius for input fields, tabs, and components
    borderWidth: 1,   // Border width for components
  },
};
```

#### تخصيص مكونات محددة

يمكنك تخصيص مكونات واجهة المستخدم المحددة مثل الزر الأساسي (زر الدفع). تأخذ هذه الإعدادات الأولوية على إعدادات المظهر العامة:

```tsx theme={null}
const appearance = {
  primaryButton: {
    colors: {
      background: '#000000',
      text: '#ffffff',
      border: '#ff00ff',
    },
    shapes: {
      borderRadius: 10,
      borderWidth: 1.5,
    },
  },
};
```

لتطبيق هذه التخصيصات، قم بتضمينها في تكوين جلسة الدفع الخاصة بك:

```tsx theme={null}
const params: sessionParams = {
  ...paymentSheetParams,
  configuration: {
    appearance: {
      themes: isDarkMode ? 'dark' : 'light',
      ...appearance, // Include your custom appearance settings
    },
  },
};
```

## معالجة الأخطاء

تعامل مع حالات الدفع المختلفة في دالة الخروج الخاصة بك:

```tsx theme={null}
const handlePaymentResult = (paymentSheetResponse) => {
  switch (paymentSheetResponse?.status) {
    case 'cancelled':
      // User cancelled the payment
      console.log('Payment cancelled by user');
      break;
    case 'succeeded':
      // Payment completed successfully
      console.log('Payment succeeded');
      // Navigate to success screen or update UI
      break;
    case 'failed':
      // Payment failed
      console.log('Payment failed:', paymentSheetResponse?.message);
      // Show error message to user
      break;
    default:
      console.log('Unknown payment status:', paymentSheetResponse?.status);
  }
};
```

<AccordionGroup>
  <Accordion title="Common Error Scenarios">
    * **مشكلات الاتصال بالشبكة**: تأكد من وجود اتصال إنترنت مستقر
    * **سر العميل غير صالح**: تحقق من أن الواجهة الخلفية تولّد نوايا دفع صالحة
    * **الاعتمادات المفقودة**: ثبّت جميع الاعتمادات المطلوبة
    * **الإعداد الخاص بالمنصة**: اكمل خطوات تكوين iOS وAndroid
    * **أخطاء API**: راجع [مرجع رموز الأخطاء](/api-reference/error-codes) للتعامل المفصل مع الأخطاء
  </Accordion>

  <Accordion title="Debugging Tips">
    * تمكين تسجيل التصحيح في التطوير
    * تحقق من الطلبات الشبكية إلى الخلفية
    * تأكد من تكوين مفاتيح API بشكل صحيح
    * اختبار على منصات iOS و Android
    * راجع [الأسئلة الشائعة الفنية](/miscellaneous/faq) للمشاكل الشائعة
    * استخدم [وضع الاختبار مقابل الوضع المباشر](/miscellaneous/test-mode-vs-live-mode) بشكل مناسب
  </Accordion>
</AccordionGroup>

### طرق الدفع التجريبية

<Tip>
  استخدم أرقام بطاقات اختبار في بيئة التطوير للتحقق من التكامل دون معالجة مدفوعات حقيقية. تعرّف أكثر على [عملية الاختبار](/miscellaneous/testing-process) وبيئات الاختبار المتاحة.
</Tip>