> ## 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 ऐप से system browser tab में Dodo Payments' hosted checkout खोलें और एक call में typed result प्राप्त करें।

<Info>
  यह आधिकारिक Dodo Payments React Native checkout SDK है, `@dodopayments/react-native-checkout`। यह Dodo's hosted checkout को native browser view में खोलता है और typed result लौटाता है। ध्यान दें: `dodopayments-react-native-sdk` (unscoped) नाम का एक पुराना, असंबंधित package मौजूद है, जिसका API पूरी तरह अलग है। यह पेज केवल वर्तमान आधिकारिक scoped package का documentation है।
</Info>

<CardGroup cols={2}>
  <Card title="Checkout Sessions API" icon="cart-shopping" href="/developer-resources/checkout-session">
    अपने backend से वह checkout\_url बनाएँ जिसे यह SDK खोलता है।
  </Card>

  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    देखें कि यह पूरे mobile payment flow में कैसे फिट होता है।
  </Card>
</CardGroup>

React Native SDK उसी native Swift और Kotlin cores के ऊपर एक thin Turbo Module wrapper है। यह iOS पर `SFSafariViewController` और Android पर Chrome Custom Tab खोलता है, कोई API key नहीं रखता और Dodo API को सीधे कभी call नहीं करता। Checkout का पूरा logic browser में चलता है; SDK केवल view lifecycle को manage करता है और return URL को capture करता है।

<Warning>
  इस SDK के लिए केवल **New Architecture**, React Native 0.76+, iOS 16+ और Android `minSdk` 24 आवश्यक हैं।
</Warning>

## Installation

<Steps>
  <Step title="Install the Package">
    <Tabs>
      <Tab title="Android">
        Package autolinked है और Maven से `com.dodopayments.api:checkout-android` प्राप्त करता है।

        ```sh theme={null}
        npm i @dodopayments/react-native-checkout
        ```

        किसी अतिरिक्त setup की आवश्यकता नहीं है; native dependency अपने-आप resolve हो जाती है।
      </Tab>

      <Tab title="iOS">
        ```sh theme={null}
        npm i @dodopayments/react-native-checkout
        cd ios && pod install
        ```

        Swift core package में bundled है और CocoaPods के माध्यम से install होता है।
      </Tab>

      <Tab title="Expo">
        केवल development builds के लिए (Expo Go के लिए नहीं)।

        ```sh theme={null}
        npm i @dodopayments/react-native-checkout
        npx expo install expo-build-properties
        ```

        इसके बाद अपना `app.json` configure करें (नीचे Register a Callback URL Scheme देखें)।
      </Tab>
    </Tabs>
  </Step>

  <Step title="Register a Callback URL Scheme">
    आपके app को checkout से return URL प्राप्त करने के लिए एक URL scheme register करनी होगी।

    <Tabs>
      <Tab title="Android (Gradle)">
        `android/app/build.gradle` में:

        ```kotlin android/app/build.gradle theme={null}
        android {
            defaultConfig {
                manifestPlaceholders["dodoCallbackScheme"] = "myapp"
            }
        }
        ```

        `"myapp"` को अपने app की scheme से बदलें।
      </Tab>

      <Tab title="iOS (Info.plist)">
        `ios/YourApp/Info.plist` में:

        ```xml Info.plist theme={null}
        <key>CFBundleURLTypes</key>
        <array>
          <dict>
            <key>CFBundleURLName</key>
            <string>myapp</string>
            <key>CFBundleURLSchemes</key>
            <array>
              <string>myapp</string>
            </array>
          </dict>
        </array>
        ```

        आप इसे Xcode के **Info → URL Types** UI के माध्यम से भी जोड़ सकते हैं।
      </Tab>

      <Tab title="Expo (both platforms)">
        `app.json` में:

        ```json app.json theme={null}
        {
          "expo": {
            "plugins": [
              [
                "expo-build-properties",
                {
                  "android": {
                    "manifestPlaceholders": {
                      "dodoCallbackScheme": "myapp"
                    }
                  }
                }
              ]
            ],
            "ios": {
              "infoPlist": {
                "CFBundleURLTypes": [
                  {
                    "CFBundleURLSchemes": ["myapp"]
                  }
                ]
              }
            }
          }
        }
        ```

        <Warning>
          Package में `@dodopayments/react-native-checkout` Expo config
          plugin भी शामिल है, लेकिन वर्तमान में यह कोई URL scheme और कोई manifest placeholder नहीं लिखता।
          इसे अकेले जोड़ने से आपकी callback scheme **register नहीं होगी** — ऊपर दी गई
          `expo-build-properties` और `infoPlist` configuration का उपयोग करें।
        </Warning>

        <Note>
          `app.json` में बदलाव करने के बाद native project को rebuild करें:

          ```sh theme={null}
          npx expo prebuild --clean
          ```

          यह केवल development builds के साथ काम करता है, Expo Go के साथ नहीं।
        </Note>
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Usage

