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

> Abre el checkout alojado de Dodo Payments desde una aplicación React Native en una pestaña del navegador del sistema y obtén un resultado tipado en una sola llamada.

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

<CardGroup cols={2}>
  <Card title="Checkout Sessions API" icon="cart-shopping" href="/developer-resources/checkout-session">
    Crea checkout\_url, que este SDK abre, desde tu backend.
  </Card>

  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    Consulta cómo encaja esto en el flujo de pago móvil completo.
  </Card>
</CardGroup>

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.

<Warning>
  Este SDK requiere únicamente **New Architecture**, React Native 0.76+, iOS 16+ y Android `minSdk` 24.
</Warning>

## Instalación

<Steps>
  <Step title="Install the Package">
    <Tabs>
      <Tab title="Android">
        El paquete se enlaza automáticamente y obtiene `com.dodopayments.api:checkout-android` desde Maven.

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

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

      <Tab title="iOS">
        ```sh theme={null}
        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.
      </Tab>

      <Tab title="Expo">
        Solo para compilaciones de desarrollo (no Expo Go).

        ```sh theme={null}
        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).
      </Tab>
    </Tabs>
  </Step>

  <Step title="Register a Callback URL Scheme">
    Tu aplicación debe registrar un esquema de URL para recibir la URL de retorno del checkout.

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

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

        Sustituye `"myapp"` por el esquema de tu aplicación.
      </Tab>

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

        También puedes añadir esto mediante la interfaz de usuario **Info → URL Types** de Xcode.
      </Tab>

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

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

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

        <Note>
          Vuelve a compilar el proyecto nativo después de editar `app.json`:

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

          Esto funciona únicamente con compilaciones de desarrollo, no con Expo Go.
        </Note>
      </Tab>
    </Tabs>
  </Step>
</Steps>

## Uso

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

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

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

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

## Qué significa el resultado

<Warning>
  `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`.
</Warning>

<ParamField body="status" type="CheckoutStatus" required>
  Uno de `succeeded`, `failed`, `cancelled`, `pending`, `expired`.
</ParamField>

<ParamField body="paymentId" type="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.
</ParamField>

<ParamField body="subscriptionId" type="string">
  Se establece para los checkouts de suscripción.
</ParamField>

<ParamField body="licenseKeys" type="string[]">
  Se establece cuando el checkout incluye productos con claves de licencia.
</ParamField>

<ParamField body="customerEmail" type="string">
  Se establece cuando el checkout captura un correo electrónico.
</ParamField>

<ParamField body="raw" type="Record<string, string>">
  Cada parámetro de consulta de la URL de retorno, literalmente.
</ParamField>

## Verificar el pago

<CardGroup cols={2}>
  <Card title="Webhooks" icon="webhook" href="/developer-resources/webhooks">
    Dodo Payments llama a tu backend cuando un pago se completa correctamente o se activa una suscripción.
  </Card>

  <Card title="Get Payment Detail" icon="magnifying-glass" href="/api-reference/payments/get-payments-1">
    Consulta `paymentId` con tu clave secreta para comprobar su estado directamente.
  </Card>
</CardGroup>

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.

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

## Relacionado

<CardGroup cols={2}>
  <Card title="Mobile Integration Guide" icon="mobile" href="/developer-resources/mobile-integration">
    El mismo contrato para Android, iOS y Flutter.
  </Card>

  <Card title="Expo Boilerplate" icon="layer-group" href="/developer-resources/expo-boilerplate">
    Un ejemplo completo de Expo con integración de checkout.
  </Card>
</CardGroup>