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

> आपके React Native एप्लिकेशन में सुरक्षित भुगतान प्रसंस्करण के लिए Dodo Payments SDK को एकीकृत करने के लिए पूर्ण गाइड

# React Native SDK एकीकरण

Dodo Payments React Native SDK आपको अपने मूल Android और iOS ऐप्स में सुरक्षित भुगतान अनुभव बनाने की अनुमति देता है। हमारा SDK भुगतान विवरण एकत्र करने के लिए अनुकूलन योग्य UI घटक और स्क्रीन प्रदान करता है।

* 📦 हमारे SDK को [NPM](https://www.npmjs.com/package/dodopayments-react-native-sdk) से स्थापित करें
* 📚 पूर्ण कार्यान्वयन उदाहरणों के लिए हमारे [डेमो रिपॉजिटरी](https://github.com/dodopayments/dodopayments-react-native-demo) को देखें
* 🎥 Dodo Payments SDK को क्रियान्वित होते हुए देखने के लिए हमारा [डेमो वीडियो](https://youtu.be/eicctkqK04Y) देखें

<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">
    वैश्विक पहुँच बढ़ाने के लिए विभिन्न [payment methods](/features/payment-methods) स्वीकार करें
  </Card>

  <Card title="Native UI" icon="mobile">
    Android और iOS के लिए मूल स्क्रीन और तत्व
  </Card>
</CardGroup>

<Note>
  वर्तमान में, React Native SDK में Apple Pay, Google Pay, Cash App, और UPI समर्थित नहीं हैं। हम इन भुगतान विधियों के लिए भविष्य के रिलीज़ में समर्थन जोड़ने पर सक्रिय रूप से काम कर रहे हैं।
</Note>

## स्थापना

<Steps>
  <Step title="Install the SDK">
    अपने पसंदीदा पैकेज मैनेजर का उपयोग करके Dodo Payments SDK इंस्टॉल करें:

    <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">
        अपनी iOS फ़ोल्डर में pod install चलाएँ:

        ```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 डैशबोर्ड से अपना publishable key प्राप्त करें। (टेस्ट और लाइव मोड दोनों के लिए अलग-अलग)
    [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>
      आपको अपने Dodo Payments डैशबोर्ड से API कीज़ उत्पन्न करनी होंगी। विस्तृत निर्देशों के लिए हमारी [API key generation guide](/api-reference/introduction#api-key-generation) देखें।
    </Note>
  </Step>

  <Step title="Create payment utility function">
    अपनी backend API से भुगतान पैरामीटर प्राप्त करने के लिए एक उपयोगिता फ़ंक्शन बनाएं:

    ```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>
      यह फ़ंक्शन मानता है कि आपके पास एक backend API endpoint है जो payment intents बनाता है और एक client secret लौटाता है। सुनिश्चित करें कि आपका backend भुगतान निर्माण को संभालने के लिए ठीक से कॉन्फ़िगर किया गया है। बैकएंड सेटअप उदाहरणों के लिए हमारी [API Integration Tutorial](/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>
      स्टाइलिंग, त्रुटि हैंडलिंग, और अनुकूलन विकल्पों के साथ पूर्ण उदाहरणों के लिए हमारे डेमो रिपॉजिटरी देखें:

      * [Basic Integration Demo](https://github.com/dodopayments/dodopayments-react-native-demo)
    </Note>
  </Step>
</Steps>

## कॉन्फ़िगरेशन विकल्प

### सत्र पैरामीटर

<ParamField path="clientSecret" type="string" required>
  आपकी भुगतान मंशा से प्राप्त client secret, जिसे वन टाइम पेमेंट या सब्सक्रिप्शन API से प्राप्त किया गया है।
</ParamField>

<ParamField path="mode" type="string" required>
  भुगतान सत्र का मोड (test या live)।
</ParamField>

<ParamField path="configuration.appearance" type="object">
  भुगतान शीट की उपस्थिति के लिए अनुकूलन विकल्प
</ParamField>

<ParamField path="configuration.appearance.themes" type="string">
  थीम मोड: `'light'` या `'dark'`
</ParamField>

### उपस्थिति अनुकूलन

आप appearance पैरामीटर को संशोधित करके React Native Unified Checkout को अपने ऐप की डिज़ाइन के अनुरूप अनुकूलित कर सकते हैं जब आप `initPaymentSession()` को कॉल करते हैं।

#### रंग अनुकूलन

प्रत्येक रंग श्रेणी UI में एक या अधिक घटकों का रंग निर्धारित करती है। उदाहरण के लिए, `primary` Pay बटन का रंग निर्धारित करता है।

| Color Category        | Usage                                              |
| --------------------- | -------------------------------------------------- |
| `primary`             | Pay बटन और चयनित आइटम के लिए प्राथमिक रंग          |
| `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
  },
};
```

#### घटक-विशिष्ट अनुकूलन

आप प्राथमिक बटन (भुगतान बटन) जैसे विशिष्ट UI घटकों को अनुकूलित कर सकते हैं। ये सेटिंग्स वैश्विक उपस्थिति सेटिंग्स पर प्राथमिकता लेती हैं:

```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">
    * **Network connectivity issues**: सुनिश्चित करें कि इंटरनेट कनेक्शन स्थिर है
    * **Invalid client secret**: सत्यापित करें कि बैकएंड मान्य भुगतान मंशाएँ उत्पन्न कर रहा है
    * **Missing peer dependencies**: सभी आवश्यक निर्भरताएँ इंस्टॉल करें
    * **Platform-specific setup**: iOS और Android कॉन्फ़िगरेशन चरणों को पूरा करें
    * **API errors**: विस्तृत त्रुटि हैंडलिंग के लिए हमारे [Error Codes Reference](/api-reference/error-codes) को देखें
  </Accordion>

  <Accordion title="Debugging Tips">
    * विकास में डिबग लॉगिंग सक्षम करें
    * अपने बैकएंड के लिए नेटवर्क अनुरोधों की जांच करें
    * सुनिश्चित करें कि API कुंजियाँ सही ढंग से कॉन्फ़िगर की गई हैं
    * iOS और Android दोनों प्लेटफार्मों पर परीक्षण करें
    * सामान्य समस्याओं के लिए हमारे [Technical FAQs](/miscellaneous/faq) की समीक्षा करें
    * [Test vs Live Mode](/miscellaneous/test-mode-vs-live-mode) का उपयुक्त रूप से उपयोग करें
  </Accordion>
</AccordionGroup>

### परीक्षण भुगतान विधियाँ

<Tip>
  विकास में वास्तविक भुगतान प्रोसेस किए बिना अपने एकीकरण को सत्यापित करने के लिए टेस्ट कार्ड नंबरों का उपयोग करें। हमारे [testing process](/miscellaneous/testing-process) और उपलब्ध टेस्ट परिवेशों के बारे में अधिक जानें।
</Tip>