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.

Personnalisation de l’apparence

Personnalisez la barre d’outils, les boutons et le jeu de couleurs du navigateur de checkout via customization sur start(...). Les options sont regroupées par plateforme, car l’onglet personnalisé d’Android et SFSafariViewController d’iOS exposent des contrôles natifs différents. Tous les champs sont facultatifs ; si vous omettez customization, l’apparence par défaut de chaque plateforme est utilisée.

Android — Custom Tab

Couleur d’arrière-plan de la barre d’outils.

Couleur de la barre de navigation.

Couleur du séparateur au-dessus de la barre de navigation.

'default' | 'back'

default affiche l’icône système « X » ; back affiche à la place une flèche de retour.

'start' | 'end'

Indique de quel côté de la barre d’outils le bouton de fermeture apparaît.

Affiche l’icône de partage de la barre d’outils.

boolean

Affiche le titre de la page sous l’URL dans la barre d’outils.

boolean

Permet à la barre d’outils de se masquer automatiquement lorsque la page défile.

boolean

Affiche « Ajouter cette page aux favoris » dans le menu Plus d’options.

boolean

Affiche « Télécharger la page » dans le menu Plus d’options.

'system' | 'light' | 'dark'

Force l’apparence claire ou sombre, quel que soit le réglage système de l’appareil.

iOS — SFSafariViewController

'done' | 'close' | 'cancel'

Libellé ou icône du bouton de fermeture.

'pageSheet' | 'fullScreen'

pageSheet se présente sous forme de carte avec balayage pour fermer ; fullScreen couvre tout l’écran.

boolean

Permet à la barre d’outils de se réduire lors du défilement. Visible uniquement lorsque presentationStyle est fullScreen — pageSheet maintient les barres fixes, quel que soit ce réglage.

'system' | 'light' | 'dark'

Force l’apparence claire ou sombre, quel que soit le réglage système de l’appareil.

const result = await DodoCheckout.start({
  checkoutUrl,
  returnUrl: 'myapp://checkout/return',
  customization: {
    android: { toolbarColor: '#6366F1', closeButtonStyle: 'back' },
    ios: { presentationStyle: 'fullScreen', colorScheme: 'dark' },
  },
});

Erreurs

start rejette avec un CheckoutError uniquement en cas de mauvaise utilisation ou d’échec 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 : échec inattendu 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 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

Transfert de l’URL de retour

Signification du résultat

Vérifier le paiement

Webhooks

Get Payment Detail

Personnalisation de l’apparence

Erreurs

Sessions abandonnées

Voir aussi

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

​Personnalisation de l’apparence

​Erreurs

​Sessions abandonnées

​Voir aussi

Mobile Integration Guide

Expo Boilerplate

Installation

Utilisation

Transfert de l’URL de retour

Signification du résultat

Vérifier le paiement

Personnalisation de l’apparence

Erreurs

Sessions abandonnées

Voir aussi