React Native

Este es el SDK oficial de checkout de Dodo Payments para React Native, @dodopayments/react-native-checkout. Abre el checkout alojado de Dodo en una vista de navegador nativa y devuelve un resultado tipado. Nota: existe un paquete anterior no relacionado llamado dodopayments-react-native-sdk (sin ámbito) con una API completamente diferente. Esta página documenta únicamente el paquete oficial actual con ámbito.

Checkout Sessions API

Crea checkout_url, que este SDK abre, desde tu backend.

Mobile Integration Guide

Consulta cómo encaja esto en el flujo de pago móvil completo.

El SDK de React Native es un envoltorio delgado de Turbo Module sobre los mismos núcleos nativos de Swift y Kotlin. Abre SFSafariViewController en iOS y una pestaña personalizada de Chrome en Android, no contiene ninguna clave de API y nunca llama directamente a la API de Dodo. Toda la lógica del checkout se ejecuta en el navegador; el SDK simplemente administra el ciclo de vida de la vista y captura la URL de retorno.

Este SDK requiere únicamente New Architecture, React Native 0.76+, iOS 16+ y Android minSdk 24.

Instalación

Install the Package

Android
iOS
Expo

El paquete se enlaza automáticamente y obtiene com.dodopayments.api:checkout-android desde Maven.

npm i @dodopayments/react-native-checkout

No se necesita configuración adicional; la dependencia nativa se resuelve automáticamente.

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

El núcleo de Swift se incluye en el paquete y se instala mediante CocoaPods.

Solo para compilaciones de desarrollo (no Expo Go).

npm i @dodopayments/react-native-checkout
npx expo install expo-build-properties

A continuación, configura tu app.json (consulta Registrar un esquema de URL de callback más abajo).

Tu aplicación debe registrar un esquema de URL para recibir la URL de retorno del checkout.

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

En android/app/build.gradle:

android/app/build.gradle

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

Sustituye "myapp" por el esquema de tu aplicación.

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

También puedes añadir esto mediante la interfaz de usuario Info → URL Types de Xcode.

En app.json:

app.json

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

El paquete también incluye un plugin de configuración de Expo @dodopayments/react-native-checkout, pero actualmente no escribe ningún esquema de URL ni ningún marcador de posición del manifiesto. Añadirlo por sí solo no registrará tu esquema de callback; utiliza la configuración expo-build-properties y infoPlist anterior.

Vuelve a compilar el proyecto nativo después de editar app.json:

npx expo prebuild --clean

Esto funciona únicamente con compilaciones de desarrollo, no con Expo Go.

Uso

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

Reenvío de la URL de retorno

El listener Linking es necesario para el manejo de la URL de retorno en iOS. En Android, handleOpenURL no realiza ninguna operación y resuelve false porque el núcleo de Android gestiona su redirección de forma nativa. Es seguro registrar el listener incondicionalmente en ambas plataformas.

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

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

Qué significa el resultado

result.status es una indicación de la interfaz de usuario, no una prueba de pago. Confirma cada pago desde tu backend mediante el webhook payment.succeeded / subscription.active.

CheckoutStatus

requerido

Uno de succeeded, failed, cancelled, pending, expired.

string

Se establece cuando la URL de retorno incluía uno. Muéstralo en la interfaz de usuario; no lo uses para conceder acceso. Consulta Verificar el pago más abajo.

string

Se establece para los checkouts de suscripción.

string[]

Se establece cuando el checkout incluye productos con claves de licencia.

string

Se establece cuando el checkout captura un correo electrónico.

Record<string, string>

Cada parámetro de consulta de la URL de retorno, literalmente.

Verificar el pago

Webhooks

Dodo Payments llama a tu backend cuando un pago se completa correctamente o se activa una suscripción.

Get Payment Detail

Consulta paymentId con tu clave secreta para comprobar su estado directamente.

Concede acceso después de que uno de estos confirme el pago, nunca basándote únicamente en result.status.

Errores

start rechaza con un CheckoutError únicamente en caso de uso incorrecto o fallo de la plataforma. Un pago cancelado o rechazado siempre es un resultado, nunca una excepción.

INVALID_CHECKOUT_URL: no es una URL de sesión de checkout.dodopayments.com.
INVALID_RETURN_URL: no es una URL absoluta válida.
ALREADY_IN_PROGRESS: ya hay un checkout en ejecución.
PLATFORM_ERROR: fallo inesperado de la plataforma.

Sesiones abandonadas

Si la aplicación o el bundle de JS se cierra durante el checkout, la promesa se pierde, pero la capa nativa conserva la sesión. Recupérala en el siguiente montaje y concíliala con tu 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

Instalación

Uso

Reenvío de la URL de retorno

Qué significa el resultado

Verificar el pago

Webhooks

Get Payment Detail

Errores

Sesiones abandonadas

Relacionado

Mobile Integration Guide

Expo Boilerplate

Checkout Sessions API

Mobile Integration Guide

​Instalación

​Uso

​Reenvío de la URL de retorno

​Qué significa el resultado

​Verificar el pago

Webhooks

Get Payment Detail

​Errores

​Sesiones abandonadas

​Relacionado

Mobile Integration Guide

Expo Boilerplate

Instalación

Uso

Reenvío de la URL de retorno

Qué significa el resultado

Verificar el pago

Errores

Sesiones abandonadas

Relacionado