```typescript theme={null}
import { Linking } from 'react-native';
import { DodoCheckout } from '@dodopayments/react-native-checkout';

// Required for iOS's return-URL handling.
Linking.addEventListener('url', ({ url }) => DodoCheckout.handleOpenURL(url));

const result = await DodoCheckout.start({
  checkoutUrl,                          // from your backend's checkout session
  returnUrl: 'myapp://checkout/return', // scheme must be registered (see Installation)
  onEvent: (e) => console.log(e.type),  // logging only
});

switch (result.status) {
  case 'succeeded': showSuccess(result.paymentId); break;
  case 'failed':    showFailure(); break;
  case 'cancelled': dismiss(); break;
  case 'pending':   showPending(); break;
  case 'expired':   showExpired(); break;
}
```

## Return URL को Forward करना

iOS के return-URL handling के लिए `Linking` listener आवश्यक है। Android पर `handleOpenURL` एक no-op है जो `false` resolve करता है, क्योंकि Android core अपने redirect को native रूप से handle करता है। दोनों platforms पर listener को unconditional रूप से register करना सुरक्षित है।

```typescript theme={null}
import { Linking } from 'react-native';
import { DodoCheckout } from '@dodopayments/react-native-checkout';

Linking.addEventListener('url', ({ url }) => {
  DodoCheckout.handleOpenURL(url);
});
```

## Result का अर्थ

<Warning>
  `result.status` एक UI hint है, payment का प्रमाण नहीं। हर payment को अपने backend से `payment.succeeded` / `subscription.active` webhook के माध्यम से confirm करें।
</Warning>

<ParamField body="status" type="CheckoutStatus" required>
  `succeeded`, `failed`, `cancelled`, `pending` या `expired` में से कोई एक।
</ParamField>

<ParamField body="paymentId" type="string">
  जब return URL में कोई शामिल हो, तब set होता है। इसे UI में display करें, access देने के लिए इसका उपयोग न करें। नीचे Verify the Payment देखें।
</ParamField>

<ParamField body="subscriptionId" type="string">
  Subscription checkouts के लिए set होता है।
</ParamField>

<ParamField body="licenseKeys" type="string[]">
  Checkout में license key products शामिल होने पर set होता है।
</ParamField>

<ParamField body="customerEmail" type="string">
  Checkout द्वारा email capture किए जाने पर set होता है।
</ParamField>

<ParamField body="raw" type="Record<string, string>">
  Return URL के सभी query parameters, verbatim।
</ParamField>

## Payment Verify करें

<CardGroup cols={2}>
  <Card title="Webhooks" icon="webhook" href="/developer-resources/webhooks">
    Payment सफल होने या subscription activate होने पर Dodo Payments आपके backend को call करता है।
  </Card>

  <Card title="Get Payment Detail" icon="magnifying-glass" href="/api-reference/payments/get-payments-1">
    इसकी status सीधे जाँचने के लिए अपने secret key से `paymentId` को look up करें।
  </Card>
</CardGroup>

इनमें से कोई payment confirm करने के बाद access दें; केवल `result.status` के आधार पर कभी नहीं।

## Errors

`start` केवल misuse या platform failure की स्थिति में `CheckoutError` के साथ reject होता है। Cancelled या declined payment हमेशा result होता है, exception नहीं।

* `INVALID_CHECKOUT_URL`: valid `checkout.dodopayments.com` session URL नहीं है।
* `INVALID_RETURN_URL`: valid absolute URL नहीं है।
* `ALREADY_IN_PROGRESS`: checkout पहले से चल रहा है।
* `PLATFORM_ERROR`: unexpected platform failure।

## Abandoned Sessions

यदि checkout के बीच में app या JS bundle kill हो जाता है, तो promise खो जाता है लेकिन native layer session को बनाए रखता है। अगले mount पर इसे recover करें और अपने backend के साथ reconcile करें।

```typescript theme={null}
import { DodoCheckout } from '@dodopayments/react-native-checkout';

const abandoned = await DodoCheckout.getAbandonedSession();
if (abandoned) {
  // reconcile abandoned.sessionId with your backend, then:
  await DodoCheckout.clearAbandonedSession();
}
```

## Related

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Android, iOS और Flutter के लिए वही contract।
  </Card>

  <Card title="Expo Boilerplate" icon="layer-group" href="/developer-resources/expo-boilerplate">
    checkout integration के साथ एक complete Expo example।
  </Card>
</CardGroup>