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

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.

Le plugin de configuration du package enregistre le schéma pour les deux plateformes à l’adresse prebuild. Transmettez-lui une option scheme dans app.json :

app.json

{
  "expo": {
    "scheme": "myapp",
    "plugins": [
      [
        "@dodopayments/react-native-checkout",
        { "scheme": "myappcheckout" }
      ]
    ]
  }
}

scheme doit correspondre à la valeur transmise à returnUrl (par exemple myappcheckout://return), et doit être différent de expo.scheme. Expo enregistre déjà celui-ci sur MainActivity, et sa réutilisation peut rediriger le retour du checkout vers le mauvais écran.Reconstruisez le projet natif après avoir modifié app.json :

npx expo prebuild --clean

Cela fonctionne uniquement avec les development builds, pas avec Expo Go.Si android/app/build.gradle est géré manuellement et ne contient aucun bloc defaultConfig { } standard que le plugin puisse trouver, ajoutez vous-même l’espace réservé. Consultez l’onglet Android ci-dessus.

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

Transfert de l’URL de retour

L’écouteur Linking est requis pour la gestion de l’URL de retour sur iOS. Sur Android, handleOpenURL est une opération sans effet qui résout false, car le cœur Android gère nativement sa redirection. Vous pouvez enregistrer l’écouteur 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, et non une preuve de paiement. Confirmez chaque paiement depuis votre backend, via le webhook payment.succeeded / subscription.active.

CheckoutStatus

requis

L’un des éléments suivants : succeeded, failed, cancelled, pending, expired.

string

Défini lorsque l’URL de retour en contient un. Affichez-le dans l’interface, mais ne l’utilisez pas pour accorder l’accès. Consultez la section Vérifier le paiement ci-dessous.

string

Défini pour les checkouts avec abonnement.

string[]

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

string

Défini lorsque le checkout recueille 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 est réussi 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 la confirmation du paiement par l’un de ces moyens, jamais à partir de result.status seul.

Erreurs

start rejette la requête avec une 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 promesse est perdue, mais la couche native conserve la session. Récupérez-la au 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

Transfert de l’URL de retour

Signification du résultat

Vérifier le paiement

Webhooks

Get Payment Detail

Erreurs

Sessions abandonnées

Contenu associé

Mobile Integration Guide

Expo Boilerplate

Checkout Sessions API

Mobile Integration Guide

​Installation

​Utilisation

​Transfert de l’URL de retour

​Signification du résultat

​Vérifier le paiement

Webhooks

Get Payment Detail

​Erreurs

​Sessions abandonnées

​Contenu associé

Mobile Integration Guide

Expo Boilerplate

Installation

Utilisation

Transfert de l’URL de retour

Signification du résultat

Vérifier le paiement

Erreurs

Sessions abandonnées

Contenu associé