React Native

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.

Checkout Sessions API

Créez le checkout_url depuis votre backend. Ce SDK l’ouvrira.

Mobile Integration Guide

Découvrez comment cela s’intègre au flux de paiement mobile complet.

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.

Ce SDK nécessite New Architecture uniquement, React Native 0.76+, iOS 16+ et Android minSdk 24.

Installation

Install the Package

Android
iOS
Expo

Le package est autolinké et récupère com.dodopayments.api:checkout-android depuis Maven.

npm i @dodopayments/react-native-checkout

Aucune configuration supplémentaire n’est nécessaire ; la dépendance native est résolue automatiquement.

npm i @dodopayments/react-native-checkout
cd ios && pod install

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

Uniquement pour les builds de développement (pas Expo Go).

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

Votre application doit enregistrer un schéma d’URL pour recevoir l’URL de retour du checkout.

Android (Gradle)
iOS (Info.plist)
Expo (both platforms)

Dans android/app/build.gradle :

android/app/build.gradle

android {
    defaultConfig {
        manifestPlaceholders["dodoCallbackScheme"] = "myapp"
    }
}

Remplacez "myapp" par le schéma de votre application.

Dans ios/YourApp/Info.plist :

Info.plist

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

Dans app.json :

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "manifestPlaceholders": {
              "dodoCallbackScheme": "myapp"
            }
          }
        }
      ]
    ],
    "ios": {
      "infoPlist": {
        "CFBundleURLTypes": [
          {
            "CFBundleURLSchemes": ["myapp"]
          }
        ]
      }
    }
  }
}

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.

Reconstruisez le projet natif après avoir modifié app.json :

npx expo prebuild --clean

Cela fonctionne uniquement avec les builds de développement, pas avec Expo Go.

Utilisation

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.

import { Linking } from 'react-native';
import { DodoCheckout } from '@dodopayments/react-native-checkout';

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

Signification du résultat

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.

CheckoutStatus

requis

L’une des valeurs suivantes : succeeded, failed, cancelled, pending, expired.

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.

string

Défini pour les checkouts d’abonnement.

string[]

Défini lorsque le checkout inclut des produits avec des clés de licence.

string

Défini lorsque le checkout collecte une adresse e-mail.

Record<string, string>

Chaque paramètre de requête de l’URL de retour, tel quel.

Vérifier le paiement

Webhooks

Dodo Payments appelle votre backend lorsqu’un paiement réussit ou qu’un abonnement est activé.

Get Payment Detail

Recherchez paymentId avec votre clé secrète pour vérifier directement son statut.

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.

import { DodoCheckout } from '@dodopayments/react-native-checkout';

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

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Checkout Sessions API

Mobile Integration Guide

Installation

Utilisation

Transmettre l’URL de retour

Signification du résultat

Vérifier le paiement

Webhooks

Get Payment Detail

Erreurs

Sessions abandonnées

Voir aussi

Mobile Integration Guide

Expo Boilerplate

Checkout Sessions API

Mobile Integration Guide

​Installation

​Utilisation

​Transmettre l’URL de retour

​Signification du résultat

​Vérifier le paiement

Webhooks

Get Payment Detail

​Erreurs

​Sessions abandonnées

​Voir aussi

Mobile Integration Guide

Expo Boilerplate

Installation

Utilisation

Transmettre l’URL de retour

Signification du résultat

Vérifier le paiement

Erreurs

Sessions abandonnées

Voir aussi