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

> Ouvrez le checkout hébergé de Dodo Payments depuis une application React Native dans un onglet de navigateur système et récupérez un résultat typé en un seul appel.

<Info>
  Voici le SDK officiel de checkout React Native de Dodo Payments, `@dodopayments/react-native-checkout`. Il ouvre le checkout hébergé de Dodo dans une vue de navigateur native et renvoie un résultat typé. Remarque : un ancien package sans rapport nommé `dodopayments-react-native-sdk` (non scoped) existe avec une API complètement différente. Cette page documente uniquement le package scoped officiel actuel.
</Info>

<CardGroup cols={2}>
  <Card title="Checkout Sessions API" icon="cart-shopping" href="/developer-resources/checkout-session">
    Créez le checkout\_url depuis votre backend. Ce SDK l'ouvrira.
  </Card>

  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Découvrez comment cela s'intègre au flux de paiement mobile complet.
  </Card>
</CardGroup>

Le SDK React Native est un wrapper Turbo Module léger autour des mêmes cœurs natifs Swift et Kotlin. Il ouvre `SFSafariViewController` sur iOS et un Chrome Custom Tab sur Android, ne contient aucune clé API et n'appelle jamais directement l'API Dodo. Toute la logique du checkout s'exécute dans le navigateur ; le SDK gère simplement le cycle de vie de la vue et capture l'URL de retour.

<Warning>
  Ce SDK nécessite **New Architecture uniquement**, React Native 0.76+, iOS 16+ et Android `minSdk` 24.
</Warning>

## Installation

<Steps>
  <Step title="Install the Package">
    <Tabs>
      <Tab title="Android">
        Le package est autolinké et récupère `com.dodopayments.api:checkout-android` depuis Maven.

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

        Aucune configuration supplémentaire n'est nécessaire ; la dépendance native est résolue automatiquement.
      </Tab>

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

        Le cœur Swift est inclus dans le package et installé via CocoaPods.
      </Tab>

      <Tab title="Expo">
        Uniquement pour les builds de développement (pas Expo Go).

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

        Configurez ensuite votre `app.json` (voir Enregistrer un schéma d'URL de callback ci-dessous).
      </Tab>
    </Tabs>
  </Step>

  <Step title="Register a Callback URL Scheme">
    Votre application doit enregistrer un schéma d'URL pour recevoir l'URL de retour du checkout.

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

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

        Remplacez `"myapp"` par le schéma de votre application.
      </Tab>

      <Tab title="iOS (Info.plist)">
        Dans `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>
        ```

        Vous pouvez également l'ajouter via l'interface **Info → URL Types** de Xcode.
      </Tab>

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

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

        <Warning>
          Le package fournit également un plugin de configuration Expo `@dodopayments/react-native-checkout`,
          mais celui-ci n'écrit actuellement aucun schéma d'URL ni aucun placeholder de manifeste.
          Son ajout seul **n'enregistrera pas** votre schéma de callback : utilisez la configuration
          `expo-build-properties` et `infoPlist` ci-dessus.
        </Warning>

        <Note>
          Reconstruisez le projet natif après avoir modifié `app.json` :

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

          Cela fonctionne uniquement avec les builds de développement, pas avec Expo Go.
        </Note>
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Utilisation

```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;
}
```

## Transmettre l'URL de retour

Le listener `Linking` est requis pour la gestion de l'URL de retour sur iOS. Sur Android, `handleOpenURL` est une no-op qui résout `false`, car le cœur Android gère sa redirection nativement. Vous pouvez enregistrer le listener sans condition sur les deux plateformes.

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

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

## Signification du résultat

<Warning>
  `result.status` est un indice d'interface, pas une preuve de paiement. Confirmez chaque paiement depuis votre backend via le webhook `payment.succeeded` / `subscription.active`.
</Warning>

<ParamField body="status" type="CheckoutStatus" required>
  L'une des valeurs suivantes : `succeeded`, `failed`, `cancelled`, `pending`, `expired`.
</ParamField>

<ParamField body="paymentId" type="string">
  Défini lorsque l'URL de retour en contenait un. Affichez-le dans l'interface, mais ne l'utilisez pas pour accorder l'accès. Consultez Vérifier le paiement ci-dessous.
</ParamField>

<ParamField body="subscriptionId" type="string">
  Défini pour les checkouts d'abonnement.
</ParamField>

<ParamField body="licenseKeys" type="string[]">
  Défini lorsque le checkout inclut des produits avec des clés de licence.
</ParamField>

<ParamField body="customerEmail" type="string">
  Défini lorsque le checkout collecte une adresse e-mail.
</ParamField>

<ParamField body="raw" type="Record<string, string>">
  Chaque paramètre de requête de l'URL de retour, tel quel.
</ParamField>

## Vérifier le paiement

<CardGroup cols={2}>
  <Card title="Webhooks" icon="webhook" href="/developer-resources/webhooks">
    Dodo Payments appelle votre backend lorsqu'un paiement réussit ou qu'un abonnement est activé.
  </Card>

  <Card title="Get Payment Detail" icon="magnifying-glass" href="/api-reference/payments/get-payments-1">
    Recherchez `paymentId` avec votre clé secrète pour vérifier directement son statut.
  </Card>
</CardGroup>

Accordez l'accès après confirmation du paiement par l'un de ces moyens, jamais à partir de `result.status` seul.

## Erreurs

`start` rejette avec un `CheckoutError` uniquement en cas de mauvaise utilisation ou de défaillance de la plateforme. Un paiement annulé ou refusé est toujours un résultat, jamais une exception.

* `INVALID_CHECKOUT_URL` : URL de session qui n'est pas une `checkout.dodopayments.com`.
* `INVALID_RETURN_URL` : URL absolue non valide.
* `ALREADY_IN_PROGRESS` : un checkout est déjà en cours.
* `PLATFORM_ERROR` : défaillance inattendue de la plateforme.

## Sessions abandonnées

Si l'application ou le bundle JS est arrêté en cours de checkout, la promise est perdue, mais la couche native conserve la session. Récupérez-la lors du prochain montage et réconciliez-la avec votre backend.

```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();
}
```

## Voir aussi

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Le même contrat pour Android, iOS et Flutter.
  </Card>

  <Card title="Expo Boilerplate" icon="layer-group" href="/developer-resources/expo-boilerplate">
    Un exemple Expo complet avec intégration du checkout.
  </Card>
</CardGroup>