# REACT-NATIVE - Adapty Documentation (Full Content)

This file contains the complete content of all documentation pages for this platform.

Locale: es

Generated on: 2026-05-15T20:13:57.596Z
Total files: 40

---


# File: sdk-installation-react-native-expo
---

---
title: "Instalar y configurar el SDK de Adapty para React Native en un proyecto Expo"
description: "Guía paso a paso para instalar el SDK de Adapty para React Native en un proyecto Expo para apps con suscripciones."
---

:::important
Esta guía cubre la instalación y configuración del SDK de Adapty para React Native **en un proyecto Expo**.

Si usas **React Native puro (sin Expo)**, sigue la [guía de instalación para React Native](sdk-installation-react-native-pure).
:::

El SDK de Adapty incluye dos módulos clave para una integración fluida en tu app de React Native:

- **Core Adapty**: Este módulo es necesario para que Adapty funcione correctamente en tu app.
- **AdaptyUI**: Este módulo es necesario si usas el [Adapty Paywall Builder](adapty-paywall-builder), una herramienta visual sin código para crear paywalls multiplataforma fácilmente. AdaptyUI se activa automáticamente junto con el módulo principal.

Si quieres un tutorial completo sobre cómo implementar compras in-app en tu app de React Native, consulta [este artículo](https://adapty.io/blog/react-native-in-app-purchases-tutorial/).

:::tip
¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app Expo? Echa un vistazo a nuestras apps de ejemplo:
- [Ejemplo con Expo dev build](https://github.com/adaptyteam/AdaptySDK-React-Native/tree/master/examples/FocusJournalExpo) para funcionalidad completa con compras reales y Paywall Builder
- [Ejemplo con Expo Go y Web](https://github.com/adaptyteam/AdaptySDK-React-Native/tree/master/examples/ExpoGoWebMock) para pruebas con modo mock
:::

Para un recorrido completo de la implementación, también puedes ver el vídeo:
<div style={{ textAlign: 'center' }}>
<iframe width="560" height="315" src="https://www.youtube.com/embed/TtCJswpt2ms?si=FlFJGvpj-U33yoNK" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

## Requisitos \{#requirements\}

El SDK de Adapty para React Native es compatible con iOS 13.0+, pero el uso de paywalls creados en el [Adapty Paywall Builder](adapty-paywall-builder) requiere iOS 15.0+.

:::info
Adapty es compatible con Google Play Billing Library hasta la versión 8.x. Por defecto, Adapty trabaja con Google Play Billing Library v.7.0.0, pero si quieres forzar una versión posterior, puedes [añadir la dependencia manualmente](https://developer.android.com/google/play/billing/integrate#dependency). En Expo, esto se puede hacer durante el prebuild o mediante un config plugin.
:::

---
no_index: true
---
import Callout from '../../../components/Callout.astro';

<Callout type="info">
Instalar el SDK es el paso 5 de la configuración de Adapty. Para que las compras funcionen en tu app, también necesitas conectar tu app a los stores, y luego crear productos, un paywall y un placement en el Adapty Dashboard. La [guía de inicio rápido](quickstart) explica todos los pasos necesarios.
</Callout>

## Instalar el SDK de Adapty \{#install-adapty-sdk\}

[![Release](https://img.shields.io/github/v/release/adaptyteam/AdaptySDK-React-Native.svg?style=flat&logo=react)](https://github.com/adaptyteam/AdaptySDK-React-Native/releases)

:::important
Se requiere [Expo Dev Client](https://docs.expo.dev/versions/latest/sdk/dev-client/) (una build de desarrollo personalizada) para usar Adapty en un proyecto Expo.

Expo Go no admite módulos nativos personalizados, por lo que solo puedes usarlo con el [**modo mock**](#set-up-mock-mode-for-expo-go--expo-web) para el desarrollo de UI/lógica (sin compras reales ni renderizado de AdaptyUI/Paywall Builder).
:::

1. Instala el SDK de Adapty (esto también instala `@adapty/core` automáticamente):
   ```sh
   npx expo install react-native-adapty
   npx expo prebuild
   ```
2. Compila tu app para desarrollo usando EAS o una build local:

   <Tabs>
   <TabItem value="eas" label="EAS build" default>
      ```sh 
      # Para iOS
      eas build --profile development --platform ios

   # Para Android
   eas build --profile development --platform android
      ```
   </TabItem>
   
   <TabItem value="local" label="Local build">
      ```sh 
      # Para iOS
      npx expo run:ios
      
      # Para Android
      npx expo run:android
      ```
   </TabItem>
   </Tabs>
3. Inicia el servidor de desarrollo:
   ```sh 
   npx expo start --dev-client
   ```

## Activar el módulo Adapty del SDK de Adapty \{#activate-adapty-module-of-adapty-sdk\}

Para obtener tu **Public SDK Key**:

1. Ve al Adapty Dashboard y navega a [**App settings → General**](https://app.adapty.io/settings/general).
2. En la sección **Api keys**, copia la **Public SDK Key** (NO la Secret Key).
3. Reemplaza `"YOUR_PUBLIC_SDK_KEY"` en el código.

:::important

- Asegúrate de usar la **Public SDK key** para inicializar Adapty; la **Secret key** solo debe usarse para la [API del servidor](getting-started-with-server-side-api).
- Las **SDK keys** son únicas para cada app, así que si tienes varias apps asegúrate de elegir la correcta.
:::

Copia el siguiente código en `App.tsx` para activar Adapty:

```typescript showLineNumbers title="App.tsx"

adapty.activate('YOUR_PUBLIC_SDK_KEY');
```

:::important
Espera a que `activate` se resuelva antes de llamar a cualquier otro método del SDK de Adapty. Consulta [Orden de llamadas en el SDK de React Native](react-native-sdk-call-order) para ver la secuencia completa.
:::

Ahora configura los paywalls en tu app:

- Si usas [Adapty Paywall Builder](adapty-paywall-builder), sigue el [inicio rápido de Paywall Builder](react-native-quickstart-paywalls).
- Si construyes tu propia UI de paywall, consulta el [inicio rápido para paywalls personalizados](react-native-quickstart-manual).

:::tip
Para evitar errores de activación en el entorno de desarrollo, usa los [consejos](#development-environment-tips).
:::

## Activar el módulo AdaptyUI del SDK de Adapty \{#activate-adaptyui-module-of-adapty-sdk\}

Si planeas usar el [Paywall Builder](adapty-paywall-builder), necesitas el módulo AdaptyUI. Se activa automáticamente cuando activas el módulo principal; no necesitas hacer nada más.

## Configuración opcional \{#optional-setup\}

### Registro de actividad \{#logging\}

#### Configurar el sistema de registro \{#set-up-the-logging-system\}

Adapty registra errores e información importante para ayudarte a entender qué está ocurriendo. Los siguientes niveles están disponibles:

| Nivel      | Descripción                                                  |
| ---------- | ------------------------------------------------------------ |
| `error`    | Solo se registran los errores                                    |
| `warn`     | Se registran errores y mensajes del SDK que no causan errores críticos, pero que conviene atender |
| `info`     | Se registran errores, advertencias y varios mensajes informativos |
| `verbose`  | Se registra cualquier información adicional que pueda ser útil durante la depuración, como llamadas a funciones, consultas a la API, etc. |

Puedes establecer el nivel de registro en tu app antes o durante la configuración de Adapty:

```typescript showLineNumbers title="App.tsx"
// Establece el nivel de registro antes de la activación
// Se recomienda 'verbose' para el desarrollo y la primera versión en producción
adapty.setLogLevel('verbose');

// O establécelo durante la configuración
adapty.activate('YOUR_PUBLIC_SDK_KEY', {
  logLevel: 'verbose',
});
```

### Políticas de datos \{#data-policies\}

Adapty no almacena datos personales de tus usuarios a menos que los envíes explícitamente, pero puedes implementar políticas adicionales de seguridad de datos para cumplir con las directrices de la store o del país.

#### Deshabilitar la recopilación y compartición de la dirección IP \{#disable-ip-address-collection-and-sharing\}

Al activar el módulo Adapty, establece `ipAddressCollectionDisabled` en `true` para deshabilitar la recopilación y compartición de la dirección IP del usuario. El valor predeterminado es `false`.

Usa este parámetro para mejorar la privacidad del usuario, cumplir con las normativas regionales de protección de datos (como el RGPD o la CCPA), o reducir la recopilación de datos innecesaria cuando las funciones basadas en IP no son necesarias para tu app.

```typescript showLineNumbers title="App.tsx"
adapty.activate('YOUR_PUBLIC_SDK_KEY', {
  ipAddressCollectionDisabled: true,
});
```

#### Deshabilitar la recopilación y compartición del ID de publicidad \{#disable-advertising-id-collection-and-sharing\}

Al activar el módulo Adapty, establece `ios.idfaCollectionDisabled` (iOS) o `android.adIdCollectionDisabled` (Android) en `true` para deshabilitar la recopilación de identificadores publicitarios. El valor predeterminado es `false`.

Usa este parámetro para cumplir con las políticas de App Store/Play Store, evitar que se active el aviso de App Tracking Transparency, o si tu app no requiere atribución publicitaria ni analíticas basadas en IDs publicitarios.

```typescript showLineNumbers title="App.tsx"
adapty.activate('YOUR_PUBLIC_SDK_KEY', {
  ios: {
    idfaCollectionDisabled: true,      
  },
  android: {
    adIdCollectionDisabled: true,      
  },
});
```

#### Configurar la caché de medios para AdaptyUI \{#set-up-media-cache-configuration-for-adaptyui\}

De forma predeterminada, AdaptyUI almacena en caché los medios (como imágenes y vídeos) para mejorar el rendimiento y reducir el uso de la red. Puedes personalizar la configuración de la caché proporcionando una configuración personalizada.

Usa `mediaCache` para sobreescribir la configuración predeterminada de la caché:

```typescript
adapty.activate('YOUR_PUBLIC_SDK_KEY', {
  mediaCache: {
    memoryStorageTotalCostLimit: 200 * 1024 * 1024, // Opcional: tamaño de la caché en memoria en bytes
    memoryStorageCountLimit: 2147483647,            // Opcional: número máximo de elementos en memoria
    diskStorageSizeLimit: 200 * 1024 * 1024,       // Opcional: tamaño de la caché en disco en bytes
  },
});
```

Parámetros:
| Parámetro | Requerido | Descripción |
|-----------|----------|-------------|
| memoryStorageTotalCostLimit | opcional | Tamaño total de la caché en memoria en bytes. El valor predeterminado es específico de la plataforma. |
| memoryStorageCountLimit | opcional | Límite de elementos en la memoria. El valor predeterminado es específico de la plataforma. |
| diskStorageSizeLimit | opcional | Límite de tamaño de archivo en disco en bytes. El valor predeterminado es específico de la plataforma. |

### Habilitar niveles de acceso locales (Android) \{#enable-local-access-levels-android\}

De forma predeterminada, los [niveles de acceso locales](local-access-levels) están habilitados en iOS y deshabilitados en Android. Para habilitarlos también en Android, establece `localAccessLevelAllowed` en `true`:

```typescript showLineNumbers title="App.tsx"
adapty.activate('YOUR_PUBLIC_SDK_KEY', {
  android: {
     localAccessLevelAllowed: true,      
  },
});
```

### Limpiar datos al restaurar desde copia de seguridad \{#clear-data-on-backup-restore\}

Cuando `clearDataOnBackup` se establece en `true`, el SDK detecta cuándo la app se restaura desde una copia de seguridad de iCloud y elimina todos los datos del SDK almacenados localmente, incluida la información del perfil en caché, los detalles de los productos y los paywalls. El SDK se inicializa entonces con un estado limpio. El valor predeterminado es `false`.

:::note
Solo se elimina la caché local del SDK. El historial de transacciones con Apple y los datos del usuario en los servidores de Adapty permanecen sin cambios.
:::

```typescript showLineNumbers title="App.tsx"
adapty.activate('YOUR_PUBLIC_SDK_KEY', {
   ios: {
       clearDataOnBackup: true
   },
});
```

## Consejos para el entorno de desarrollo \{#development-environment-tips\}

#### Configurar el modo mock para Expo Go / Expo Web \{#set-up-mock-mode-for-expo-go--expo-web\}

Los entornos Expo Go y Expo Web no tienen acceso a los módulos nativos de Adapty. Para evitar errores en tiempo de ejecución mientras puedes seguir compilando y probando la UI y la lógica de paywalls de tu app, Adapty ofrece el **modo mock**.

::::important
El modo mock **no** es una herramienta para probar compras reales:

- **No abre** los flujos de compra de App Store / Google Play y **no crea** transacciones reales.
- **No renderiza** paywalls/onboardings creados con el **Adapty Paywall Builder (AdaptyUI)**.
- Los módulos nativos de Adapty son **completamente ignorados**: ni siquiera los archivos del SDK nativo que falten en la build de Xcode/Android o una clave de API no válida generarán errores.

Para probar compras reales y paywalls del Paywall Builder, usa un Expo Dev Client / build de producción donde el modo mock se deshabilita automáticamente.
::::

**Por defecto**, el SDK detecta automáticamente los entornos Expo Go y web, y habilita el modo mock. No necesitas configurar nada a menos que quieras personalizar los datos mock.

Cuando el modo mock está activo:
- Todos los métodos de Adapty devuelven datos mock sin hacer solicitudes de red a los servidores de Adapty.
- Por defecto, el perfil mock inicial no tiene suscripciones activas.
- Por defecto, `makePurchase(...)` simula una compra exitosa y concede acceso premium.

Puedes personalizar los datos mock usando `mockConfig` durante la activación. Consulta el formato de configuración y los parámetros admitidos [aquí](https://react-native.adapty.io/interfaces/adaptymockconfig).

```typescript showLineNumbers title="App.tsx"

try {
  await adapty.activate('YOUR_PUBLIC_SDK_KEY', {
    mockConfig: {
      // Personaliza el perfil mock inicial (opcional)
    },
  });
} catch (error) {
  console.error('Failed to activate Adapty SDK:', error);
}
```

Si necesitas llamar a métodos del SDK antes de la activación (como `isActivated()` o `setLogLevel()`), usa `enableMock()` antes de `activate()`. Si el bridge ya está inicializado, este método no hace nada.

```typescript showLineNumbers title="App.tsx"

adapty.enableMock(); // Opcional: pasa mockConfig para personalizar los datos mock

// Ahora puedes llamar a métodos antes de la activación

await adapty.activate('YOUR_PUBLIC_SDK_KEY');
```

#### Retrasar la activación del SDK para fines de desarrollo \{#delay-sdk-activation-for-development-purposes\}

Adapty obtiene de forma anticipada todos los datos de usuario necesarios al activar el SDK, lo que permite un acceso más rápido a datos actualizados.

Sin embargo, esto puede ser un problema en el simulador de iOS, que con frecuencia solicita autenticación durante el desarrollo. Aunque Adapty no puede controlar el flujo de autenticación de StoreKit, sí puede aplazar las solicitudes realizadas por el SDK para obtener datos de usuario actualizados.

Al habilitar la propiedad `__debugDeferActivation`, la llamada a activate se retiene hasta que se realiza la siguiente llamada al SDK de Adapty. Esto evita solicitudes innecesarias de datos de autenticación si no son necesarias.

Es importante tener en cuenta que **esta funcionalidad está pensada solo para uso en desarrollo**, ya que no cubre todos los escenarios posibles del usuario. En producción, la activación no debe retrasarse, ya que los dispositivos reales suelen recordar los datos de autenticación y no solicitan credenciales repetidamente.

Este es el enfoque recomendado para usarlo:

```typescript showLineNumbers title="Typescript"
try {
  adapty.activate('PUBLIC_SDK_KEY', {
    __debugDeferActivation: isSimulator(), // 'isSimulator' de cualquier librería de terceros
  });
} catch (error) {
  console.error('Failed to activate Adapty SDK:', error);
  // Maneja el error de forma adecuada para tu app
}
```

#### Solucionar errores de activación del SDK con el Fast Refresh de React Native \{#troubleshoot-sdk-activation-errors-on-react-natives-fast-refresh\}

Al desarrollar con el SDK de Adapty en React Native, puede que te encuentres con el error: `Adapty can only be activated once. Ensure that the SDK activation call is not made more than once.`

Esto ocurre porque la función de recarga rápida de React Native provoca múltiples llamadas de activación durante el desarrollo. Para evitarlo, usa la opción `__ignoreActivationOnFastRefresh` establecida en `__DEV__` (la bandera del modo de desarrollo de React Native).
```typescript showLineNumbers title="Typescript"
try {
  adapty.activate('PUBLIC_SDK_KEY', {
    __ignoreActivationOnFastRefresh: __DEV__, 
  });
} catch (error) {
  console.error('Failed to activate Adapty SDK:', error);
  // Maneja el error de forma adecuada para tu app
}
```

## Solución de problemas \{#troubleshooting\}

#### Error de versión mínima de iOS \{#minimum-ios-version-error\}

Al compilar para iOS, puede que veas un error sobre la **versión mínima de iOS** o el deployment target, especialmente si usas paywalls creados en el [Adapty Paywall Builder](adapty-paywall-builder), que requieren **iOS 15.0+**.

Como Expo genera el proyecto iOS (incluido el `Podfile`) durante `expo prebuild`, **no debes editar el `Podfile` directamente**. En su lugar, configura el deployment target mediante el config plugin `expo-build-properties`.

1. Instala el plugin:

   ```sh
   npx expo install expo-build-properties
   ```
2. Actualiza tu configuración de Expo (`app.json` o `app.config.js`) para establecer el deployment target de iOS:

```
{
    "expo": {
        // ...otras configuraciones de Expo...
        "plugins": [
            [
                "expo-build-properties",
                {
                    "ios": {
                        // Usa "13.0" solo para funciones principales de Adapty,
                        // o "15.0" si usas paywalls creados en el paywall builder.
                        "deploymentTarget": "15.0"
                    }
                }
            ],
        ]
    }
}
```

3. Regenera el proyecto nativo de iOS y vuelve a compilar:

```
npx expo prebuild --clean
npx expo run:ios      # o `eas build -p ios` en tu CI
```

#### Conflicto de manifiesto con Android Auto Backup \{#android-auto-backup-manifest-conflict\}

Al usar Expo con varios SDKs que configuran Android Auto Backup (como Adapty, AppsFlyer o expo-secure-store), puede que te encuentres con un conflicto de fusión de manifiestos.

Un error típico tiene este aspecto: `Manifest merger failed : Attribute application@fullBackupContent value=(@xml/secure_store_backup_rules) from AndroidManifest.xml:24:248-306
is also present at [io.adapty:android-sdk:3.12.0] AndroidManifest.xml:9:18-70 value=(@xml/adapty_backup_rules).`

Para resolver este conflicto, necesitas que el plugin de Adapty gestione la configuración de Android backup.
Si tu proyecto también usa `expo-secure-store`, deshabilita su propia configuración de backup para evitar solapamientos.

Así es como se configura en tu `app.json`:

```json title="app.json"
{
  "expo": {
    "plugins": [
      ["react-native-adapty", { "replaceAndroidBackupConfig": true }],
      ["expo-secure-store", { "configureAndroidBackup": false }]
    ]
  }
}
```
La opción `replaceAndroidBackupConfig` está en `false` por defecto. Cuando se habilita, permite que el plugin de Adapty controle las reglas de backup de Android.
Incluye `"configureAndroidBackup": false` si usas `expo-secure-store` para evitar advertencias, ya que la configuración de backup de SecureStore será gestionada por Adapty.

:::important
Esta configuración solo respeta los requisitos de backup para Adapty, AppsFlyer y expo-secure-store.
Si otras librerías de tu proyecto definen reglas de backup personalizadas, tendrás que configurarlas manualmente.
:::

---


# File: sdk-installation-react-native-pure
---

---
title: "Instalar y configurar Adapty SDK en un proyecto React Native puro"
description: "Guía paso a paso para instalar Adapty SDK en React Native para apps basadas en suscripciones."
---

:::important
Esta guía aplica únicamente a **proyectos React Native puros (sin Expo)**.  
Si usas **Expo**, sigue la [guía de instalación para Expo](sdk-installation-react-native-expo).
:::

El SDK de Adapty incluye dos módulos clave para integrarse sin problemas en tu app de React Native:

- **Core Adapty**: Este módulo es obligatorio para que Adapty funcione correctamente en tu app.
- **AdaptyUI**: Este módulo es necesario si usas el [Adapty Paywall Builder](adapty-paywall-builder), una herramienta visual sin código para crear paywalls multiplataforma fácilmente. AdaptyUI se activa automáticamente junto con el módulo principal.

:::tip
¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app móvil? Echa un vistazo a nuestras [apps de ejemplo](https://github.com/adaptyteam/AdaptySDK-React-Native/tree/master/examples), que muestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funcionalidades básicas.
:::

## Requisitos \{#requirements\}

El SDK de Adapty para React Native es compatible con iOS 13.0+, pero para usar paywalls creados en el [Adapty Paywall Builder](adapty-paywall-builder) se requiere iOS 15.0+.

:::info
Adapty es compatible con Google Play Billing Library hasta la versión 8.x. Por defecto, Adapty trabaja con Google Play Billing Library v.7.0.0, pero si quieres forzar una versión posterior, puedes [añadir la dependencia](https://developer.android.com/google/play/billing/integrate#dependency) manualmente.
:::

---
no_index: true
---
import Callout from '../../../components/Callout.astro';

<Callout type="info">
Instalar el SDK es el paso 5 de la configuración de Adapty. Para que las compras funcionen en tu app, también necesitas conectar tu app a los stores, y luego crear productos, un paywall y un placement en el Adapty Dashboard. La [guía de inicio rápido](quickstart) explica todos los pasos necesarios.
</Callout>

## Instalar Adapty SDK \{#install-adapty-sdk\}

[![Release](https://img.shields.io/github/v/release/adaptyteam/AdaptySDK-React-Native.svg?style=flat&logo=react)](https://github.com/adaptyteam/AdaptySDK-React-Native/releases)

1. Instala el SDK de Adapty (esto también instala `@adapty/core` automáticamente):
   ```sh showLineNumbers title="Shell"
   # using npm
   npm install react-native-adapty
   
   # or using yarn
   yarn add react-native-adapty  
   ```
2. Para iOS, instala los pods:
   ```sh showLineNumbers title="Shell"
   cd ios && pod install
   ```

<details>
   <summary>Para Android, si tu versión de React Native es anterior a 0.73.0 (haz clic para expandir)</summary>

Actualiza el archivo `/android/build.gradle`. Asegúrate de que exista la dependencia `kotlin-gradle-plugin:1.8.0` o una versión más reciente:

   ```groovy showLineNumbers title="/android/build.gradle"
   ...
   buildscript {
     ...
     dependencies {
       ...
       classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.0"
     }
   }
   ...
   ```

</details>

## Activar el módulo Core de Adapty SDK \{#activate-adapty-module-of-adapty-sdk\}

Para obtener tu **Public SDK Key**:

1. Ve al Adapty Dashboard y navega a [**App settings → General**](https://app.adapty.io/settings/general).
2. En la sección **Api keys**, copia la **Public SDK Key** (NO la Secret Key).
3. Reemplaza `"YOUR_PUBLIC_SDK_KEY"` en el código.

:::important

- Asegúrate de usar la **Public SDK key** para inicializar Adapty; la **Secret key** solo debe usarse para la [API del servidor](getting-started-with-server-side-api).
- Las **SDK keys** son únicas para cada app, así que si tienes varias apps asegúrate de elegir la correcta.
:::

Copia el siguiente código en `App.tsx` para activar Adapty:

```typescript showLineNumbers title="App.tsx"

adapty.activate('YOUR_PUBLIC_SDK_KEY');
```

:::important
Espera a que `activate` se resuelva antes de llamar a cualquier otro método del SDK de Adapty. Consulta el [orden de llamadas en el SDK de React Native](react-native-sdk-call-order) para ver la secuencia completa.
:::

Ahora configura los paywalls en tu app:

- Si usas el [Adapty Paywall Builder](adapty-paywall-builder), sigue el [inicio rápido con Paywall Builder](react-native-quickstart-paywalls).
- Si construyes tu propia UI de paywall, consulta el [inicio rápido para paywalls personalizados](react-native-quickstart-manual).

:::tip
Para evitar errores de activación en el entorno de desarrollo, usa los [consejos](#development-environment-tips).
:::

## Activar el módulo AdaptyUI de Adapty SDK \{#activate-adaptyui-module-of-adapty-sdk\}

Si planeas usar el [Paywall Builder](adapty-paywall-builder), necesitas el módulo AdaptyUI. Se activa automáticamente cuando activas el módulo principal; no tienes que hacer nada más.

## Configuración opcional \{#optional-setup\}

### Logging \{#logging\}

#### Configurar el sistema de logging \{#set-up-the-logging-system\}

Adapty registra errores e información importante para ayudarte a entender qué está ocurriendo. Los niveles disponibles son los siguientes:

| Nivel      | Descripción                                                  |
| ---------- | ------------------------------------------------------------ |
| `error`    | Solo se registrarán los errores                              |
| `warn`     | Se registrarán los errores y los mensajes del SDK que no causan errores críticos pero merecen atención |
| `info`     | Se registrarán los errores, las advertencias y varios mensajes informativos |
| `verbose`  | Se registrará cualquier información adicional que pueda ser útil durante la depuración, como llamadas a funciones, consultas a la API, etc. |

Puedes establecer el nivel de log en tu app antes o durante la configuración de Adapty:

```typescript showLineNumbers title="App.tsx"
// Set log level before activation
// 'verbose' is recommended for development and the first production release
adapty.setLogLevel('verbose');

// Or set it during configuration
adapty.activate('YOUR_PUBLIC_SDK_KEY', {
  logLevel: 'verbose',
});
```

### Políticas de datos \{#data-policies\}

Adapty no almacena datos personales de tus usuarios a menos que los envíes explícitamente, pero puedes implementar políticas adicionales de seguridad de datos para cumplir con las directrices de la store o del país.

#### Deshabilitar la recopilación y el uso compartido de la dirección IP \{#disable-ip-address-collection-and-sharing\}

Al activar el módulo de Adapty, establece `ipAddressCollectionDisabled` en `true` para deshabilitar la recopilación y el uso compartido de la dirección IP del usuario. El valor predeterminado es `false`.

Usa este parámetro para reforzar la privacidad del usuario, cumplir con las normativas regionales de protección de datos (como RGPD o CCPA), o reducir la recopilación de datos innecesaria cuando las funciones basadas en IP no son necesarias para tu app.

```typescript showLineNumbers title="App.tsx"
adapty.activate('YOUR_PUBLIC_SDK_KEY', {
  ipAddressCollectionDisabled: true,
});
```

#### Deshabilitar la recopilación y el uso compartido del ID de publicidad \{#disable-advertising-id-collection-and-sharing\}

Al activar el módulo de Adapty, establece `ios.idfaCollectionDisabled` (iOS) o `android.adIdCollectionDisabled` (Android) en `true` para deshabilitar la recopilación de identificadores publicitarios. El valor predeterminado es `false`.

Usa este parámetro para cumplir con las políticas de App Store/Play Store, evitar que se active el aviso de App Tracking Transparency, o si tu app no requiere atribución publicitaria ni analíticas basadas en IDs de publicidad.

```typescript showLineNumbers title="App.tsx"
adapty.activate('YOUR_PUBLIC_SDK_KEY', {
  ios: {
    idfaCollectionDisabled: true,      
  },
  android: {
    adIdCollectionDisabled: true,      
  },
});
```

#### Configurar la caché de medios para AdaptyUI \{#set-up-media-cache-configuration-for-adaptyui\}

Por defecto, AdaptyUI almacena en caché los medios (como imágenes y vídeos) para mejorar el rendimiento y reducir el uso de la red. Puedes personalizar la configuración de la caché proporcionando una configuración personalizada.

Usa `mediaCache` para sobreescribir la configuración de caché predeterminada:

```typescript
adapty.activate('YOUR_PUBLIC_SDK_KEY', {
  mediaCache: {
    memoryStorageTotalCostLimit: 200 * 1024 * 1024, // Optional: memory cache size in bytes
    memoryStorageCountLimit: 2147483647,            // Optional: max number of items in memory
    diskStorageSizeLimit: 200 * 1024 * 1024,       // Optional: disk cache size in bytes
  },
});
```

Parámetros:
| Parámetro | Obligatorio | Descripción |
|-----------|----------|-------------|
| memoryStorageTotalCostLimit | opcional | Tamaño total de la caché en memoria en bytes. El valor predeterminado depende de la plataforma. |
| memoryStorageCountLimit | opcional | El límite de elementos en el almacenamiento en memoria. El valor predeterminado depende de la plataforma. |
| diskStorageSizeLimit | opcional | El límite de tamaño de archivo en disco en bytes. El valor predeterminado depende de la plataforma. |

### Habilitar niveles de acceso locales (Android) \{#enable-local-access-levels-android\}

Por defecto, los [niveles de acceso locales](local-access-levels) están habilitados en iOS y deshabilitados en Android. Para habilitarlos también en Android, establece `localAccessLevelAllowed` en `true`:

```typescript showLineNumbers title="App.tsx"
adapty.activate('YOUR_PUBLIC_SDK_KEY', {
  android: {
     localAccessLevelAllowed: true,      
  },
});
```

### Borrar datos al restaurar desde copia de seguridad \{#clear-data-on-backup-restore\}

Cuando `clearDataOnBackup` está establecido en `true`, el SDK detecta cuando la app se restaura desde una copia de seguridad de iCloud y elimina todos los datos del SDK almacenados localmente, incluida la información del perfil en caché, los detalles de los productos y los paywalls. El SDK se inicializa entonces con un estado limpio. El valor predeterminado es `false`.

:::note
Solo se elimina la caché local del SDK. El historial de transacciones con Apple y los datos del usuario en los servidores de Adapty permanecen sin cambios.
:::

```typescript showLineNumbers title="App.tsx"
adapty.activate('YOUR_PUBLIC_SDK_KEY', {
   ios: {
      clearDataOnBackup: true
   },
});
```

## Consejos para el entorno de desarrollo \{#development-environment-tips\}

#### Retrasar la activación del SDK para desarrollo \{#delay-sdk-activation-for-development-purposes\}

Adapty realiza una precarga de todos los datos necesarios del usuario al activarse el SDK, lo que permite un acceso más rápido a datos actualizados.

Sin embargo, esto puede ser un problema en el simulador de iOS, que frecuentemente solicita autenticación durante el desarrollo. Aunque Adapty no puede controlar el flujo de autenticación de StoreKit, sí puede aplazar las solicitudes que hace el SDK para obtener datos actualizados del usuario.

Al habilitar la propiedad `__debugDeferActivation`, la llamada de activación queda en espera hasta que realizas la siguiente llamada al SDK de Adapty. Esto evita avisos de autenticación innecesarios si no son necesarios.

Es importante tener en cuenta que **esta funcionalidad está pensada únicamente para el desarrollo**, ya que no cubre todos los escenarios de usuario posibles. En producción, la activación no debería retrasarse, ya que los dispositivos reales normalmente recuerdan los datos de autenticación y no solicitan credenciales repetidamente.

Este es el enfoque recomendado:

```typescript showLineNumbers title="Typescript"
try {
  adapty.activate('PUBLIC_SDK_KEY', {
    __debugDeferActivation: isSimulator(), // 'isSimulator' from any 3rd party library
  });
} catch (error) {
  console.error('Failed to activate Adapty SDK:', error);
  // Handle the error appropriately for your app
}
```

#### Solucionar errores de activación del SDK con Fast Refresh de React Native \{#troubleshoot-sdk-activation-errors-on-react-natives-fast-refresh\}

Al desarrollar con el SDK de Adapty en React Native, es posible que encuentres el error: `Adapty can only be activated once. Ensure that the SDK activation call is not made more than once.`

Esto ocurre porque la función de recarga rápida de React Native activa múltiples llamadas de activación durante el desarrollo. Para evitarlo, usa la opción `__ignoreActivationOnFastRefresh` establecida en `__DEV__` (el indicador del modo desarrollo de React Native).
```typescript showLineNumbers title="Typescript"
try {
  adapty.activate('PUBLIC_SDK_KEY', {
    __ignoreActivationOnFastRefresh: __DEV__, 
  });
} catch (error) {
  console.error('Failed to activate Adapty SDK:', error);
  // Handle the error appropriately for your app
}
```

#### Configurar el modo mock para pruebas locales \{#set-up-mock-mode-for-local-testing\}

Para el desarrollo y las pruebas locales, puedes habilitar el modo mock para evitar necesitar cuentas sandbox de App Store/Google Play y agilizar las iteraciones. El modo mock omite por completo los módulos nativos de Adapty y devuelve datos simulados.

:::important
El modo mock **no** es una herramienta para probar compras reales:

- **No abre** los flujos de compra de App Store / Google Play ni **crea** transacciones reales.
- **No renderiza** paywalls/onboardings creados con **Adapty Paywall Builder (AdaptyUI)**.
- Los módulos nativos de Adapty se **omiten por completo**; incluso la ausencia de archivos nativos del SDK en la compilación de Xcode/Android o una clave de API inválida no generarán errores.
- No se envían datos a los servidores de Adapty.

Para probar compras reales y paywalls del Paywall Builder, deshabilita el modo mock y usa cuentas sandbox.
:::

Para habilitar el modo mock, establece `enableMock` en `true`:

```typescript showLineNumbers title="App.tsx"
adapty.activate('YOUR_PUBLIC_SDK_KEY', {
  enableMock: true,
});
```

Cuando el modo mock está activo:
- Todos los métodos de Adapty devuelven datos mock sin realizar solicitudes de red a los servidores de Adapty.
- Por defecto, el perfil mock inicial no tiene suscripciones activas.
- Por defecto, `makePurchase(...)` simula una compra exitosa y otorga acceso premium.

Puedes personalizar los datos mock usando `mockConfig` durante la activación. Consulta el formato de configuración y los parámetros soportados [aquí](https://react-native.adapty.io/interfaces/adaptymockconfig).

```typescript showLineNumbers title="App.tsx"

try {
   await adapty.activate('YOUR_PUBLIC_SDK_KEY', {
      mockConfig: {
         // Customize the initial mock profile (optional)
      },
   });
} catch (error) {
   console.error('Failed to activate Adapty SDK:', error);
}
```

Si necesitas llamar a métodos del SDK antes de la activación (como `isActivated()` o `setLogLevel()`), usa `enableMock()` antes de `activate()`. Si el bridge ya está inicializado, este método no hace nada.

```typescript showLineNumbers title="App.tsx"
adapty.enableMock(); // Optional: pass mockConfig to customize mock data

// Now you can call methods before activation

await adapty.activate('YOUR_PUBLIC_SDK_KEY');
```

## Solución de problemas \{#troubleshooting\}

#### Error de versión mínima de iOS \{#minimum-ios-version-error\}

Si obtienes un error de versión mínima de iOS, actualiza tu Podfile:

```diff
-platform :ios, min_ios_version_supported
+platform :ios, '13.0'  # For core features only
# OR
+platform :ios, '15.0'  # If using paywalls created in the paywall builder
```

#### Conflicto de manifiesto de Android Auto Backup \{#android-auto-backup-manifest-conflict\}

Algunos SDKs (incluido Adapty) incluyen su propia configuración de Android Auto Backup. Si utilizas varios SDKs que definen reglas de copia de seguridad, el fusionador de manifiestos de Android puede fallar con un error relacionado con `android:fullBackupContent`, `android:dataExtractionRules` o `android:allowBackup`.

Síntomas típicos del error: `Manifest merger failed: Attribute application@dataExtractionRules value=(@xml/your_data_extraction_rules)
is also present at [com.other.sdk:library:1.0.0] value=(@xml/other_sdk_data_extraction_rules)`

:::note
Estos cambios deben realizarse en el directorio de la plataforma Android (normalmente en la carpeta `android/` de tu proyecto).
:::

Para resolverlo, necesitas:

- Indicar al fusionador de manifiestos que use los valores de tu app para los atributos relacionados con la copia de seguridad.

- Crear archivos de reglas de copia de seguridad que combinen las reglas de Adapty con las de otros SDKs.

#### 1. Añade el namespace `tools` a tu manifiesto \{#1-add-the-tools-namespace-to-your-manifest\}

En tu archivo `AndroidManifest.xml`, asegúrate de que la etiqueta raíz `<manifest>` incluya tools:

```xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.example.app">

    ...
</manifest>
```

#### 2. Sobreescribe los atributos de copia de seguridad en `<application>` \{#2-override-backup-attributes-in-application\}

En el mismo archivo `AndroidManifest.xml`, actualiza la etiqueta `<application>` para que tu app proporcione los valores definitivos e indique al fusionador de manifiestos que reemplace los valores de las librerías:

```xml
<application
android:name=".App"
android:allowBackup="true"
android:fullBackupContent="@xml/sample_backup_rules"           
android:dataExtractionRules="@xml/sample_data_extraction_rules"
tools:replace="android:fullBackupContent,android:dataExtractionRules">

    ...
</application>
```

Si algún SDK también define `android:allowBackup`, inclúyelo en `tools:replace`:

```xml
tools:replace="android:allowBackup,android:fullBackupContent,android:dataExtractionRules"
```

#### 3. Crea los archivos de reglas de copia de seguridad combinadas \{#3-create-merged-backup-rules-files\}

Crea archivos XML en el directorio `res/xml/` de tu proyecto Android que combinen las reglas de Adapty con las de otros SDKs. Android utiliza distintos formatos de reglas de copia de seguridad según la versión del sistema operativo, por lo que crear ambos archivos garantiza la compatibilidad con todas las versiones de Android que admite tu app.

:::note
Los ejemplos a continuación usan AppsFlyer como SDK de terceros de muestra. Reemplaza o añade reglas para cualquier otro SDK que uses en tu app.
:::

**Para Android 12 y superior** (usa el nuevo formato de reglas de extracción de datos):

```xml title="sample_data_extraction_rules.xml"
<?xml version="1.0" encoding="utf-8"?>
<data-extraction-rules>
    <cloud-backup>
        
        <exclude domain="sharedpref" path="appsflyer-data"/>
        <exclude domain="sharedpref" path="appsflyer-purchase-data"/>
        <exclude domain="database" path="afpurchases.db"/>
        
        <exclude domain="sharedpref" path="AdaptySDKPrefs.xml"/>
    </cloud-backup>

    <device-transfer>
        
        <exclude domain="sharedpref" path="appsflyer-data"/>
        <exclude domain="sharedpref" path="appsflyer-purchase-data"/>
        <exclude domain="database" path="afpurchases.db"/>
        <exclude domain="sharedpref" path="AdaptySDKPrefs.xml"/>
    </device-transfer>
</data-extraction-rules>
```

**Para Android 11 e inferior** (usa el formato legado de contenido de copia de seguridad completa):

```xml title="sample_backup_rules.xml"
<?xml version="1.0" encoding="utf-8"?>
<full-backup-content>
    
    <exclude domain="sharedpref" path="appsflyer-data"/>

    
    <exclude domain="sharedpref" path="AdaptySDKPrefs.xml"/>

#### Las compras fallan al volver desde otra app en Android \{#purchases-fail-after-returning-from-another-app-in-android\}

Si la Activity que inicia el flujo de compra usa un `launchMode` no predeterminado, Android puede recrearla o reutilizarla incorrectamente cuando el usuario regresa desde Google Play, una app bancaria o un navegador. Esto puede provocar que el resultado de la compra se pierda o se trate como cancelado.

Para asegurarte de que las compras funcionen correctamente, usa únicamente los modos de lanzamiento `standard` o `singleTop` para la Activity que inicia el flujo de compra, y evita cualquier otro modo.

En tu `AndroidManifest.xml`, asegúrate de que la Activity que inicia el flujo de compra esté configurada como `standard` o `singleTop`:

```xml
<activity
    android:name=".MainActivity"
    android:launchMode="standard" />
```

#### Errores de compilación de Swift 6 causados por la sobreescritura de SWIFT_VERSION en el Podfile \{#swift-6-build-errors-caused-by-podfile-swift_version-override\}

Al compilar tu app de React Native para iOS, es posible que veas errores de compilación de Swift 6 en los targets de pods de Adapty. Los síntomas típicos incluyen incompatibilidades de `@Sendable` en `AdaptyUIBuilderLogic`, conformidad `Sendable` faltante en los tipos de Adapty, o errores de aislamiento de actores.

Los pods de Adapty declaran `s.swift_version = '6.0'` y requieren Swift 6 para compilarse. Tu propio código de app puede seguir en Swift 5; solo los targets de los pods de Adapty (`Adapty`, `AdaptyUI`, `AdaptyUIBuilder`, `AdaptyLogger`, `AdaptyPlugin`) necesitan compilarse con Swift 6.

La causa más común es un hook `post_install` en `ios/Podfile` que sobreescribe `SWIFT_VERSION` para todos los targets de pods:

```ruby showLineNumbers title="ios/Podfile"
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['SWIFT_VERSION'] = '5.9'
    end
  end
end
```

**Solución**: Excluye los targets de los pods de Adapty de la sobreescritura:

```ruby showLineNumbers title="ios/Podfile"
post_install do |installer|
  installer.pods_project.targets.each do |target|
    next if %w[Adapty AdaptyUI AdaptyUIBuilder AdaptyLogger AdaptyPlugin].include?(target.name)
    target.build_configurations.each do |config|
      config.build_settings['SWIFT_VERSION'] = '5.9'
    end
  end
end
```

Luego ejecuta `pod install` desde el directorio `ios/` y vuelve a compilar.

Para verificarlo, abre `ios/Pods/Pods.xcodeproj`, selecciona el target del pod `Adapty` → **Build Settings** → **Swift Language Version**. Debería indicar **Swift 6**.

---


# File: react-native-quickstart-paywalls
---

---
title: "Habilitar compras usando paywalls en React Native SDK"
description: "Aprende a mostrar paywalls en tu app de React Native con el SDK de Adapty."
---

Para habilitar las compras in-app, necesitas entender tres conceptos clave:

- [**Productos**](product) – todo lo que los usuarios pueden comprar (suscripciones, consumibles, acceso de por vida)
- [**Paywalls**](paywalls): configuraciones que definen qué productos ofrecer. En Adapty, los paywalls son la única forma de recuperar productos, pero este diseño te permite modificar ofertas, precios y combinaciones de productos sin tocar el código de tu app.
- [**Placements**](placements) – dónde y cuándo muestras los paywalls en tu app (como `main`, `onboarding`, `settings`). Configuras los paywalls para los placements en el dashboard y luego los solicitas por ID de placement en tu código. Esto facilita ejecutar pruebas A/B y mostrar diferentes paywalls a distintos usuarios.

Adapty te ofrece tres formas de habilitar compras en tu app. Elige una según los requisitos de tu app:

| Implementación            | Complejidad | Cuándo usarla                                                                                                                                                                                                                                                  |
|---------------------------|-------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Adapty Paywall Builder    | ✅ Fácil     | [Creas un paywall completo y listo para compras en el constructor sin código](quickstart-paywalls). Adapty lo renderiza automáticamente y gestiona todo el flujo de compra, validación de recibos y administración de suscripciones en segundo plano.           |
| Paywalls creados manualmente | 🟡 Medio  | Implementas la UI del paywall en el código de tu app, pero aún obtienes el objeto paywall de Adapty para mantener flexibilidad en las ofertas de productos. Consulta la [guía](react-native-quickstart-manual).                                                 |
| Modo observer             | 🔴 Difícil  | Ya tienes tu propia infraestructura de gestión de compras y quieres seguir usándola. Ten en cuenta que el modo observer tiene sus limitaciones en Adapty. Consulta el [artículo](observer-vs-full-mode).                                                       |

:::important
**Los pasos a continuación muestran cómo implementar un paywall creado en el Adapty Paywall Builder.**

Si no quieres usar el Paywall Builder, consulta la [guía para gestionar compras en paywalls creados manualmente](react-native-making-purchases).
:::

Para mostrar un paywall creado en el Adapty Paywall Builder, en el código de tu app solo necesitas:

1. **Obtener el paywall**: Obtén el paywall desde Adapty.
2. **Mostrar el paywall y Adapty gestionará las compras por ti**: Muestra el contenedor del paywall que obtuviste en tu app.
3. **Gestionar las acciones de los botones**: Asocia las interacciones del usuario con el paywall a las respuestas de tu app. Por ejemplo, abrir enlaces o cerrar el paywall cuando los usuarios pulsan botones.

## Antes de empezar \{#before-you-start\}

Antes de empezar, completa estos pasos:

1. Conecta tu app al [App Store](initial_ios) y/o [Google Play](initial-android) en el Adapty Dashboard.
2. [Crea tus productos](create-product) en Adapty.
3. [Crea un paywall y añade productos](create-paywall).
4. [Crea un placement y añade tu paywall](create-placement).
5. [Instala y activa el SDK de Adapty](sdk-installation-reactnative) en el código de tu app.

:::tip
La forma más rápida de completar estos pasos es seguir la [guía de inicio rápido](quickstart) o crear paywalls y placements usando el [CLI para desarrolladores](developer-cli-quickstart).
:::

## 1. Obtener el paywall \{#1-get-the-paywall\}

Tus paywalls están asociados a placements configurados en el dashboard. Los placements te permiten ejecutar diferentes paywalls para distintas audiencias o ejecutar [pruebas A/B](ab-tests).

Para obtener un paywall creado en el Adapty Paywall Builder, necesitas:

1. Obtener el objeto `paywall` por el ID del [placement](placements) usando el método `getPaywall` y comprobar si es un paywall creado en el builder mediante la propiedad `hasViewConfiguration`.

2. Crear la vista del paywall usando el método `createPaywallView`. La vista contiene los elementos de UI y el estilo necesario para mostrar el paywall.

:::important
Para obtener la configuración de la vista, debes activar el toggle **Show on device** en el Paywall Builder. De lo contrario, obtendrás una configuración de vista vacía y el paywall no se mostrará.
:::

```typescript showLineNumbers title="React Native"

try {
    const placementId = 'YOUR_PLACEMENT_ID';

    const paywall = await adapty.getPaywall(placementId);
  // the requested paywall
} catch (error) {
    // handle the error
}

if (paywall.hasViewConfiguration) {
    try {
        const view = await createPaywallView(paywall);
    } catch (error) {
        // handle the error
    }
} else {
    //use your custom logic
}
```

## 2. Mostrar el paywall \{#2-display-the-paywall\}

Ahora que tienes la configuración del paywall, basta con añadir unas pocas líneas para mostrarlo.

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="Componente React" default>

Para integrar un paywall dentro de tu árbol de componentes existente, usa el componente `AdaptyPaywallView` directamente en la jerarquía de componentes de React Native:

```typescript showLineNumbers title="React Native (TSX)"

function MyPaywall({ paywall }) {
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {}, []);
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
      onUrlPress={onUrlPress}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Presentación modal">

Para mostrar el paywall como una pantalla independiente, usa el método `view.present()` en el `view` creado por el método `createPaywallView`. Cada `view` solo puede usarse una vez. Si necesitas mostrar el paywall de nuevo, llama a `createPaywallView` una vez más para crear una nueva instancia de `view`.

```typescript showLineNumbers title="React Native"
try {
  await view.present();
} catch (error) {
  // handle the error
}
```

</TabItem>
</Tabs>

:::tip
Para más detalles sobre cómo mostrar un paywall, consulta nuestra [guía](react-native-present-paywalls).
:::

## 3. Gestionar las acciones de los botones \{#3-handle-button-actions\}

Cuando los usuarios pulsan botones en el paywall, el SDK de React Native gestiona automáticamente las compras, la restauración, el cierre del paywall y la apertura de URLs.

Sin embargo, otros botones tienen IDs personalizados o predefinidos y requieren gestionar las acciones en tu código. También puedes querer sobreescribir su comportamiento predeterminado.

Por ejemplo, aquí está el comportamiento predeterminado para el botón de cierre. No necesitas añadirlo al código, pero aquí puedes ver cómo se hace si fuera necesario.

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="Componente React" default>

Para el componente React, gestiona las acciones directamente en el componente `AdaptyPaywallView`:

```typescript showLineNumbers title="React Native (TSX)"

function MyPaywall({ paywall }) {
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {}, []);
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {}, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onUrlPress={onUrlPress}
      onCloseButtonPress={onCloseButtonPress}
      onCustomAction={onCustomAction}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Presentación modal">

Para la presentación modal, implementa los manejadores de eventos usando `setEventHandlers`:

```typescript showLineNumbers title="React Native"
const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});
```

</TabItem>
</Tabs>

:::tip
Lee nuestras guías sobre cómo gestionar [acciones](react-native-handle-paywall-actions) y [eventos](react-native-handling-events-1) de botones.
:::

## Próximos pasos \{#next-steps\}

---
no_index: true
---
import Callout from '../../../components/Callout.astro';

<Callout type="tip">
¿Tienes preguntas o estás teniendo algún problema? Consulta nuestro [foro de soporte](https://adapty.featurebase.app/) donde encontrarás respuestas a preguntas frecuentes o podrás plantear las tuyas. ¡Nuestro equipo y la comunidad están aquí para ayudarte!
</Callout>

Tu paywall está listo para mostrarse en la app. Prueba tus compras en el [sandbox del App Store](test-purchases-in-sandbox) o en [Google Play Store](testing-on-android) para asegurarte de que puedes completar una compra de prueba desde el paywall.

Ahora necesitas [comprobar el nivel de acceso de los usuarios](react-native-check-subscription-status) para asegurarte de mostrar un paywall o dar acceso a las funciones de pago a los usuarios correctos.

## Ejemplo completo \{#full-example\}

Aquí se muestra cómo integrar todos esos pasos juntos en tu app.

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="Componente React" default>

```javascript showLineNumbers title="React Native (TSX)"

export default function PaywallScreen() {
  const [paywall, setPaywall] = useState(null);

  const loadPaywall = async () => {
    try {
      const paywallData = await adapty.getPaywall('YOUR_PLACEMENT_ID');

      if (paywallData.hasViewConfiguration) {
        setPaywall(paywallData);
      }
    } catch (error) {
      console.warn('Error loading paywall:', error);
    }
  };

  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press
  }, []);

  useEffect(() => {
    loadPaywall();
  }, []);

  return (
    <View style={{ flex: 1 }}>
      {paywall ? (
        <AdaptyPaywallView
          paywall={paywall}
          style={{ flex: 1 }}
          onUrlPress={onUrlPress}
          onCloseButtonPress={onCloseButtonPress}
        />
      ) : (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Button title="Load Paywall" onPress={loadPaywall} />
        </View>
      )}
    </View>
  );
}
```

</TabItem>
<TabItem value="standalone" label="Presentación modal">

```javascript showLineNumbers title="React Native"

export default function PaywallScreen() {
  const showPaywall = async () => {
    try {
      const paywall = await adapty.getPaywall('YOUR_PLACEMENT_ID');

      if (!paywall.hasViewConfiguration) {
        // use your custom logic
        return;
      }

      const view = await createPaywallView(paywall);

      view.setEventHandlers({
          onCloseButtonPress() {
              return true;
        },
      });

      await view.present();
    } catch (error) {
      // handle any error that may occur during the process
      console.warn('Error showing paywall:', error);
    }
  };

  // you can add a button to manually trigger the paywall for testing purposes
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Show Paywall" onPress={showPaywall} />
    </View>
  );
}
```

</TabItem>
</Tabs>

---


# File: react-native-check-subscription-status
---

---
title: "Comprobar el estado de la suscripción en el SDK de React Native"
description: "Aprende a comprobar el estado de la suscripción en tu app de React Native con Adapty."
---

Para decidir si los usuarios pueden acceder a contenido de pago o ver un paywall, necesitas comprobar su [nivel de acceso](access-level) en el perfil.

Este artículo te muestra cómo acceder al estado del perfil para decidir qué deben ver los usuarios: si mostrarles un paywall o concederles acceso a las funciones de pago.

## Obtener el estado de la suscripción \{#get-subscription-status\}

Cuando decides si mostrar un paywall o contenido de pago a un usuario, compruebas su [nivel de acceso](access-level) en su perfil. Tienes dos opciones:

- Llama a `getProfile` si necesitas los datos más recientes del perfil de inmediato (por ejemplo, al arrancar la app) o quieres forzar una actualización.
- Configura **actualizaciones automáticas del perfil** para mantener una copia local que se refresca automáticamente cada vez que cambia el estado de la suscripción.

### Obtener el perfil \{#get-profile\}

La forma más sencilla de obtener el estado de la suscripción es usar el método `getProfile` para acceder al perfil:

```typescript showLineNumbers
try {
    const profile = await adapty.getProfile();
} catch (error) {
  // handle the error
}
```

### Escuchar actualizaciones de la suscripción \{#listen-to-subscription-updates\}

Para recibir actualizaciones del perfil automáticamente en tu app:

1. Usa `adapty.addEventListener('onLatestProfileLoad')` para escuchar cambios en el perfil: Adapty llamará a este método automáticamente cada vez que cambie el estado de la suscripción del usuario.
2. Guarda los datos del perfil actualizado cuando se llame a este método, para poder usarlos en toda tu app sin hacer peticiones de red adicionales.

```javascript
class SubscriptionManager {
    private currentProfile: any = null;
    
    constructor() {
        // Listen for profile updates
        adapty.addEventListener('onLatestProfileLoad', (profile) => {
            this.currentProfile = profile;
            // Update UI, unlock content, etc.
        });
    }
    
    // Use stored profile instead of calling getProfile()
    hasAccess(): boolean {
        return this.currentProfile?.accessLevels?.['premium']?.isActive ?? false;
    }
}
```

:::note
Adapty llama automáticamente al listener del evento `onLatestProfileLoad` cuando arranca tu app, proporcionando datos de suscripción en caché incluso si el dispositivo está sin conexión.
:::

## Conectar el perfil con la lógica del paywall \{#connect-profile-with-paywall-logic\}

Cuando necesitas tomar decisiones inmediatas sobre mostrar paywalls o conceder acceso a funciones de pago, puedes comprobar el perfil del usuario directamente. Este enfoque es útil en situaciones como el arranque de la app, al entrar en secciones premium o antes de mostrar contenido específico.

```javascript
const checkAccessLevel = async () => {
  try {
    const profile = await adapty.getProfile();
    return profile.accessLevels['YOUR_ACCESS_LEVEL']?.isActive === true;
  } catch (error) {
    console.warn('Error checking access level:', error);
    return false; // Show paywall if access check fails
  }
};

const initializePaywall = async () => {
  try {
    await loadPaywall();
    
    const hasAccess = await checkAccessLevel();
    if (!hasAccess) {
      // Show paywall if no access
    }
  } catch (error) {
    console.warn('Error initializing paywall:', error);
  }
};
``` 

## Próximos pasos \{#next-steps\}

Ahora que sabes cómo hacer seguimiento del estado de la suscripción, aprende a [trabajar con perfiles de usuario](react-native-quickstart-identify) para asegurarte de que pueden acceder a lo que han pagado.

---


# File: react-native-quickstart-identify
---

---
title: "Identificar usuarios en el SDK de React Native"
description: "Guía de inicio rápido para configurar Adapty para la gestión de suscripciones in-app en React Native."
---

:::important
Esta guía es para ti si tienes tu propio sistema de autenticación. Aquí aprenderás a trabajar con perfiles de usuario en Adapty para que se alinee con tu sistema de autenticación existente.
:::

La forma en que gestionas las compras de los usuarios depende del modelo de autenticación de tu app:
- Si tu app no usa autenticación de backend ni almacena datos de usuario, consulta la [sección sobre usuarios anónimos](#anonymous-users).
- Si tu app tiene (o tendrá) autenticación de backend, consulta la [sección sobre usuarios identificados](#identified-users).

**Conceptos clave**:
- Los **perfiles** son las entidades necesarias para que el SDK funcione. Adapty los crea automáticamente.
- Pueden ser anónimos **(sin customer user ID)** o identificados **(con customer user ID)**.
- Proporcionas el **customer user ID** para cruzar los perfiles de Adapty con tu sistema de autenticación interno.

Esto es lo que diferencia a los usuarios anónimos de los identificados:

|                              | Usuarios anónimos                                        | Usuarios identificados                                                             |
|------------------------------|----------------------------------------------------------|------------------------------------------------------------------------------------|
| **Gestión de compras**       | Restauración de compras a nivel de store                 | Mantienen el historial de compras en todos los dispositivos mediante su customer user ID |
| **Gestión de perfiles**      | Nuevos perfiles en cada reinstalación                    | El mismo perfil en todas las sesiones y dispositivos                               |
| **Persistencia de datos**    | Los datos de usuarios anónimos están ligados a la instalación de la app | Los datos de usuarios identificados persisten entre instalaciones de la app |

## Usuarios anónimos \{#anonymous-users\}

Si no tienes autenticación de backend, **no necesitas gestionar la autenticación en el código de la app**:

1. Cuando el SDK se activa en el primer inicio de la app, Adapty **crea un nuevo perfil para el usuario**.
2. Cuando el usuario realiza una compra en la app, esta compra queda **asociada a su perfil de Adapty y a su cuenta en el store**.
3. Cuando el usuario **reinstala** la app o la instala en un **nuevo dispositivo**, Adapty **crea un nuevo perfil anónimo al activarse**.
4. Si el usuario ya había realizado compras en tu app, por defecto, sus compras se sincronizan automáticamente desde el App Store al activarse el SDK.

Así, con usuarios anónimos se crearán nuevos perfiles en cada instalación, pero no es un problema porque, en los análisis de Adapty, puedes [configurar qué se considerará una nueva instalación](general#4-installs-definition-for-analytics).

:::note
Las restauraciones desde copia de seguridad se comportan de forma diferente a las reinstalaciones. Por defecto, cuando un usuario restaura desde una copia de seguridad, el SDK conserva los datos en caché y no crea un nuevo perfil. Puedes configurar este comportamiento con el ajuste `clearDataOnBackup`. [Más información](sdk-installation-react-native-pure#clear-data-on-backup-restore).
:::

Para los usuarios anónimos, debes contar las instalaciones por **IDs de dispositivo**. En este caso, cada instalación de la app en un dispositivo se cuenta como una instalación, incluidas las reinstalaciones.

## Usuarios identificados \{#identified-users\}

Tienes dos opciones para identificar usuarios en la app:

- [**Durante el inicio de sesión/registro:**](#during-loginsignup) Si los usuarios inician sesión después de que tu app arranque, llama a `identify()` con un customer user ID cuando se autentiquen.

- [**Durante la activación del SDK:**](#during-the-sdk-activation) Si ya tienes un customer user ID almacenado cuando se inicia la app, envíalo al llamar a `activate()`.

:::important
Por defecto, cuando Adapty recibe una compra de un Customer User ID que está actualmente asociado a otro Customer User ID, el nivel de acceso se comparte, de modo que ambos perfiles tienen acceso de pago. Puedes configurar este ajuste para transferir el acceso de pago de un perfil a otro o desactivar el uso compartido por completo. Consulta el [artículo](general#6-sharing-paid-access-between-user-accounts) para más detalles.
:::

  <img src="/assets/shared/img/identify-diagram.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Durante el inicio de sesión/registro \{#during-loginsignup\}

Si identificas a los usuarios después del inicio de la app (por ejemplo, cuando inician sesión o se registran), usa el método `identify` para establecer su customer user ID.

- Si **no has usado este customer user ID antes**, Adapty lo vinculará automáticamente al perfil actual.
- Si **ya has usado este customer user ID para identificar al usuario antes**, Adapty pasará a trabajar con el perfil asociado a ese customer user ID.

:::important
Los customer user IDs deben ser únicos para cada usuario. Si hardcodeas el valor del parámetro, todos los usuarios se considerarán como uno solo.
:::

Siempre usa `await` con `identify` antes de llamar a otros métodos del SDK. Las llamadas concurrentes generan `#3006 profileWasChanged` o aterrizan en el perfil anónimo. Consulta [Orden de llamadas en el SDK de React Native](react-native-sdk-call-order).

```typescript showLineNumbers
try {
    await adapty.identify("YOUR_USER_ID"); // Unique for each user
    // successfully identified
} catch (error) {
    // handle the error
}
```

### Durante la activación del SDK \{#during-the-sdk-activation\}

Si ya conoces el customer user ID cuando activas el SDK, puedes enviarlo en el método `activate` en lugar de llamar a `identify` por separado.

Si conoces un customer user ID pero solo lo configuras después de la activación, eso significa que, al activarse, Adapty creará un nuevo perfil anónimo y solo pasará al existente cuando llames a `identify`.

Puedes pasar un customer user ID existente (uno que ya hayas usado antes) o uno nuevo. Si pasas uno nuevo, el perfil creado al activarse se vinculará automáticamente a ese customer user ID.

:::note
Por defecto, la creación de perfiles anónimos no afecta a los dashboards de análisis, porque las instalaciones se cuentan por IDs de dispositivo.

Un ID de dispositivo representa una única instalación de la app desde el store en un dispositivo y solo se regenera cuando la app se reinstala.
No depende de si es la primera instalación o una repetida, ni de si se usa un customer user ID existente.

Crear un perfil (al activar el SDK o al cerrar sesión), iniciar sesión o actualizar la app sin reinstalarla no genera eventos de instalación adicionales.

Si quieres contar las instalaciones por usuarios únicos en lugar de por dispositivos, ve a **App settings** y configura [**Installs definition for analytics**](general#4-installs-definition-for-analytics).
:::

```typescript showLineNumbers
adapty.activate("PUBLIC_SDK_KEY", {
    customerUserId: "YOUR_USER_ID" // Customer user IDs must be unique for each user. If you hardcode the parameter value, all users will be considered as one.
});
```

### Cerrar sesión de usuarios \{#log-users-out\}

Si tienes un botón para cerrar la sesión de los usuarios, usa el método `logout`.

:::important
Cerrar la sesión crea un nuevo perfil anónimo para el usuario.
:::

```typescript showLineNumbers
try {
    await adapty.logout();
    // successful logout
} catch (error) {
    // handle the error
}
```

:::info
Para volver a iniciar sesión en la app, usa el método `identify`.
:::

### Permitir compras sin inicio de sesión \{#allow-purchases-without-login\}

Si tus usuarios pueden realizar compras tanto antes como después de iniciar sesión en tu app, debes asegurarte de que mantengan el acceso después de iniciar sesión:

1. Cuando un usuario sin sesión iniciada realiza una compra, Adapty la vincula a su ID de perfil anónimo.
2. Cuando el usuario inicia sesión en su cuenta, Adapty pasa a trabajar con su perfil identificado.
    - Si es un customer user ID nuevo (por ejemplo, la compra se realizó antes del registro), Adapty asigna el customer user ID al perfil actual, por lo que se mantiene todo el historial de compras.
    - Si es un customer user ID existente (el customer user ID ya está vinculado a un perfil), necesitas obtener el nivel de acceso actual después del cambio de perfil. Puedes llamar a [`getProfile`](react-native-check-subscription-status) justo después de la identificación, o [escuchar las actualizaciones del perfil](react-native-check-subscription-status) para que los datos se sincronicen automáticamente.

## Próximos pasos \{#next-steps\}

¡Enhorabuena! Has implementado la lógica de pago in-app en tu app. ¡Te deseamos todo lo mejor con la monetización de tu app!

Para sacar aún más partido a Adapty, puedes explorar estos temas:
- [**Pruebas**](troubleshooting-test-purchases): Asegúrate de que todo funciona como se espera
- [**Onboardings**](react-native-onboardings): Engancha a los usuarios con onboardings y aumenta la retención
- [**Integraciones**](configuration): Integra con servicios de atribución de marketing y análisis con una sola línea de código
- [**Establecer atributos de perfil personalizados**](react-native-setting-user-attributes): Añade atributos personalizados a los perfiles de usuario y crea segmentos para lanzar pruebas A/B o mostrar diferentes paywalls a distintos usuarios

---


# File: adapty-cursor-react-native
---

---
title: "Integra Adapty en tu app de React Native con ayuda de IA"
description: "Una guía paso a paso para integrar Adapty en tu app de React Native usando Cursor, Context7, ChatGPT, Claude u otras herramientas de IA."
---

Esta página explica dos formas de integrar Adapty en tu app de React Native. Usa la skill de integración del SDK que encontrarás a continuación para un flujo automatizado de extremo a extremo, o sigue el tutorial manual más abajo.

## Usa la skill de integración del SDK (beta) \{#use-the-sdk-integration-skill-beta\}

La [skill adapty-sdk-integration](https://github.com/adaptyteam/adapty-sdk-integration-skill) automatiza la integración de principio a fin: configuración del dashboard, instalación del SDK, paywall y verificación por etapas. El tutorial manual que aparece más abajo es la alternativa si tu herramienta no es compatible con el formato Claude Skills.

**Herramientas compatibles**: Claude Code, GitHub Copilot CLI, OpenAI Codex, Gemini CLI.

### Instalación \{#install\}

Elige el formato según tu herramienta. La lista completa está en el [README de la skill](https://github.com/adaptyteam/adapty-sdk-integration-skill).

- **Claude Code**: Ejecuta `claude plugin marketplace add adaptyteam/adapty-sdk-integration-skill` y luego `claude plugin install adapty-sdk-integration@adapty` desde tu terminal.
- **GitHub Copilot CLI**: Ejecuta `gh skill install adaptyteam/adapty-sdk-integration-skill`.
- **Gemini CLI**: Ejecuta `gemini skills install https://github.com/adaptyteam/adapty-sdk-integration-skill`.
- **OpenAI Codex u otra herramienta**: Clona el repositorio y copia `plugins/adapty-sdk-integration/skills/adapty-sdk-integration/` en el directorio de skills de tu herramienta.

### Ejecución \{#run\}

En tu proyecto, ejecuta `/adapty-sdk-integration`. La skill detecta tu plataforma y hace algunas preguntas de configuración. Luego guía paso a paso por la configuración del dashboard, la instalación del SDK, el paywall y la verificación — obteniendo la documentación de Adapty relevante en cada etapa.

:::note
La skill está en beta. Si se bloquea o se comporta de forma inesperada, el tutorial manual que aparece a continuación cubre cada etapa paso a paso.
:::

## Antes de empezar: configuración del dashboard \{#before-you-start-dashboard-setup\}

Adapty requiere cierta configuración en el dashboard antes de escribir código con el SDK. Puedes hacerlo con una skill interactiva de LLM o manualmente a través del Dashboard.

### Enfoque con skill (recomendado) \{#skill-approach-recommended\}

La skill Adapty CLI permite que tu LLM configure tu app, productos, niveles de acceso, paywalls y placements directamente, sin necesidad de abrir el Dashboard en cada paso. Solo tienes que [conectar tus stores](integrate-payments) en el Dashboard.

```
npx skills add adaptyteam/adapty-cli --skill adapty-cli
```

Una vez añadida la skill, ejecuta `/adapty-cli` en tu agente. Te guiará por cada paso, incluyendo cuándo abrir el Dashboard para conectar tus stores.

### Enfoque manual por el Dashboard \{#dashboard-approach\}

Si prefieres configurarlo todo manualmente, esto es lo que necesitas antes de escribir código. Tu LLM no puede consultar los valores del dashboard por ti — tendrás que proporcionarlos tú.

1. **Conecta tus stores**: En el Adapty Dashboard, ve a **App settings → General**. Conecta tanto App Store como Google Play si tu app está disponible en ambas plataformas. Esto es necesario para que las compras funcionen.
   [Conectar stores](integrate-payments)

2. **Copia tu clave SDK pública**: En el Adapty Dashboard, ve a **App settings → General** y busca la sección **API keys**. En el código, esta es la cadena que pasas a `adapty.activate("YOUR_PUBLIC_SDK_KEY")`.

3. **Crea al menos un producto**: En el Adapty Dashboard, ve a la página **Products**. No haces referencia a los productos directamente en el código — Adapty los entrega a través de paywalls.
   [Añadir productos](quickstart-products)

4. **Crea un paywall y un placement**: En el Adapty Dashboard, crea un paywall en la página **Paywalls** y asígnalo a un placement en la página **Placements**. En el código, el ID del placement es la cadena que pasas a `adapty.getPaywall("YOUR_PLACEMENT_ID")`.
   [Crear paywall](quickstart-paywalls)

5. **Configura los niveles de acceso**: En el Adapty Dashboard, configúralos por producto en la página **Products**. En el código, la cadena que se comprueba en `profile.accessLevels['premium']?.isActive`. El nivel de acceso `premium` predeterminado funciona para la mayoría de las apps. Si los usuarios de pago tienen acceso a funciones distintas según el producto (por ejemplo, un plan `basic` frente a un plan `pro`), [crea niveles de acceso adicionales](assigning-access-level-to-a-product) antes de empezar a programar.

:::tip
Una vez que tengas los cinco, estás listo para escribir código. Dile a tu LLM: "Mi clave SDK pública es X, mi ID de placement es Y" para que pueda generar el código de inicialización y de obtención de paywalls correcto.
:::

### Configurar cuando estés listo \{#set-up-when-ready\}

Esto no es necesario para empezar a programar, pero lo querrás a medida que tu integración madure:

- **Pruebas A/B**: Configúralas en la página **Placements**. No se necesita ningún cambio de código.
  [Pruebas A/B](ab-tests)
- **Paywalls y placements adicionales**: Añade más llamadas a `getPaywall` con distintos IDs de placement.
- **Integraciones de analítica**: Configúralas en la página **Integrations**. La configuración varía según la integración. Consulta [integraciones de analítica](analytics-integration) e [integraciones de atribución](attribution-integration).

## Dale documentación de Adapty a tu LLM \{#feed-adapty-docs-to-your-llm\}

### Usa Context7 (recomendado) \{#use-context7-recommended\}

[Context7](https://context7.com) es un servidor MCP que da a tu LLM acceso directo a la documentación actualizada de Adapty. Tu LLM obtiene la documentación correcta automáticamente según lo que preguntes — sin necesidad de pegar URLs manualmente.

Context7 funciona con **Cursor**, **Claude Code**, **Windsurf** y otras herramientas compatibles con MCP. Para configurarlo, ejecuta:

```
npx ctx7 setup
```

Esto detecta tu editor y configura el servidor Context7. Para la configuración manual, consulta el [repositorio de Context7 en GitHub](https://github.com/upstash/context7).

Una vez configurado, haz referencia a la biblioteca de Adapty en tus prompts:

```
Use the adaptyteam/adapty-docs library to look up how to install the React Native SDK
```

:::warning
Aunque Context7 elimina la necesidad de pegar enlaces a la documentación manualmente, el orden de implementación es importante. Sigue el [tutorial de implementación](#implementation-walkthrough) que aparece a continuación paso a paso para asegurarte de que todo funciona.
:::

### Usa documentación en texto plano \{#use-plain-text-docs\}

Puedes acceder a cualquier documento de Adapty como Markdown en texto plano. Añade `.md` al final de su URL o haz clic en **Copy for LLM** debajo del título del artículo. Por ejemplo: [adapty-cursor-react-native.md](https://adapty.io/docs/es/adapty-cursor-react-native.md).

Cada etapa del [tutorial de implementación](#implementation-walkthrough) que aparece a continuación incluye un bloque "Envía esto a tu LLM" con enlaces `.md` para pegar.

Para obtener más documentación a la vez, consulta los [archivos de índice y subconjuntos específicos por plataforma](#plain-text-doc-index-files) que aparecen más abajo.

## Tutorial de implementación \{#implementation-walkthrough\}

El resto de esta guía recorre la integración de Adapty en el orden de implementación. Cada etapa incluye la documentación que debes enviar a tu LLM, lo que deberías ver al terminar y los problemas más frecuentes.

### Planifica tu integración \{#plan-your-integration\}

Antes de escribir código, pide a tu LLM que analice tu proyecto y cree un plan de implementación. Si tu herramienta de IA dispone de un modo de planificación (como el de Cursor o Claude Code), úsalo para que el LLM pueda leer tanto la estructura de tu proyecto como la documentación de Adapty antes de escribir código.

Dile a tu LLM qué enfoque usas para las compras — esto afecta a las guías que debe seguir:

- [**Adapty Paywall Builder**](adapty-paywall-builder): Creas los paywalls en el editor no-code de Adapty y el SDK los renderiza automáticamente.
- [**Paywalls creados manualmente**](react-native-making-purchases): Construyes tu propia interfaz de paywall en código, pero sigues usando Adapty para obtener productos y gestionar compras.
- [**Modo Observer**](observer-vs-full-mode): Mantienes tu infraestructura de compras existente y usas Adapty solo para analítica e integraciones.

¿No sabes cuál elegir? Lee la [tabla de comparación en la guía de inicio rápido](react-native-quickstart-paywalls).

### Instala y configura el SDK \{#install-and-configure-the-sdk\}

Añade la dependencia del SDK de Adapty usando npm (o yarn) y actívalo con tu clave SDK pública. Esta es la base — nada más funciona sin esto.

Tenemos guías de instalación separadas para proyectos Expo y React Native puro — elige la que corresponda a tu configuración.

**Guías:**
- [Instalar con Expo](sdk-installation-react-native-expo)
- [Instalar con React Native puro](sdk-installation-react-native-pure)

Envía esto a tu LLM (elige la que corresponda a tu configuración, o envía ambas):
```
Read these Adapty docs before writing code:
- https://adapty.io/docs/es/sdk-installation-react-native-expo.md
- https://adapty.io/docs/es/sdk-installation-react-native-pure.md
```

:::tip[Punto de verificación]
- **Resultado esperado:** La app compila y se ejecuta en iOS y Android. Los logs del bundler Metro muestran el log de activación de Adapty.
- **Problema frecuente:** "Public API key is missing" → comprueba que reemplazaste el marcador de posición con tu clave real de App settings.
:::

### Muestra paywalls y gestiona compras \{#show-paywalls-and-handle-purchases\}

Obtén un paywall por ID de placement, muéstralo y gestiona los eventos de compra. Las guías que necesitas dependen de cómo gestionas las compras.

Prueba cada compra en el sandbox a medida que avanzas — no esperes hasta el final. Consulta [Probar compras en sandbox](test-purchases-in-sandbox) para las instrucciones de configuración.

<Tabs groupId="paywall-approach">

<TabItem value="builder" label="Paywall Builder" default>

**Guías:**
- [Habilitar compras usando paywalls (inicio rápido)](react-native-quickstart-paywalls)
- [Obtener paywalls del Paywall Builder y su configuración](react-native-get-pb-paywalls)
- [Mostrar paywalls](react-native-present-paywalls)
- [Gestionar eventos de paywall](react-native-handling-events-1)
- [Responder a las acciones de los botones](react-native-handle-paywall-actions)

Envía esto a tu LLM:
```
Read these Adapty docs before writing code:
- https://adapty.io/docs/es/react-native-quickstart-paywalls.md
- https://adapty.io/docs/es/react-native-get-pb-paywalls.md
- https://adapty.io/docs/es/react-native-present-paywalls.md
- https://adapty.io/docs/es/react-native-handling-events-1.md
- https://adapty.io/docs/es/react-native-handle-paywall-actions.md
```

:::tip[Punto de verificación]
- **Resultado esperado:** El paywall aparece con los productos configurados. Al pulsar un producto se abre el diálogo de compra en sandbox.
- **Problema frecuente:** Paywall vacío o error en `getPaywall` → verifica que el ID de placement coincide exactamente con el del dashboard y que el placement tiene una audiencia asignada.
:::

</TabItem>

<TabItem value="manual" label="Paywalls manuales">

**Guías:**
- [Habilitar compras en tu paywall personalizado (inicio rápido)](react-native-quickstart-manual)
- [Obtener paywalls y productos](fetch-paywalls-and-products-react-native)
- [Renderizar un paywall diseñado con Remote Config](present-remote-config-paywalls-react-native)
- [Realizar compras](react-native-making-purchases)
- [Restaurar compras](react-native-restore-purchase)

Envía esto a tu LLM:
```
Read these Adapty docs before writing code:
- https://adapty.io/docs/es/react-native-quickstart-manual.md
- https://adapty.io/docs/es/fetch-paywalls-and-products-react-native.md
- https://adapty.io/docs/es/present-remote-config-paywalls-react-native.md
- https://adapty.io/docs/es/react-native-making-purchases.md
- https://adapty.io/docs/es/react-native-restore-purchase.md
```

:::tip[Punto de verificación]
- **Resultado esperado:** Tu paywall personalizado muestra los productos obtenidos de Adapty. Al pulsar un producto se abre el diálogo de compra en sandbox.
- **Problema frecuente:** Array de productos vacío → verifica que el paywall tiene productos asignados en el dashboard y que el placement tiene una audiencia.
:::

</TabItem>

<TabItem value="observer" label="Modo Observer">

**Guías:**
- [Descripción general del modo Observer](observer-vs-full-mode)
- [Implementar el modo Observer](implement-observer-mode-react-native)
- [Reportar transacciones en modo Observer](report-transactions-observer-mode-react-native)

Envía esto a tu LLM:
```
Read these Adapty docs before writing code:
- https://adapty.io/docs/es/observer-vs-full-mode.md
- https://adapty.io/docs/es/implement-observer-mode-react-native.md
- https://adapty.io/docs/es/report-transactions-observer-mode-react-native.md
```

:::tip[Punto de verificación]
- **Resultado esperado:** Tras una compra en sandbox con tu flujo de compra existente, la transacción aparece en el **Event Feed** del dashboard de Adapty.
- **Problema frecuente:** Sin eventos → verifica que estás reportando transacciones a Adapty y que las notificaciones del servidor están configuradas para ambos stores.
:::

</TabItem>

</Tabs>

### Comprueba el estado de la suscripción \{#check-subscription-status\}

Tras una compra, comprueba el perfil de usuario para ver si hay un nivel de acceso activo que dé acceso al contenido premium.

**Guía:** [Comprobar el estado de la suscripción](react-native-check-subscription-status)

Envía esto a tu LLM:
```
Read these Adapty docs before writing code:
- https://adapty.io/docs/es/react-native-check-subscription-status.md
```

:::tip[Punto de verificación]
- **Resultado esperado:** Tras una compra en sandbox, `profile.accessLevels['premium']?.isActive` devuelve `true`.
- **Problema frecuente:** `accessLevels` vacío tras la compra → comprueba que el producto tiene un nivel de acceso asignado en el dashboard.
:::

### Identifica a los usuarios \{#identify-users\}

Vincula las cuentas de usuario de tu app con los perfiles de Adapty para que las compras persistan entre dispositivos.

:::important
Omite este paso si tu app no tiene autenticación.
:::

**Guía:** [Identificar usuarios](react-native-quickstart-identify)

Envía esto a tu LLM:
```
Read these Adapty docs before writing code:
- https://adapty.io/docs/es/react-native-quickstart-identify.md
```

:::tip[Punto de verificación]
- **Resultado esperado:** Tras llamar a `adapty.identify("your-user-id")`, la sección **Profiles** del dashboard muestra tu ID de usuario personalizado.
- **Problema frecuente:** Llama a `identify` después de la activación pero antes de obtener paywalls para evitar la atribución a un perfil anónimo.
:::

### Prepárate para el lanzamiento \{#prepare-for-release\}

Una vez que tu integración funcione en el sandbox, repasa la lista de verificación de lanzamiento para asegurarte de que todo está listo para producción.

**Guía:** [Lista de verificación de lanzamiento](release-checklist)

Envía esto a tu LLM:
```
Read these Adapty docs before releasing:
- https://adapty.io/docs/es/release-checklist.md
```

:::tip[Punto de verificación]
- **Resultado esperado:** Todos los elementos de la lista confirmados: conexiones de stores, notificaciones del servidor, flujo de compra, comprobaciones de nivel de acceso y requisitos de privacidad.
- **Problema frecuente:** Faltan notificaciones del servidor → configura las App Store Server Notifications en **App settings → iOS SDK** y las Google Play Real-Time Developer Notifications en **App settings → Android SDK**.
:::

## Archivos de índice de documentación en texto plano \{#plain-text-doc-index-files\}

Si necesitas dar a tu LLM un contexto más amplio más allá de páginas individuales, alojamos archivos de índice que listan o combinan toda la documentación de Adapty:

- [`llms.txt`](https://adapty.io/docs/es/llms.txt): Lista todas las páginas con enlaces `.md`. Es un [estándar emergente](https://llmstxt.org/) para hacer que los sitios web sean accesibles para los LLMs. Ten en cuenta que para algunos agentes de IA (por ejemplo, ChatGPT) tendrás que descargar `llms.txt` y subirlo al chat como archivo.
- [`llms-full.txt`](https://adapty.io/docs/es/llms-full.txt): Toda la documentación del sitio de Adapty combinada en un único archivo. Es muy grande — úsalo solo cuando necesites el panorama completo.
- Subconjuntos específicos de React Native: [`react-native-llms.txt`](https://adapty.io/docs/es/react-native-llms.txt) y [`react-native-llms-full.txt`](https://adapty.io/docs/es/react-native-llms-full.txt): Subconjuntos específicos de la plataforma que ahorran tokens en comparación con el sitio completo.

---


# File: react-native-get-pb-paywalls
---

---
title: "Obtener paywalls de Paywall Builder y su configuración en el SDK de React Native"
description: "Aprende a recuperar paywalls de PB en Adapty para un mejor control de suscripciones en tu app de React Native."
---

Después de [diseñar la parte visual de tu paywall](adapty-paywall-builder) con el nuevo Paywall Builder en el Adapty Dashboard, puedes mostrarlo en tu app móvil. El primer paso en este proceso es obtener el paywall asociado al placement y su configuración de vista, tal como se describe a continuación.

:::warning
El nuevo Paywall Builder funciona con la versión 3.0 o superior del SDK de React Native.
:::

Ten en cuenta que este tema hace referencia a paywalls personalizados con Paywall Builder. Si estás implementando tus paywalls manualmente, consulta el tema [Obtener paywalls y productos para paywalls de Remote Config en tu app móvil](fetch-paywalls-and-products-react-native).

:::tip

¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app móvil? Echa un vistazo a nuestras [apps de ejemplo](sample-apps), que muestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funcionalidades básicas.

:::

<details>
   <summary>Antes de empezar a mostrar paywalls en tu app móvil (haz clic para expandir)</summary>

1. [Crea tus productos](create-product) en el Adapty Dashboard.
2. [Crea un paywall e incorpora los productos](create-paywall) en el Adapty Dashboard.
3. [Crea placements e incorpora tu paywall](create-placement) en el Adapty Dashboard.
4. Instala el [SDK de Adapty](sdk-installation-reactnative) en tu app móvil.
</details>

## Obtener el paywall diseñado con Paywall Builder \{#fetch-paywall-designed-with-paywall-builder\}

Si has [diseñado un paywall con Paywall Builder](adapty-paywall-builder), no necesitas preocuparte por renderizarlo en el código de tu app móvil para mostrárselo al usuario. Ese tipo de paywall contiene tanto lo que debe mostrarse como la forma en que debe hacerse. Aun así, debes obtener su ID a través del placement, su configuración de vista y luego presentarlo en tu app móvil.

Para garantizar un rendimiento óptimo, es fundamental recuperar el paywall y su [configuración de vista](react-native-get-pb-paywalls#fetch-the-view-configuration-of-paywall-designed-using-paywall-builder) lo antes posible, dejando tiempo suficiente para que las imágenes se descarguen antes de presentarlas al usuario.

Para obtener un paywall, usa el método `getPaywall`:

```typescript showLineNumbers
try {
    const placementId = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywall(placementId, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}
```
Parámetros:

| Parámetro         | Presencia | Descripción |
|-------------------|--------|-----------|
| **placementId**   | obligatorio | El identificador del [Placement](placements) deseado. Es el valor que especificaste al crear un placement en el Adapty Dashboard. |
| **locale**        | <p>opcional</p><p>por defecto: `en`</p> | <p>El identificador de la [localización del paywall](add-paywall-locale-in-adapty-paywall-builder). Se espera que este parámetro sea un código de idioma compuesto por uno o dos subetiquetas separadas por el carácter menos (**-**). La primera subetiqueta es para el idioma y la segunda para la región.</p><p></p><p>Ejemplo: `en` significa inglés, `pt-br` representa el portugués de Brasil.</p><p>Consulta [Localizaciones y códigos de idioma](localizations-and-locale-codes) para más información sobre los códigos de idioma y cómo recomendamos usarlos.</p> |
| **fetchPolicy**   | por defecto: `.reloadRevalidatingCacheData` | <p>Por defecto, el SDK intentará cargar datos desde el servidor y devolverá datos en caché en caso de fallo. Recomendamos esta opción porque garantiza que tus usuarios siempre reciban los datos más actualizados.</p><p></p><p>Sin embargo, si crees que tus usuarios tienen conexión a internet inestable, considera usar `.returnCacheDataElseLoad` para devolver datos en caché si existen. En ese caso, los usuarios podrían no obtener los datos más recientes, pero experimentarán tiempos de carga más rápidos, independientemente de la calidad de su conexión. La caché se actualiza regularmente, por lo que es seguro usarla durante la sesión para evitar solicitudes de red.</p><p></p><p>Ten en cuenta que la caché permanece intacta al reiniciar la app y solo se borra al desinstalarla o mediante una limpieza manual.</p><p></p><p>El SDK de Adapty almacena los paywalls localmente en dos capas: la caché de actualización regular descrita anteriormente y los [paywalls de respaldo](fallback-paywalls). También usamos CDN para obtener los paywalls más rápido y un servidor de respaldo independiente en caso de que la CDN no sea accesible. Este sistema está diseñado para garantizar que siempre obtengas la versión más reciente de tus paywalls, asegurando la fiabilidad incluso cuando la conexión a internet es escasa.</p> |
| **loadTimeoutMs** | por defecto: 5 seg | <p>Este valor limita el tiempo de espera de este método. Si se alcanza el límite, se devolverán los datos en caché o el fallback local.</p><p>Ten en cuenta que en casos excepcionales este método puede agotar el tiempo de espera un poco después de lo especificado en `loadTimeout`, ya que la operación puede consistir en diferentes solicitudes internamente.</p><p>Para Android: puedes crear `TimeInterval` con funciones de extensión (como `5.seconds`, donde `.seconds` es de `import com.adapty.utils.seconds`), o `TimeInterval.seconds(5)`. Para no establecer ningún límite, usa `TimeInterval.INFINITE`.</p> |

Parámetros de respuesta:

| Parámetro | Descripción                                                                                                                                                                            |
| :-------- |:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Paywall   | Un objeto [`AdaptyPaywall`](https://react-native.adapty.io/interfaces/adaptypaywall) con una lista de IDs de productos, el identificador del paywall, Remote Config y varias otras propiedades. |

## Obtener la configuración de vista del paywall diseñado con Paywall Builder \{#fetch-the-view-configuration-of-paywall-designed-using-paywall-builder\}

:::important
Asegúrate de activar el toggle **Show on device** en el Paywall Builder. Si esta opción no está activada, la configuración de vista no estará disponible para recuperar.
:::

Después de obtener el paywall, comprueba si incluye una `ViewConfiguration`, lo que indica que fue creado con Paywall Builder. Esto te orientará sobre cómo mostrar el paywall. Si la `ViewConfiguration` está presente, trátalo como un paywall de Paywall Builder; si no, [manéjalo como un paywall de Remote Config](present-remote-config-paywalls-react-native).

En el SDK de React Native, llama directamente al método `createPaywallView` sin necesidad de obtener la configuración de vista manualmente primero.

:::warning
El resultado del método `createPaywallView` solo puede usarse una vez. Si necesitas usarlo de nuevo, llama al método `createPaywallView` nuevamente. Llamarlo dos veces sin recrearlo puede provocar el error `AdaptyUIError.viewAlreadyPresented`.
:::

```typescript showLineNumbers
// for the Adapty SDK < 3.14 – import {createPaywallView} from 'react-native-adapty/dist/ui';

if (paywall.hasViewConfiguration) {
  try {
    const view = await createPaywallView(paywall);
  } catch (error) {
    // handle the error
  }
} else {
    //use your custom logic
}
```

Parámetros:

| Parámetro            | Presencia | Descripción                                                  |
| :------------------- | :------- | :----------------------------------------------------------- |
| **paywall**          | obligatorio | Un objeto `AdaptyPaywall` para obtener un controlador del paywall deseado. |
| **customTags**       | opcional | Define un diccionario de etiquetas personalizadas y sus valores resueltos. Las etiquetas personalizadas funcionan como marcadores de posición en el contenido del paywall, reemplazados dinámicamente con cadenas específicas para contenido personalizado. Consulta el tema [Etiquetas personalizadas en el Paywall Builder](custom-tags-in-paywall-builder) para más detalles. |
| **prefetchProducts** | opcional | Actívalo para optimizar el tiempo de visualización de los productos en pantalla. Cuando es `true`, AdaptyUI obtendrá automáticamente los productos necesarios. Por defecto: `false`. |

:::note
Si usas varios idiomas, aprende cómo añadir una [localización de Paywall Builder](add-paywall-locale-in-adapty-paywall-builder) y cómo usar los códigos de idioma correctamente [aquí](react-native-localizations-and-locale-codes).
:::

Una vez que tengas la vista, [presenta el paywall](react-native-present-paywalls).

## Obtener un paywall para la audiencia predeterminada para cargarlo más rápido \{#get-a-paywall-for-a-default-audience-to-fetch-it-faster\}

Por lo general, los paywalls se obtienen casi de inmediato, por lo que no necesitas preocuparte por acelerar este proceso. Sin embargo, en casos en los que tienes numerosas audiencias y paywalls y tus usuarios tienen una conexión a internet débil, obtener un paywall puede tardar más de lo deseable. En esas situaciones, puede que quieras mostrar un paywall predeterminado para garantizar una experiencia de usuario fluida en lugar de no mostrar ninguno.

Para abordar esto, puedes usar el método `getPaywallForDefaultAudience`, que obtiene el paywall del placement especificado para la audiencia **All Users**. Sin embargo, es fundamental entender que el enfoque recomendado es obtener el paywall con el método `getPaywall`, como se detalla en la sección [Obtener el paywall](#fetch-paywall-designed-with-paywall-builder) anterior.

:::warning
Por qué recomendamos usar `getPaywall`

El método `getPaywallForDefaultAudience` tiene algunos inconvenientes importantes:

- **Posibles problemas de compatibilidad con versiones anteriores**: si necesitas mostrar diferentes paywalls para distintas versiones de la app (actual y futuras), puedes encontrarte con dificultades. Tendrás que diseñar paywalls compatibles con la versión actual (legacy) o aceptar que los usuarios con esa versión puedan encontrar problemas con paywalls que no se renderizan.
- **Pérdida de segmentación**: todos los usuarios verán el mismo paywall diseñado para la audiencia **All Users**, lo que significa que pierdes la segmentación personalizada (incluida la basada en países, atribución de marketing o tus propios atributos personalizados).

Si estás dispuesto a aceptar estos inconvenientes para beneficiarte de una carga más rápida de paywalls, usa el método `getPaywallForDefaultAudience` de la siguiente manera. De lo contrario, usa `getPaywall` descrito [arriba](#fetch-paywall-designed-with-paywall-builder).
:::

```typescript showLineNumbers
try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}
```

:::note
El método `getPaywallForDefaultAudience` está disponible a partir de la versión 2.11.2 del SDK de React Native.
:::

| Parámetro | Presencia | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
|---------|--------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **placementId** | obligatorio | El identificador del [Placement](placements). Es el valor que especificaste al crear un placement en tu Adapty Dashboard.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| **locale** | <p>opcional</p><p>por defecto: `en`</p> | <p>El identificador de la [localización del paywall](add-remote-config-locale). Se espera que este parámetro sea un código de idioma compuesto por una o más subetiquetas separadas por el carácter menos (**-**). La primera subetiqueta es para el idioma y la segunda para la región.</p><p></p><p>Ejemplo: `en` significa inglés, `pt-br` representa el portugués de Brasil.</p><p></p><p>Consulta [Localizaciones y códigos de idioma](react-native-localizations-and-locale-codes) para más información sobre los códigos de idioma y cómo recomendamos usarlos.</p>                                                                                                                                                                                                                                       |
| **fetchPolicy** | por defecto: `.reloadRevalidatingCacheData` | <p>Por defecto, el SDK intentará cargar datos desde el servidor y devolverá datos en caché en caso de fallo. Recomendamos esta opción porque garantiza que tus usuarios siempre reciban los datos más actualizados.</p><p></p><p>Sin embargo, si crees que tus usuarios tienen conexión a internet inestable, considera usar `.returnCacheDataElseLoad` para devolver datos en caché si existen. En ese caso, los usuarios podrían no obtener los datos más recientes, pero experimentarán tiempos de carga más rápidos, independientemente de la calidad de su conexión. La caché se actualiza regularmente, por lo que es seguro usarla durante la sesión para evitar solicitudes de red.</p><p></p><p>Ten en cuenta que la caché permanece intacta al reiniciar la app y solo se borra al desinstalarla o mediante una limpieza manual.</p> |

## Personalizar recursos \{#customize-assets\}

Para personalizar imágenes y vídeos en tu paywall, implementa los recursos personalizados.

Las imágenes y vídeos destacados tienen IDs predefinidos: `hero_image` y `hero_video`. En un bundle de recursos personalizados, apuntas a estos elementos por sus IDs y personalizas su comportamiento.

Para otras imágenes y vídeos, debes [establecer un ID personalizado](custom-media) en el dashboard de Adapty.

Por ejemplo, puedes:

- Mostrar una imagen o vídeo diferente a algunos usuarios.
- Mostrar una imagen de vista previa local mientras se carga la imagen principal remota.
- Mostrar una imagen de vista previa antes de reproducir un vídeo.

:::important
Para usar esta función, actualiza el SDK de React Native de Adapty a la versión 3.8.0 o superior.
:::

Aquí tienes un ejemplo de cómo puedes proporcionar recursos personalizados mediante un diccionario sencillo:

```javascript
const customAssets: Record<string, AdaptyCustomAsset> = {
  'custom_image': { type: 'image', relativeAssetPath: 'custom_image.png' },
  'hero_video': {
    type: 'video',
    fileLocation: {
      ios: { fileName: 'custom_video.mp4' },
      android: { relativeAssetPath: 'videos/custom_video.mp4' }
    }
  }
};

view = await createPaywallView(paywall, { customAssets })

```

:::note
Si no se encuentra un recurso, el paywall volverá a su apariencia predeterminada.
:::

---


# File: react-native-present-paywalls
---

---
title: "React Native - Presentar paywalls nuevos creados con Paywall Builder"
description: "Presenta paywalls en aplicaciones React Native usando Adapty."
---

Si has personalizado un paywall con el Paywall Builder, no necesitas preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Ese paywall incluye tanto lo que debe mostrarse como la forma en que debe mostrarse.

Antes de empezar, asegúrate de que:

1. Has [creado un paywall](create-paywall).
2. Has añadido el paywall a un [placement](placements).
3. Has [obtenido el paywall y preparado la vista](react-native-get-pb-paywalls).

:::warning

Esta guía es solo para **paywalls nuevos creados con Paywall Builder**, que requieren SDK v3.0 o posterior. El proceso para presentar paywalls varía según la versión del Paywall Builder utilizada y si son paywalls con Remote Config.

- Para presentar **paywalls con Remote Config**, consulta [Renderizar un paywall diseñado con Remote Config](present-remote-config-paywalls).

:::

El SDK de Adapty para React Native ofrece dos formas de presentar paywalls:

- **Componente de React**: Un componente embebido que puedes integrar en la arquitectura y el sistema de navegación de tu app.

- **Presentación modal**

## Componente de React \{#react-component\}

:::note
El enfoque de **componente de React** requiere SDK 3.14.0 o posterior.
:::

Para incrustar un paywall dentro de tu árbol de componentes existente, utiliza el componente `AdaptyPaywallView` directamente en la jerarquía de componentes de React Native. El componente embebido te permite integrarlo en la arquitectura y el sistema de navegación de tu app.

:::note
En Android, si el paywall no se extiende detrás de la barra de estado, puede aparecer una superposición visual en su parte superior. Te recomendamos desactivarla para tus paywalls. Consulta [Superposición visual en la parte superior del paywall (Android)](#visual-overlay-at-the-top-of-the-paywall-android).
:::

```typescript showLineNumbers title="React Native (TSX)"

function MyPaywall({ paywall }) {
  const paywallParams = useMemo(() => ({
    loadTimeoutMs: 3000,
  }), []);

  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {}, []);
  const onProductSelected = useCallback<EventHandlers['onProductSelected']>((productId) => {}, []);
  const onPurchaseStarted = useCallback<EventHandlers['onPurchaseStarted']>((product) => {}, []);
  const onPurchaseCompleted = useCallback<EventHandlers['onPurchaseCompleted']>((purchaseResult, product) => {}, []);
  const onPurchaseFailed = useCallback<EventHandlers['onPurchaseFailed']>((error, product) => {}, []);
  const onRestoreStarted = useCallback<EventHandlers['onRestoreStarted']>(() => {}, []);
  const onRestoreCompleted = useCallback<EventHandlers['onRestoreCompleted']>((profile) => {}, []);
  const onRestoreFailed = useCallback<EventHandlers['onRestoreFailed']>((error) => {}, []);
  const onPaywallShown = useCallback<EventHandlers['onPaywallShown']>(() => {}, []);
  const onRenderingFailed = useCallback<EventHandlers['onRenderingFailed']>((error) => {}, []);
  const onLoadingProductsFailed = useCallback<EventHandlers['onLoadingProductsFailed']>((error) => {}, []);
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {}, []);
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {}, []);
  const onWebPaymentNavigationFinished = useCallback<EventHandlers['onWebPaymentNavigationFinished']>(() => {}, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      params={paywallParams}
      style={styles.paywall}
      onCloseButtonPress={onCloseButtonPress}
      onProductSelected={onProductSelected}
      onPurchaseStarted={onPurchaseStarted}
      onPurchaseCompleted={onPurchaseCompleted}
      onPurchaseFailed={onPurchaseFailed}
      onRestoreStarted={onRestoreStarted}
      onRestoreCompleted={onRestoreCompleted}
      onRestoreFailed={onRestoreFailed}
      onPaywallShown={onPaywallShown}
      onRenderingFailed={onRenderingFailed}
      onLoadingProductsFailed={onLoadingProductsFailed}
      onCustomAction={onCustomAction}
      onUrlPress={onUrlPress}
      onWebPaymentNavigationFinished={onWebPaymentNavigationFinished}
    />
  );
}
```

## Presentación modal \{#modal-presentation\}

Para mostrar un paywall como pantalla independiente, utiliza el método `view.present()` sobre el `view` creado por el método [`createPaywallView`](react-native-get-pb-paywalls#fetch-the-view-configuration-of-paywall-designed-using-paywall-builder). Cada `view` solo puede usarse una vez. Si necesitas mostrar el paywall de nuevo, llama a `createPaywallView` una vez más para crear una nueva instancia de `view`.

:::warning
Reutilizar el mismo `view` sin recrearlo no está permitido. Dará lugar a un error `AdaptyUIError.viewAlreadyPresented`.
:::

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>
```typescript showLineNumbers title="React Native (TSX)"

const view = await createPaywallView(paywall);

// Opcional: manejar eventos del paywall (cerrar, comprar, restaurar, etc.)
// view.setEventHandlers({ ... });

try {
  await view.present();
} catch (error) {
  // manejar el error
}
```

:::important
Llamar a `setEventHandlers` varias veces sobrescribirá los handlers que hayas proporcionado, reemplazando tanto los predeterminados como los configurados anteriormente para esos eventos específicos.
:::

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>
```typescript showLineNumbers title="React Native (TSX)"

const view = await createPaywallView(paywall);

view.registerEventHandlers(); // manejar el cierre, etc.

try {
  await view.present();
} catch (error) {
  // manejar el error
}
```

</TabItem>
</Tabs>

### Configurar el estilo de presentación en iOS \{#configure-ios-presentation-style\}

Configura cómo se presenta el paywall en iOS pasando el parámetro `iosPresentationStyle` al método `present()`. El parámetro acepta los valores `'full_screen'` (predeterminado) o `'page_sheet'`.

```typescript showLineNumbers
try {
  await view.present(iosPresentationStyle: 'page_sheet');
} catch (error) {
  // handle the error
}
```

## Usar un temporizador definido por el desarrollador \{#use-developer-defined-timer\}

Para usar temporizadores definidos por el desarrollador en tu app, utiliza el `timerId`; en este ejemplo, `CUSTOM_TIMER_NY`, el **Timer ID** del temporizador definido por el desarrollador que configuraste en el Adapty dashboard. Esto garantiza que tu app actualice dinámicamente el temporizador con el valor correcto, como `13d 09h 03m 34s` (calculado como la hora de finalización del temporizador, por ejemplo Año Nuevo, menos la hora actual).

<Tabs>
<TabItem value="component" label="React component">
```typescript showLineNumbers title="React Native (TSX)"
const paywallParams = {
  customTimers: { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) }
};

<AdaptyPaywallView
  paywall={paywall}
  params={paywallParams}
  // ... tus event handlers
/>
```
</TabItem>
<TabItem value="modal" label="Modal presentation">
```typescript showLineNumbers title="React Native (TSX)"
const customTimers = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) };

const view = await createPaywallView(paywall, { customTimers });
```
</TabItem>
</Tabs>
En este ejemplo, `CUSTOM_TIMER_NY` es el **Timer ID** del temporizador definido por el desarrollador que configuraste en el Adapty dashboard. El `timerResolver` garantiza que tu app actualice dinámicamente el temporizador con el valor correcto, como `13d 09h 03m 34s` (calculado como la hora de finalización del temporizador, por ejemplo Año Nuevo, menos la hora actual).

## Mostrar un diálogo \{#show-dialog\}

Usa este método en lugar de los diálogos de alerta nativos cuando se muestra una vista de paywall en Android. En Android, las alertas normales de RN aparecen detrás de la vista del paywall, lo que las hace invisibles para los usuarios. Este método garantiza que el diálogo se muestre correctamente por encima del paywall en todas las plataformas.

```typescript showLineNumbers title="React Native (TSX)"
try {
  const action = await view.showDialog({
    title: 'Close paywall?',
    content: 'You will lose access to exclusive offers.',
    primaryActionTitle: 'Stay',
    secondaryActionTitle: 'Close',
  });
  
  if (action === 'secondary') {
    // El usuario confirmó - cerrar el paywall
    await view.dismiss();
  }
  // Si es primary - no hacer nada, el usuario se queda
} catch (error) {
  // manejar el error
}
```

## Reemplazar una suscripción por otra \{#replace-one-subscription-with-another\}

Cuando un usuario intenta comprar una nueva suscripción mientras tiene otra activa en Android, puedes controlar cómo debe gestionarse la nueva compra pasando parámetros de actualización de suscripción al crear la vista del paywall. Para reemplazar la suscripción actual por la nueva, usa `productPurchaseParams` en `createPaywallView` con los parámetros `oldSubVendorProductId` y `prorationMode`.

```typescript showLineNumbers title="React Native (TSX)"

const productPurchaseParams = paywall.productIdentifiers.map((productId) => {
  let params = {};
  if (Platform.OS === 'android') {
    params.android = {
      subscriptionUpdateParams: {
        oldSubVendorProductId: 'PRODUCT_ID_OF_THE_CURRENT_ACTIVE_SUBSCRIPTION',
        prorationMode: 'with_time_proration',
      },
    };
  }
  return { productId, params };
});

const view = await createPaywallView(paywall, { productPurchaseParams });
```

## Solución de problemas \{#troubleshooting\}

### Superposición visual en la parte superior del paywall (Android) \{#visual-overlay-at-the-top-of-the-paywall-android\}

:::note
Esta configuración es compatible a partir del SDK de React Native 3.15.5 y solo está disponible en proyectos bare de React Native.

Si usas un flujo gestionado de Expo, no puedes añadir este recurso de Android directamente. Para aplicar esta configuración, debes crear un plugin de configuración personalizado de Expo que añada el recurso de Android correspondiente y registrarlo en app.config.js. Esto es necesario porque Expo gestiona el proyecto nativo de Android por ti.
:::

Si `AdaptyPaywallView` no se extiende detrás de la barra de estado, puede aparecer una superposición visual en su parte superior. Para eliminarla, añade el siguiente recurso booleano a tu app:

1. Ve a `android/app/src/main/res/values`. Si no existe el archivo `bools.xml`, créalo.

2. Añade el siguiente recurso:

```xml
<resources>
    <bool name="adapty_paywall_enable_safe_area_paddings">false</bool>
</resources>
```

Ten en cuenta que los cambios se aplican de forma global a todos los paywalls de tu app.

---


# File: react-native-handle-paywall-actions
---

---
title: "Responder a acciones de botones en React Native SDK"
description: "Gestiona las acciones de botones del paywall en React Native usando Adapty para mejorar la monetización de tu app."
---

Si estás creando paywalls con el Paywall Builder de Adapty, es fundamental configurar los botones correctamente:

1. Añade un [botón en el Paywall Builder](paywall-buttons) y asígnale una acción predefinida o crea un ID de acción personalizado.
2. Escribe código en tu app para gestionar cada acción que hayas asignado.

Esta guía muestra cómo gestionar acciones personalizadas y predefinidas en tu código.

:::warning
**Solo las compras, restauraciones, cierres del paywall y apertura de URLs se gestionan automáticamente.** El resto de acciones de botones requieren una implementación adecuada en el código de la app.
:::

## Cerrar paywalls \{#close-paywalls\}

Para añadir un botón que cierre tu paywall:

1. En el Paywall Builder, añade un botón y asígnale la acción **Close**.
2. En el código de tu app, implementa un handler para la acción `close` que descarte el paywall.

:::info
En el SDK de React Native, la acción `close` desencadena el cierre del paywall por defecto. Sin embargo, puedes cambiar este comportamiento en tu código si lo necesitas. Por ejemplo, cerrar un paywall puede desencadenar la apertura de otro.
:::

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Para el componente React, gestiona la acción de cierre mediante las props de handler de eventos individuales:

```javascript

function MyPaywall({ paywall }) {
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {
    // Handle close button press - navigate away or hide component
    navigation.goBack();
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

Para la presentación modal, implementa el handler de cierre:

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

Para la versión del SDK < 3.14, solo se admite la presentación modal:

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
    onCloseButtonPress() {
        return true; // allow paywall closing
    }
});
```

</TabItem>
</Tabs>

## Abrir URLs desde paywalls \{#open-urls-from-paywalls\}

:::tip
Si quieres añadir un grupo de enlaces (por ejemplo, términos de uso y restauración de compras), añade un elemento **Link** en el Paywall Builder y gestíonalo igual que los botones con la acción **Open URL**.
:::

Para añadir un botón que abra un enlace desde tu paywall (p. ej., **Terms of use** o **Privacy policy**):

1. En el Paywall Builder, añade un botón, asígnale la acción **Open URL** e introduce la URL que quieres abrir.
2. En el código de tu app, implementa un handler para la acción `openUrl` que abra la URL recibida en un navegador.

:::info
En el SDK de React Native, la acción `openUrl` desencadena la apertura de la URL por defecto. Sin embargo, puedes cambiar este comportamiento en tu código si lo necesitas.
:::

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Para el componente React, gestiona la apertura de URLs mediante la prop de handler de eventos:

```javascript

function MyPaywall({ paywall }) {
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onUrlPress={onUrlPress}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

Para la presentación modal, implementa el handler de URL:

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep paywall open
    },
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

Para la versión del SDK < 3.14, solo se admite la presentación modal:

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
    onUrlPress(url) {
        Linking.openURL(url);
        return false; // Keep paywall open
    },
});
```

</TabItem>
</Tabs>

## Iniciar sesión en la app \{#log-into-the-app\}

Para añadir un botón que permita a los usuarios iniciar sesión en tu app:

1. En el Paywall Builder, añade un botón y asígnale la acción **Login**.
2. En el código de tu app, implementa un handler para la acción `login` que identifique a tu usuario.

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Para el componente React, gestiona el inicio de sesión mediante la prop de handler de eventos:

```javascript

function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'login') {
      navigation.navigate('Login');
    }
  }, [navigation]);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

Para la presentación modal, implementa el handler de inicio de sesión:

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'login') {
            navigation.navigate('Login');
        }
    }
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

Para la versión del SDK < 3.14, solo se admite la presentación modal:

```javascript

const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'login') {
            navigation.navigate('Login');
        }
    }
});
```

</TabItem>
</Tabs>

## Gestionar acciones personalizadas \{#handle-custom-actions\}

Para añadir un botón que gestione cualquier otra acción:

1. En el Paywall Builder, añade un botón, asígnale la acción **Custom** y asígnale un ID.
2. En el código de tu app, implementa un handler para el ID de acción que hayas creado.

Por ejemplo, si tienes otro conjunto de ofertas de suscripción o compras únicas, puedes añadir un botón que muestre otro paywall:

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Para el componente React, gestiona las acciones personalizadas mediante la prop de handler de eventos:

```javascript

function MyPaywall({ paywall }) {
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {
    if (actionId === 'openNewPaywall') {
      // Display another paywall
    }
  }, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCustomAction={onCustomAction}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

Para la presentación modal, implementa los handlers de acciones personalizadas:

```javascript
const unsubscribe = view.setEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another paywall
        }
    },
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

Para la versión del SDK < 3.14, solo se admite la presentación modal:

```javascript
const unsubscribe = view.registerEventHandlers({
    onCustomAction(actionId) {
        if (actionId === 'openNewPaywall') {
            // Display another paywall
        }
    },
});
```

</TabItem>
</Tabs>

---


# File: react-native-handling-events-1
---

---
title: "React Native - Gestionar eventos del paywall"
description: "Gestiona eventos de suscripción en React Native con el SDK de Adapty."
---

:::important
Esta guía cubre la gestión de eventos para compras, restauraciones, selección de productos y renderizado de paywalls. También debes implementar la gestión de botones (cerrar paywall, abrir enlaces, etc.). Consulta nuestra [guía sobre cómo gestionar acciones de botones](react-native-handle-paywall-actions) para más detalles.
:::

Los paywalls configurados con el [Paywall Builder](adapty-paywall-builder) no necesitan código adicional para realizar y restaurar compras. Sin embargo, generan algunos eventos a los que tu app puede responder. Estos eventos incluyen pulsaciones de botones (botones de cierre, URLs, selecciones de productos, etc.) así como notificaciones sobre acciones relacionadas con compras realizadas en el paywall. A continuación encontrarás cómo responder a estos eventos.

:::warning
Esta guía es solo para **paywalls del nuevo Paywall Builder**, que requieren el SDK de Adapty v3.0 o posterior.
:::

Para controlar o monitorizar los procesos que ocurren en la pantalla del paywall dentro de tu app móvil, implementa los manejadores de eventos:

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Para el componente React, gestionas los eventos mediante props individuales de manejadores de eventos en el componente `AdaptyPaywallView`:

```typescript showLineNumbers title="React Native (TSX)"

function MyPaywall({ paywall }) {
  const onCloseButtonPress = useCallback<EventHandlers['onCloseButtonPress']>(() => {}, []);
  const onProductSelected = useCallback<EventHandlers['onProductSelected']>((productId) => {}, []);
  const onPurchaseStarted = useCallback<EventHandlers['onPurchaseStarted']>((product) => {}, []);
  const onPurchaseCompleted = useCallback<EventHandlers['onPurchaseCompleted']>((purchaseResult, product) => {}, []);
  const onPurchaseFailed = useCallback<EventHandlers['onPurchaseFailed']>((error, product) => {}, []);
  const onRestoreStarted = useCallback<EventHandlers['onRestoreStarted']>(() => {}, []);
  const onRestoreCompleted = useCallback<EventHandlers['onRestoreCompleted']>((profile) => {}, []);
  const onRestoreFailed = useCallback<EventHandlers['onRestoreFailed']>((error) => {}, []);
  const onPaywallShown = useCallback<EventHandlers['onPaywallShown']>(() => {}, []);
  const onRenderingFailed = useCallback<EventHandlers['onRenderingFailed']>((error) => {}, []);
  const onLoadingProductsFailed = useCallback<EventHandlers['onLoadingProductsFailed']>((error) => {}, []);
  const onUrlPress = useCallback<EventHandlers['onUrlPress']>((url) => {
    Linking.openURL(url);
  }, []);
  const onCustomAction = useCallback<EventHandlers['onCustomAction']>((actionId) => {}, []);
  const onWebPaymentNavigationFinished = useCallback<EventHandlers['onWebPaymentNavigationFinished']>(() => {}, []);

  return (
    <AdaptyPaywallView
      paywall={paywall}
      style={styles.container}
      onCloseButtonPress={onCloseButtonPress}
      onProductSelected={onProductSelected}
      onPurchaseStarted={onPurchaseStarted}
      onPurchaseCompleted={onPurchaseCompleted}
      onPurchaseFailed={onPurchaseFailed}
      onRestoreStarted={onRestoreStarted}
      onRestoreCompleted={onRestoreCompleted}
      onRestoreFailed={onRestoreFailed}
      onPaywallShown={onPaywallShown}
      onRenderingFailed={onRenderingFailed}
      onLoadingProductsFailed={onLoadingProductsFailed}
      onUrlPress={onUrlPress}
      onCustomAction={onCustomAction}
      onWebPaymentNavigationFinished={onWebPaymentNavigationFinished}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

Para la presentación modal, implementa el método de manejadores de eventos.

:::important
Llamar a `setEventHandlers` varias veces sobreescribirá los manejadores que proporciones, reemplazando tanto los predeterminados como los configurados anteriormente para esos eventos específicos.
:::

```javascript showLineNumbers title="React Native (TSX)"

const view = await createPaywallView(paywall);

const unsubscribe = view.setEventHandlers({
  onCloseButtonPress() {
    return true;
  },
  onAndroidSystemBack() {
    return true;
  },
  onPurchaseCompleted(purchaseResult, product) {
    return purchaseResult.type !== 'user_cancelled';
  },
  onPurchaseStarted(product) { /***/},
  onPurchaseFailed(error) { /***/ },
  onRestoreCompleted(profile) { /***/ },
  onRestoreFailed(error, product) { /***/ },
  onProductSelected(productId) { /***/},
  onRenderingFailed(error) { /***/ },
  onLoadingProductsFailed(error) { /***/ },
  onUrlPress(url) {
      Linking.openURL(url);
      return false; // Keep paywall open
  },
  onPaywallShown() { /***/ },
  onPaywallClosed() { /***/ },
  onWebPaymentNavigationFinished() { /***/ },  
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

Para versiones del SDK anteriores a la 3.14, solo se admite la presentación modal:

```javascript showLineNumbers title="React Native (TSX)"

const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
  onCloseButtonPress() {
    return true;
  },
  onAndroidSystemBack() {
    return true;
  },
  onPurchaseCompleted(purchaseResult, product) {
    return purchaseResult.type !== 'user_cancelled';
  },
  onPurchaseStarted(product) { /***/},
  onPurchaseFailed(error, product) { /***/ },
  onRestoreCompleted(profile) { /***/ },
  onRestoreFailed(error) { /***/ },
  onProductSelected(productId) { /***/},
  onRenderingFailed(error) { /***/ },
  onLoadingProductsFailed(error) { /***/ },
  onUrlPress(url) {
      Linking.openURL(url);
      return false; // Keep paywall open
  },
  onPaywallShown() { /***/ },
  onPaywallClosed() { /***/ },
  onWebPaymentNavigationFinished() { /***/ },
});
```

</TabItem>
</Tabs>

<Details>
<summary>Ejemplos de eventos (haz clic para expandir)</summary>

```javascript
// onCloseButtonPress
{
  "event": "close_button_press"
}

// onAndroidSystemBack
{
  "event": "android_system_back"
}

// onUrlPress
{
  "event": "url_press",
  "url": "https://example.com/terms"
}

// onCustomAction
{
  "event": "custom_action",
  "actionId": "login"
}

// onProductSelected
{
  "event": "product_selected",
  "productId": "premium_monthly"
}

// onPurchaseStarted
{
  "event": "purchase_started",
  "product": {
    "vendorProductId": "premium_monthly",
    "localizedTitle": "Premium Monthly",
    "localizedDescription": "Premium subscription for 1 month",
    "localizedPrice": "$9.99",
    "price": 9.99,
    "currencyCode": "USD"
  }
}

// onPurchaseCompleted - Success
{
  "event": "purchase_completed",
  "purchaseResult": {
    "type": "success",
    "profile": {
      "accessLevels": {
        "premium": {
          "id": "premium",
          "isActive": true,
          "expiresAt": "2024-02-15T10:30:00Z"
        }
      }
    }
  },
  "product": {
    "vendorProductId": "premium_monthly",
    "localizedTitle": "Premium Monthly",
    "localizedDescription": "Premium subscription for 1 month",
    "localizedPrice": "$9.99",
    "price": 9.99,
    "currencyCode": "USD"
  }
}

// onPurchaseCompleted - Cancelled
{
  "event": "purchase_completed",
  "purchaseResult": {
    "type": "user_cancelled"
  },
  "product": {
    "vendorProductId": "premium_monthly",
    "localizedTitle": "Premium Monthly",
    "localizedDescription": "Premium subscription for 1 month",
    "localizedPrice": "$9.99",
    "price": 9.99,
    "currencyCode": "USD"
  }
}

// onPurchaseFailed
{
  "event": "purchase_failed",
  "error": {
    "code": "purchase_failed",
    "message": "Purchase failed due to insufficient funds",
    "details": {
      "underlyingError": "Insufficient funds in account"
    },
    "product": {
        "vendorProductId": "premium_monthly",
            "localizedTitle": "Premium Monthly",
            "localizedDescription": "Premium subscription for 1 month",
            "localizedPrice": "$9.99",
            "price": 9.99,
            "currencyCode": "USD"
    }
  }
}

// onRestoreCompleted
{
  "event": "restore_completed",
  "profile": {
    "accessLevels": {
      "premium": {
        "id": "premium",
        "isActive": true,
        "expiresAt": "2024-02-15T10:30:00Z"
      }
    },
    "subscriptions": [
      {
        "vendorProductId": "premium_monthly",
        "isActive": true,
        "expiresAt": "2024-02-15T10:30:00Z"
      }
    ]
  }
}

// onRestoreFailed
{
  "event": "restore_failed",
  "error": {
    "code": "restore_failed",
    "message": "Purchase restoration failed",
    "details": {
      "underlyingError": "No previous purchases found"
    }
  }
}

// onRenderingFailed
{
  "event": "rendering_failed",
  "error": {
    "code": "rendering_failed",
    "message": "Failed to render paywall interface",
    "details": {
      "underlyingError": "Invalid paywall configuration"
    }
  }
}

// onLoadingProductsFailed
{
  "event": "loading_products_failed",
  "error": {
    "code": "products_loading_failed",
    "message": "Failed to load products from the server",
    "details": {
      "underlyingError": "Network timeout"
    }
  }
}

// onPaywallShown
{
  "event": "paywall_shown"
}

// onPaywallClosed
{
  "event": "paywall_closed"
}

// onWebPaymentNavigationFinished
{
  "event": "web_payment_navigation_finished"
}
```
</Details>

Puedes registrar los manejadores de eventos que necesites y omitir los que no uses. En ese caso, no se crearán los listeners para los eventos no utilizados. No hay manejadores de eventos obligatorios.

Los manejadores de eventos devuelven un booleano. Si se devuelve `true`, el proceso de visualización se considera completado, por lo que la pantalla del paywall se cierra y los listeners de eventos de esa vista se eliminan.

Algunos manejadores de eventos tienen un comportamiento predeterminado que puedes sobrescribir si lo necesitas:
- `onCloseButtonPress`: cierra el paywall cuando se pulsa el botón de cierre.
- `onUrlPress`: abre la URL pulsada y mantiene el paywall abierto.
- `onAndroidSystemBack` (solo para presentación modal): cierra el paywall cuando se pulsa el botón **Back**.
- `onRestoreCompleted`: cierra el paywall tras una restauración exitosa.
- `onPurchaseCompleted`: cierra el paywall a menos que el usuario haya cancelado.
- `onRenderingFailed`: cierra el paywall si falla su renderizado.

### Manejadores de eventos \{#event-handlers\}

| Manejador de evento                | Descripción                                                                                                                                                                                                                                                                                                     |
|:-----------------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **onCustomAction**                 | Se invoca cuando el usuario realiza una acción personalizada, por ejemplo, pulsa un [botón personalizado](paywall-buttons).                                                                                                                                                                                      |
| **onUrlPress**                     | Se invoca cuando el usuario pulsa una URL en tu paywall.                                                                                                                                                                                                                                                        |
| **onAndroidSystemBack**            | Solo presentación modal: se invoca cuando el usuario pulsa el botón **Back** del sistema Android.                                                                                                                                                                                                               |
| **onCloseButtonPress**             | Se invoca cuando el botón de cierre es visible y el usuario lo pulsa. Se recomienda cerrar la pantalla del paywall en este manejador.                                                                                                                                                                           |
| **onPurchaseCompleted**            | Se invoca cuando la compra finaliza, ya sea con éxito, cancelada por el usuario o pendiente de aprobación. En caso de compra exitosa, proporciona un `AdaptyProfile` actualizado. Las cancelaciones del usuario y los pagos pendientes (por ejemplo, que requieren aprobación parental) disparan este evento, no `onPurchaseFailed`. |
| **onPurchaseStarted**              | Se invoca cuando el usuario pulsa el botón de acción "Comprar" para iniciar el proceso de compra.                                                                                                                                                                                                               |
| **onPurchaseFailed**               | Se invoca cuando una compra falla debido a errores (por ejemplo, restricciones de pago, productos no válidos, fallos de red, errores de verificación de transacciones). No se invoca para cancelaciones del usuario ni pagos pendientes, que disparan `onPurchaseCompleted` en su lugar.                        |
| **onRestoreStarted**               | Se invoca cuando el usuario inicia un proceso de restauración de compras.                                                                                                                                                                                                                                       |
| **onRestoreCompleted**             | Se invoca cuando la restauración de compras se realiza correctamente y proporciona un `AdaptyProfile` actualizado. Se recomienda cerrar la pantalla si el usuario tiene el `accessLevel` requerido. Consulta el tema [Estado de la suscripción](react-native-listen-subscription-changes) para saber cómo comprobarlo. |
| **onRestoreFailed**                | Se invoca cuando el proceso de restauración falla y proporciona un `AdaptyError`.                                                                                                                                                                                                                               |
| **onProductSelected**              | Se invoca cuando se selecciona cualquier producto en la vista del paywall, lo que te permite monitorizar lo que el usuario elige antes de la compra.                                                                                                                                                             |
| **onRenderingFailed**              | Se invoca cuando ocurre un error durante el renderizado de la vista y proporciona un `AdaptyError`. Estos errores no deberían producirse; si te encuentras con uno, comunícanoslo.                                                                                                                              |
| **onLoadingProductsFailed**        | Se invoca cuando falla la carga de productos y proporciona un `AdaptyError`. Si no has configurado `prefetchProducts: true` al crear la vista, AdaptyUI recuperará los objetos necesarios del servidor por sí mismo.                                                                                            |
| **onPaywallShown**                 | Se invoca cuando el paywall se muestra al usuario. En iOS, también se invoca cuando el usuario pulsa el [botón de web paywall](web-paywall#step-2a-add-a-web-purchase-button) dentro de un paywall y se abre un web paywall en un navegador in-app.                                                              |
| **onPaywallClosed**                | Solo presentación modal: se invoca cuando el usuario cierra el paywall. En iOS, también se invoca cuando un [web paywall](web-paywall#step-2a-add-a-web-purchase-button) abierto desde un paywall en un navegador in-app desaparece de la pantalla.                                                              |
| **onWebPaymentNavigationFinished** | Se invoca tras intentar abrir un [web paywall](web-paywall) para realizar una compra, tanto si tuvo éxito como si no.                                                                                                                                                                                           |

---


# File: react-native-use-fallback-paywalls
---

---
title: "React Native - Usar paywalls de respaldo"
description: "Gestiona los casos en que los usuarios están sin conexión o los servidores de Adapty no están disponibles."
---

:::warning
Los paywalls de respaldo son compatibles con el SDK de React Native v2.11 y versiones posteriores.
:::

Para mantener una experiencia de usuario fluida, es importante configurar [respaldos](/fallback-paywalls) para tus [paywalls](paywalls) y [onboardings](onboardings). Esta precaución amplía las capacidades de la aplicación en caso de pérdida parcial o total de la conexión a internet.

* **Si la aplicación no puede acceder a los servidores de Adapty:**

    Podrá mostrar un paywall de respaldo y acceder a la configuración local del onboarding.

* **Si la aplicación no puede acceder a internet:**

    Podrá mostrar un paywall de respaldo. Los onboardings incluyen contenido remoto y requieren conexión a internet para funcionar.

:::important
Antes de seguir los pasos de esta guía, [descarga](/local-fallback-paywalls) los archivos de configuración de respaldo desde Adapty.
:::

## Configuración \{#configuration\}

### Android \{#android\}

1. Añade el archivo de configuración de respaldo a tu aplicación. Elige uno de los siguientes directorios:
   * **android/app/src/main/assets/**
   * **android/app/src/main/res/raw/**

      Nota: La carpeta `res/raw` tiene una convención especial de nomenclatura de archivos (deben comenzar con una letra, sin mayúsculas, sin caracteres especiales excepto el guion bajo y sin espacios en los nombres).

2. Actualiza la propiedad `android` de la constante `FileLocation`:
   * Si el archivo está en el directorio `assets`, pasa la ruta del archivo relativa a ese directorio.
   * Si el archivo está en el directorio `res/raw`, pasa el nombre del archivo sin la extensión.

### iOS \{#ios\}

1. Añade el archivo JSON de respaldo al bundle de tu proyecto: abre el menú **File** en XCode y selecciona la opción **Add Files to "YourProjectName"**.
2. Pasa el nombre de tu archivo de configuración a la propiedad `ios` de la constante `FileLocation`.

## Ejemplo \{#example\}

<Tabs groupId="current-os" queryString> <TabItem value="current" label="Current (v3.8+)" default> 
```typescript showLineNumbers
//after v3.8
const fileLocation = {
  ios: {
    fileName: 'ios_fallback.json'
  },
  android: {
    //if the file is located in 'android/app/src/main/assets/'
    relativeAssetPath: 'android_fallback.json'
  }
}
await adapty.setFallback(fileLocation);
```
</TabItem> 
<TabItem value="old" label="Legacy (before v3.8)" default> 
```typescript showLineNumbers
//Legacy (before v3.8)
const paywallsLocation = {
  ios: {
    fileName: 'ios_fallback.json'
  },
  android: {
    //if the file is located in 'android/app/src/main/assets/'
    relativeAssetPath: 'android_fallback.json'
  }
}
await adapty.setFallbackPaywalls(paywallsLocation);
```
</TabItem> 
</Tabs>

Parámetros:

| Parámetro            | Descripción                                              |
| :------------------- | :------------------------------------------------------- |
| **fileLocation** | Objeto que representa la ubicación del archivo de configuración de respaldo. |

---


# File: react-native-web-paywall
---

---
title: "Implementar paywalls web"
description: "Aprende cómo implementar paywalls web en tu app de React Native con el SDK de Adapty."
---

:::important
Antes de empezar, asegúrate de haber [configurado tu paywall web en el dashboard](web-paywall) e instalado la versión 3.6.1 o posterior del SDK de Adapty.
:::

## Abrir paywalls web \{#open-web-paywalls\}

Si trabajas con un paywall que desarrollaste tú mismo, necesitas gestionar los paywalls web mediante el método del SDK. El método `.openWebPaywall`:
1. Genera una URL única que permite a Adapty vincular un paywall específico mostrado a un usuario concreto con la página web a la que se le redirige.
2. Detecta cuando tus usuarios vuelven a la app y luego llama a `.getProfile` a intervalos cortos para determinar si los derechos de acceso del perfil se han actualizado.

De esta forma, si el pago se ha realizado con éxito y los derechos de acceso se han actualizado, la suscripción se activa en la app casi de inmediato.

```typescript showLineNumbers title="React Native (TSX)"

try {
    await adapty.openWebPaywall(product);
} catch (error) {
    console.warn('Failed to open web paywall:', error);
}
```

:::note
Existen dos versiones del método `openWebPaywall`:
1. `openWebPaywall(product)` que genera URLs por paywall y también añade los datos del producto a las URLs.
2. `openWebPaywall(paywall)` que genera URLs por paywall sin añadir los datos del producto a las URLs. Úsalo cuando tus productos en el paywall de Adapty sean distintos a los del paywall web.
:::

#### Gestionar errores \{#handle-errors\}

| Error                                   | Descripción                                                  | Acción recomendada                                                                   |
|-----------------------------------------|--------------------------------------------------------------|--------------------------------------------------------------------------------------|
| AdaptyError.paywallWithoutPurchaseUrl   | El paywall no tiene configurada una URL de compra web        | Comprueba si el paywall está correctamente configurado en el Adapty Dashboard        |
| AdaptyError.productWithoutPurchaseUrl   | El producto no tiene una URL de compra web                   | Verifica la configuración del producto en el Adapty Dashboard                        |
| AdaptyError.failedOpeningWebPaywallUrl  | No se pudo abrir la URL en el navegador                      | Comprueba la configuración del dispositivo o proporciona un método de pago alternativo |
| AdaptyError.failedDecodingWebPaywallUrl | No se pudieron codificar correctamente los parámetros en la URL | Verifica que los parámetros de la URL sean válidos y estén correctamente formateados |

## Abrir paywalls web en un navegador integrado \{#open-web-paywalls-in-an-in-app-browser\}

:::important
La apertura de paywalls web en un navegador integrado está disponible a partir del SDK de Adapty v. 3.15.
:::

Por defecto, los paywalls web se abren en el navegador externo.

Para ofrecer una experiencia de usuario fluida, puedes abrir los paywalls web en un navegador integrado. Esto muestra la página de compra web dentro de tu aplicación, permitiendo a los usuarios completar las transacciones sin cambiar de app.

Para activarlo, pasa `WebPresentation.BrowserInApp` como segundo argumento a `openWebPaywall`:

```typescript showLineNumbers title="React Native (TSX)"

try {
    await adapty.openWebPaywall(
        product,
        WebPresentation.BrowserInApp, // default – WebPresentation.BrowserOutApp
    );
} catch (error) {
    console.warn('Failed to open web paywall:', error);
}

```

---


# File: react-native-troubleshoot-paywall-builder
---

---
title: "Solucionar problemas del Paywall Builder en el SDK de React Native"
description: "Solucionar problemas del Paywall Builder en el SDK de React Native"
---

Esta guía te ayuda a resolver los problemas más comunes al usar paywalls diseñados con el Adapty Paywall Builder en el SDK de React Native.

## Falla al obtener la configuración del paywall \{#getting-a-paywall-configuration-fails\}

**Problema**: El método `getPaywallConfiguration` no consigue recuperar la configuración del paywall.

**Causa**: El paywall no está habilitado para mostrarse en el dispositivo en el Paywall Builder.

**Solución**: Activa el interruptor **Show on device** en el Paywall Builder.

  <img src="/assets/shared/img/show-on-device.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

## El número de vistas del paywall es demasiado alto \{#the-paywall-view-number-is-too-big\}

**Problema**: El recuento de vistas del paywall muestra el doble del número esperado.

**Causa**: Es posible que estés llamando a `logShowPaywall` en tu código, lo que duplica el recuento de vistas si usas el Paywall Builder. Para los paywalls diseñados con el Paywall Builder, las analíticas se registran automáticamente, por lo que no es necesario usar este método.

**Solución**: Asegúrate de no llamar a `logShowPaywall` en tu código si estás usando el Paywall Builder.

## Otros problemas \{#other-issues\}

**Problema**: Estás experimentando otros problemas relacionados con el Paywall Builder que no se tratan arriba.

**Solución**: Migra el SDK a la última versión siguiendo las [guías de migración](react-native-sdk-migration-guides) si es necesario. Muchos problemas se resuelven en versiones más recientes del SDK.

---


# File: react-native-quickstart-manual
---

---
title: "Habilitar compras en tu paywall personalizado en el SDK de React Native"
description: "Integra el SDK de Adapty en tus paywalls personalizados de React Native para habilitar compras in-app."
---

Esta guía describe cómo integrar Adapty en tus paywalls personalizados. Mantén el control total sobre la implementación del paywall, mientras el SDK de Adapty obtiene los productos, gestiona las nuevas compras y restaura las anteriores.

:::important
**Esta guía es para desarrolladores que implementan paywalls personalizados.** Si quieres la forma más sencilla de habilitar compras, usa el [Paywall Builder de Adapty](react-native-quickstart-paywalls). Con el Paywall Builder, creas paywalls en un editor visual sin código, Adapty gestiona toda la lógica de compras automáticamente y puedes probar distintos diseños sin volver a publicar tu app.
:::

## Antes de empezar \{#before-you-start\}

### Configura los productos \{#set-up-products\}

Para habilitar las compras in-app, necesitas entender tres conceptos clave:

- [**Productos**](product) – cualquier cosa que los usuarios pueden comprar (suscripciones, consumibles, acceso de por vida)
- [**Paywalls**](paywalls) – configuraciones que definen qué productos ofrecer. En Adapty, los paywalls son la única forma de recuperar productos, pero este diseño te permite modificar productos, precios y ofertas sin tocar el código de tu app.
- [**Placements**](placements) – dónde y cuándo muestras los paywalls en tu app (como `main`, `onboarding`, `settings`). Configuras los paywalls para los placements en el dashboard y luego los solicitas por ID de placement en tu código. Esto facilita ejecutar pruebas A/B y mostrar diferentes paywalls a distintos usuarios.

Asegúrate de entender estos conceptos aunque trabajes con tu paywall personalizado. Básicamente, son tu manera de gestionar los productos que vendes en tu app.

Para implementar tu paywall personalizado, necesitarás crear un **paywall** y añadirlo a un **placement**. Esta configuración te permite recuperar tus productos. Para entender qué debes hacer en el dashboard, sigue la guía de inicio rápido [aquí](quickstart).

### Gestión de usuarios \{#manage-users\}

Puedes trabajar con o sin autenticación de backend de tu parte.

Sin embargo, el SDK de Adapty gestiona los usuarios anónimos e identificados de forma diferente. Lee la [guía de inicio rápido de identificación](react-native-quickstart-identify) para entender los detalles y asegurarte de que estás trabajando con los usuarios correctamente.

## Paso 1. Obtén los productos \{#step-1-get-products\}

Para recuperar los productos de tu paywall personalizado, necesitas:

1. Obtener el objeto `paywall` pasando el ID del [placement](placements) al método `getPaywall`.
2. Obtener el array de productos para ese paywall usando el método `getPaywallProducts`.

```typescript showLineNumbers

async function loadPaywall() {
  try {
    const paywall: AdaptyPaywall = await adapty.getPaywall('YOUR_PLACEMENT_ID');
    const products: AdaptyPaywallProduct[] = await adapty.getPaywallProducts(paywall);
    
    // Use products to build your custom paywall UI
  } catch (error) {
    // Handle the error
  }
}
```

## Paso 2. Acepta las compras \{#step-2-accept-purchases\}

Cuando un usuario pulsa en un producto de tu paywall personalizado, llama al método `makePurchase` con el producto seleccionado. Esto gestionará el flujo de compra y devolverá el perfil actualizado.

```typescript showLineNumbers

async function purchaseProduct(product: AdaptyPaywallProduct) {
  try {
    const purchaseResult: AdaptyPurchaseResult = await adapty.makePurchase(product);
    
    switch (purchaseResult.type) {
      case 'success':
        // Purchase successful, profile updated
        break;
      case 'user_cancelled':
        // User canceled the purchase
        break;
      case 'pending':
        // Purchase is pending (e.g., user will pay offline with cash)
        break;
    }
  } catch (error) {
    // Handle the error
  }
}
```

## Paso 3. Restaura las compras \{#step-3-restore-purchases\}

Los stores de aplicaciones exigen que todas las apps con suscripciones ofrezcan una forma de que los usuarios puedan restaurar sus compras.

Llama al método `restorePurchases` cuando el usuario pulse el botón de restaurar. Esto sincronizará su historial de compras con Adapty y devolverá el perfil actualizado.

```typescript showLineNumbers

async function restorePurchases() {
  try {
    const profile: AdaptyProfile = await adapty.restorePurchases();
    // Restore successful, profile updated
  } catch (error) {
    // Handle the error
  }
}
```

## Próximos pasos \{#next-steps\}

---
no_index: true
---
import Callout from '../../../components/Callout.astro';

<Callout type="tip">
¿Tienes preguntas o estás teniendo algún problema? Consulta nuestro [foro de soporte](https://adapty.featurebase.app/) donde encontrarás respuestas a preguntas frecuentes o podrás plantear las tuyas. ¡Nuestro equipo y la comunidad están aquí para ayudarte!
</Callout>

Tu paywall está listo para mostrarse en la app. Prueba tus compras en el [sandbox del App Store](test-purchases-in-sandbox) o en [Google Play Store](testing-on-android) para asegurarte de que puedes completar una compra de prueba desde el paywall. Para ver cómo funciona esto en una implementación lista para producción, consulta el archivo [CustomPurchaseScreen.tsx](https://github.com/adaptyteam/AdaptySDK-React-Native/blob/master/examples/ExpoGoWebMock/src/CustomPurchaseScreen.tsx) en nuestra app de ejemplo, que muestra el manejo de compras con gestión de errores, estados de carga y gestión del estado de la UI.

A continuación, [comprueba si los usuarios han completado su compra](react-native-check-subscription-status) para determinar si mostrar el paywall o conceder acceso a las funciones de pago.

---


# File: fetch-paywalls-and-products-react-native
---

---
title: "Obtener paywalls y productos para paywalls con Remote Config en React Native SDK"
description: "Obtén paywalls y productos en el SDK de React Native de Adapty para mejorar la monetización de usuarios."
---

Antes de mostrar paywalls con Remote Config y paywalls personalizados, necesitas obtener la información sobre ellos. Ten en cuenta que este tema se refiere a paywalls con Remote Config y paywalls personalizados. Para obtener orientación sobre cómo obtener paywalls creados con Paywall Builder, consulta [Obtener paywalls de Paywall Builder y su configuración](react-native-get-pb-paywalls).

:::tip

¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app móvil? Echa un vistazo a nuestras [apps de ejemplo](sample-apps), que muestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funcionalidades básicas.

:::

<details>
   <summary>Antes de empezar a obtener paywalls y productos en tu app (haz clic para expandir)</summary>

   1. [Crea tus productos](create-product) en el Adapty Dashboard.

2. [Crea un paywall e incorpora los productos en él](create-paywall) en el Adapty Dashboard.

3. [Crea placements e incorpora tu paywall en el placement](create-placement) en el Adapty Dashboard.

4. [Instala el SDK de Adapty](sdk-installation-reactnative) en tu app.
</details>

## Obtener información del paywall \{#fetch-paywall-information\}

En Adapty, un [producto](product) es una combinación de productos tanto de App Store como de Google Play. Estos productos multiplataforma se integran en paywalls, lo que te permite mostrarlos en placements específicos de tu app.

Para mostrar los productos, necesitas obtener un [Paywall](paywalls) de uno de tus [placements](placements) con el método `getPaywall`.

:::important
**No pongas los IDs de productos en el código.** El único ID que debes incluir en el código es el ID del placement. Los paywalls se configuran de forma remota, por lo que el número de productos y las ofertas disponibles pueden cambiar en cualquier momento. Tu app debe gestionar estos cambios de forma dinámica: si hoy un paywall devuelve dos productos y mañana tres, muéstralos todos sin necesidad de cambios en el código.
:::

```typescript showLineNumbers
try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywall(id, locale);
    // el paywall solicitado
} catch (error) {
    // gestionar el error
}
```

| Parámetro         | Presencia | Descripción |
|-------------------|--------|-----------|
| **placementId**   | obligatorio | El identificador del [Placement](placements). Es el valor que especificaste al crear un placement en tu Adapty Dashboard. |
| **locale**        | <p>opcional</p><p>por defecto: `en`</p> | <p>El identificador de la [localización del paywall](add-remote-config-locale). Se espera que este parámetro sea un código de idioma compuesto por una o más subetiquetas separadas por el carácter menos (**-**). La primera subetiqueta es para el idioma y la segunda para la región.</p><p></p><p>Ejemplo: `en` significa inglés, `pt-br` representa el portugués de Brasil.</p><p></p><p>Consulta [Localizaciones y códigos de idioma](react-native-localizations-and-locale-codes) para más información sobre los códigos de idioma y cómo recomendamos usarlos.</p> |
| **fetchPolicy**   | por defecto: `.reloadRevalidatingCacheData` | <p>Por defecto, el SDK intentará cargar los datos desde el servidor y devolverá los datos en caché en caso de error. Recomendamos esta opción porque garantiza que tus usuarios siempre reciban los datos más actualizados.</p><p></p><p>Sin embargo, si crees que tus usuarios tienen una conexión a internet inestable, considera usar `.returnCacheDataElseLoad` para devolver los datos en caché si existen. En este caso, puede que los usuarios no obtengan los datos más recientes, pero experimentarán tiempos de carga más rápidos, sin importar la calidad de su conexión. La caché se actualiza regularmente, por lo que es seguro usarla durante la sesión para evitar solicitudes de red.</p><p></p><p>Ten en cuenta que la caché permanece intacta al reiniciar la app y solo se borra al desinstalarla o mediante una limpieza manual.</p><p></p><p>El SDK de Adapty almacena los paywalls en dos capas: la caché actualizada regularmente descrita anteriormente y los [paywalls de respaldo](react-native-use-fallback-paywalls). También usamos CDN para obtener los paywalls más rápido y un servidor de respaldo independiente en caso de que el CDN sea inaccesible. Este sistema está diseñado para garantizar que siempre obtengas la versión más reciente de tus paywalls, asegurando la fiabilidad incluso cuando la conexión a internet es escasa.</p> |
| **loadTimeoutMs** | por defecto: 5 seg | <p>Este valor limita el tiempo de espera para este método. Si se alcanza el tiempo límite, se devolverán los datos en caché o el respaldo local.</p><p></p><p>Ten en cuenta que en casos excepcionales este método puede superar ligeramente el tiempo especificado en `loadTimeout`, ya que la operación puede consistir en diferentes solicitudes internamente.</p> |

¡No pongas los IDs de productos en el código! Dado que los paywalls se configuran de forma remota, los productos disponibles, el número de productos y las ofertas especiales (como períodos de prueba gratuitos) pueden cambiar con el tiempo. Asegúrate de que tu código gestione estos escenarios.  
Por ejemplo, si inicialmente obtienes 2 productos, tu app debería mostrar esos 2 productos. Sin embargo, si más adelante obtienes 3 productos, tu app debería mostrar los 3 sin necesidad de cambios en el código. Lo único que debes incluir en el código es el ID del placement.

Parámetros de respuesta:

| Parámetro | Descripción                                                                                                                                                  |
| :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Paywall   | Un objeto [`AdaptyPaywall`](https://react-native.adapty.io/interfaces/adaptypaywall) con: una lista de IDs de productos, el identificador del paywall, Remote Config y varias otras propiedades. |

## Obtener productos \{#fetch-products\}

Una vez que tienes el paywall, puedes consultar el array de productos que le corresponde:

```typescript showLineNumbers
try {
    // ...paywall
    const products = await adapty.getPaywallProducts(paywall);
  // la lista de productos solicitada
} catch (error) {
    // gestionar el error
}
```

Parámetros de respuesta:

| Parámetro | Descripción                                                                                                                                                                                |
| :-------- |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Products  | Lista de objetos [`AdaptyPaywallProduct`](https://react-native.adapty.io/interfaces/adaptypaywallproduct) con: identificador del producto, nombre del producto, precio, moneda, duración de la suscripción y varias otras propiedades.                                   |

Al implementar tu propio diseño de paywall, probablemente necesitarás acceder a estas propiedades del objeto [`AdaptyPaywallProduct`](https://react-native.adapty.io/interfaces/adaptypaywallproduct). A continuación se muestran las propiedades más utilizadas, pero consulta el documento enlazado para obtener detalles completos sobre todas las propiedades disponibles.

| Propiedad               | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **Título**              | Para mostrar el título del producto, usa `product.localizedTitle`. Ten en cuenta que la localización se basa en el país de la store seleccionado por el usuario, no en el idioma del dispositivo.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Precio**              | Para mostrar una versión localizada del precio, usa `product.price?.localizedString`. Esta localización se basa en la configuración regional del dispositivo. También puedes acceder al precio como número usando `product.price?.amount`. El valor se proporcionará en la moneda local. Para obtener el símbolo de moneda asociado, usa `product.price?.currencySymbol`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Período de suscripción** | Para mostrar el período (p. ej. semana, mes, año, etc.), usa `product.subscription?.localizedSubscriptionPeriod`. Esta localización se basa en la configuración regional del dispositivo. Para obtener el período de suscripción de forma programática, usa `product.subscription?.subscriptionPeriod`. Desde ahí puedes acceder a la propiedad `unit` para obtener la duración (es decir, 'day', 'week', 'month', 'year' o 'unknown'). El valor `numberOfUnits` te dará el número de unidades del período. Por ejemplo, para una suscripción trimestral, verías `'month'` en la propiedad unit y `3` en la propiedad numberOfUnits.                                                                                                                                                                                                                                                                                                       |
| **Oferta introductoria** | Para mostrar una insignia u otro indicador de que una suscripción contiene una oferta introductoria, consulta la propiedad `product.subscription?.offer?.phases`. Esta es una lista que puede contener hasta dos fases de descuento: la fase de prueba gratuita y la fase de precio introductorio. Dentro de cada objeto de fase se encuentran las siguientes propiedades útiles:<br/>• `paymentMode`: una cadena con los valores `'free_trial'`, `'pay_as_you_go'`, `'pay_up_front'` y `'unknown'`. Los períodos de prueba gratuita serán del tipo `'free_trial'`.<br/>• `price`: el precio con descuento como número. Para períodos de prueba gratuita, busca `0` aquí.<br/>• `localizedNumberOfPeriods`: una cadena localizada según la configuración regional del dispositivo que describe la duración de la oferta. Por ejemplo, una oferta de prueba de tres días muestra `'3 days'` en este campo.<br/>• `subscriptionPeriod`: alternativamente, puedes obtener los detalles individuales del período de la oferta con esta propiedad. Funciona de la misma manera para las ofertas que la sección anterior.<br/>• `localizedSubscriptionPeriod`: un período de suscripción formateado del descuento para la configuración regional del usuario. |

## Acelerar la obtención del paywall con el paywall de audiencia predeterminada \{#speed-up-paywall-fetching-with-default-audience-paywall\}

Normalmente, los paywalls se obtienen casi al instante, por lo que no necesitas preocuparte por acelerar este proceso. Sin embargo, en casos donde tienes numerosas audiencias y paywalls, y tus usuarios tienen una conexión a internet débil, obtener un paywall puede tardar más de lo deseable. En estas situaciones, puede que quieras mostrar un paywall predeterminado para garantizar una experiencia de usuario fluida en lugar de no mostrar ningún paywall.

Para solucionar esto, puedes usar el método `getPaywallForDefaultAudience`, que obtiene el paywall del placement especificado para la audiencia **All Users**. Sin embargo, es fundamental entender que el enfoque recomendado es obtener el paywall con el método `getPaywall`, como se detalla en la sección [Obtener información del paywall](fetch-paywalls-and-products-react-native#fetch-paywall-information) anterior.

:::warning
Por qué recomendamos usar `getPaywall`

El método `getPaywallForDefaultAudience` tiene algunos inconvenientes importantes:

- **Posibles problemas de compatibilidad con versiones anteriores**: Si necesitas mostrar diferentes paywalls para distintas versiones de la app (la actual y las futuras), puedes encontrar dificultades. Tendrás que diseñar paywalls que sean compatibles con la versión actual (heredada) o aceptar que los usuarios con la versión actual (heredada) puedan tener problemas con paywalls que no se renderizan.
- **Pérdida de segmentación**: Todos los usuarios verán el mismo paywall diseñado para la audiencia **All Users**, lo que significa que pierdes la segmentación personalizada (incluyendo por países, atribución de marketing o tus propios atributos personalizados).

Si estás dispuesto a aceptar estos inconvenientes para beneficiarte de una obtención más rápida de los paywalls, usa el método `getPaywallForDefaultAudience` como se indica a continuación. De lo contrario, sigue usando `getPaywall` tal como se describe [arriba](fetch-paywalls-and-products-react-native#fetch-paywall-information).
:::

```typescript showLineNumbers
try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
  // el paywall solicitado
} catch (error) {
    // gestionar el error
}
```

:::note
El método `getPaywallForDefaultAudience` está disponible a partir de la versión 2.11.2 del SDK de React Native.
:::

| Parámetro | Presencia | Descripción |
|---------|--------|-----------|
| **placementId** | obligatorio | El identificador del [Placement](placements). Es el valor que especificaste al crear un placement en tu Adapty Dashboard. |
| **locale** | <p>opcional</p><p>por defecto: `en`</p> | <p>El identificador de la [localización del paywall](add-remote-config-locale). Se espera que este parámetro sea un código de idioma compuesto por una o más subetiquetas separadas por el carácter menos (**-**). La primera subetiqueta es para el idioma y la segunda para la región.</p><p></p><p>Ejemplo: `en` significa inglés, `pt-br` representa el portugués de Brasil.</p><p></p><p>Consulta [Localizaciones y códigos de idioma](react-native-localizations-and-locale-codes) para más información sobre los códigos de idioma y cómo recomendamos usarlos.</p> |
| **fetchPolicy** | por defecto: `.reloadRevalidatingCacheData` | <p>Por defecto, el SDK intentará cargar los datos desde el servidor y devolverá los datos en caché en caso de error. Recomendamos esta opción porque garantiza que tus usuarios siempre reciban los datos más actualizados.</p><p></p><p>Sin embargo, si crees que tus usuarios tienen una conexión a internet inestable, considera usar `.returnCacheDataElseLoad` para devolver los datos en caché si existen. En este caso, puede que los usuarios no obtengan los datos más recientes, pero experimentarán tiempos de carga más rápidos, sin importar la calidad de su conexión. La caché se actualiza regularmente, por lo que es seguro usarla durante la sesión para evitar solicitudes de red.</p><p></p><p>Ten en cuenta que la caché permanece intacta al reiniciar la app y solo se borra al desinstalarla o mediante una limpieza manual.</p> |

---


# File: present-remote-config-paywalls-react-native
---

---
title: "Renderizar paywall con Remote Config en React Native SDK"
description: "Descubre cómo presentar paywalls con Remote Config en Adapty React Native SDK para personalizar la experiencia del usuario."
---

Si has personalizado un paywall usando Remote Config, tendrás que implementar el renderizado en el código de tu app para mostrárselo a los usuarios. Como Remote Config ofrece flexibilidad adaptada a tus necesidades, tú decides qué incluir y cómo se ve tu paywall. Proporcionamos un método para obtener la configuración remota, dándote autonomía para mostrar tu paywall personalizado configurado mediante Remote Config.

## Obtener el Remote Config del paywall y mostrarlo \{#get-paywall-remote-config-and-present-it\}

Para obtener el Remote Config de un paywall, accede a la propiedad `remoteConfig` y extrae los valores que necesites.

```typescript showLineNumbers
try {
  const paywall = await adapty.getPaywall({ placementId: "YOUR_PLACEMENT_ID" });
  const headerText = paywall.remoteConfig?.data?.["header_text"];
} catch (error) {
  // handle the error
}
```

En este punto, una vez que hayas recibido todos los valores necesarios, es momento de renderizarlos y ensamblarlos en una página visualmente atractiva. Asegúrate de que el diseño se adapte a distintas pantallas y orientaciones de móvil, ofreciendo una experiencia fluida y cómoda en diferentes dispositivos.

:::warning
Asegúrate de [registrar el evento de visualización del paywall](present-remote-config-paywalls-react-native#track-paywall-view-events) como se describe a continuación, para que Adapty Analytics pueda recopilar información para los embudos y las pruebas A/B.
:::

Una vez que hayas terminado de mostrar el paywall, continúa configurando el flujo de compra. Cuando el usuario realice una compra, simplemente llama a `.makePurchase()` con el producto de tu paywall. Para más detalles sobre el método `.makePurchase()`, consulta [Realizar compras](react-native-making-purchases).

Recomendamos [crear un paywall de respaldo llamado fallback paywall](react-native-use-fallback-paywalls). Este respaldo se mostrará al usuario cuando no haya conexión a internet ni caché disponible, garantizando una experiencia fluida incluso en esas situaciones.

## Registrar eventos de visualización del paywall \{#track-paywall-view-events\}

Adapty te ayuda a medir el rendimiento de tus paywalls. Aunque los datos de compras se recopilan automáticamente, registrar las visualizaciones del paywall requiere tu intervención, porque solo tú sabes cuándo un usuario ve un paywall.

Para registrar un evento de visualización del paywall, simplemente llama a `.logShowPaywall(paywall)`, y quedará reflejado en las métricas de tu paywall en embudos y pruebas A/B.

:::important
No es necesario llamar a `.logShowPaywall(paywall)` si estás mostrando paywalls creados con el [Paywall Builder](adapty-paywall-builder).
:::

```typescript showLineNumbers
await adapty.logShowPaywall(paywall);
```

Parámetros de la solicitud:

| Parámetro   | Presencia | Descripción                                                                                 |
| :---------- | :------- |:--------------------------------------------------------------------------------------------|
| **paywall** | obligatorio | Un objeto [`AdaptyPaywall`](https://react-native.adapty.io/interfaces/adaptypaywall).       |

---


# File: react-native-making-purchases
---

---
title: "Realizar compras in-app en React Native SDK"
description: "Guía sobre cómo gestionar compras in-app y suscripciones usando Adapty."
---

Mostrar paywalls en tu app móvil es un paso esencial para ofrecer a los usuarios acceso a contenido o servicios premium. Sin embargo, con solo mostrar esos paywalls es suficiente para gestionar las compras únicamente si usas el [Paywall Builder](adapty-paywall-builder) para personalizar tus paywalls.

Si no usas el Paywall Builder, debes utilizar un método independiente llamado `.makePurchase()` para completar una compra y desbloquear el contenido deseado. Este método es la puerta de entrada para que los usuarios interactúen con los paywalls y realicen sus transacciones.

Si tu paywall tiene una oferta promocional activa para el producto que un usuario intenta comprar, Adapty la aplicará automáticamente en el momento de la compra.

:::warning
Ten en cuenta que la oferta introductoria solo se aplicará automáticamente si usas los paywalls configurados con el Paywall Builder.

En otros casos, deberás [verificar la elegibilidad del usuario para una oferta introductoria en iOS](fetch-paywalls-and-products#check-intro-offer-eligibility-on-ios). Saltarte este paso puede hacer que tu app sea rechazada durante la revisión. Además, podría suponer cobrar el precio completo a usuarios que tienen derecho a una oferta introductoria.
:::

Asegúrate de haber [realizado la configuración inicial](quickstart) sin saltarte ningún paso. Sin ella, no podemos validar las compras.

## Realizar una compra \{#make-purchase\}

:::note
**¿Usas el [Paywall Builder](adapty-paywall-builder)?** Las compras se procesan automáticamente: puedes saltarte este paso.

**¿Buscas una guía paso a paso?** Consulta la [guía de inicio rápido](react-native-implement-paywalls-manually) para instrucciones de implementación completas con todo el contexto.
:::

```typescript showLineNumbers
try {
    const purchaseResult = await adapty.makePurchase(product);
    switch (purchaseResult.type) {
      case 'success':
        const isSubscribed = purchaseResult.profile?.accessLevels['YOUR_ACCESS_LEVEL']?.isActive;

        if (isSubscribed) {
          // Grant access to the paid features
        }
        break;
      case 'user_cancelled':
        // Handle the case where the user canceled the purchase
        break;
      case 'pending':
        // Handle deferred purchases (e.g., the user will pay offline with cash)
        break;
    }
} catch (error) {
    // Handle the error
}
```

Parámetros de la solicitud:

| Parámetro   | Presencia | Descripción                                                                                                                    |
| :---------- | :-------- |:-------------------------------------------------------------------------------------------------------------------------------|
| **Product** | requerido | Un objeto [`AdaptyPaywallProduct`](https://react-native.adapty.io/interfaces/adaptypaywallproduct) obtenido del paywall. |

Parámetros de la respuesta:

| Parámetro | Descripción                                                                                                                                                                                                                                                                                                                                                            |
|---------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **Profile** | <p>Si la solicitud fue exitosa, la respuesta contiene este objeto. Un objeto [AdaptyProfile](https://react-native.adapty.io/interfaces/adaptyprofile) proporciona información completa sobre los niveles de acceso, suscripciones y compras únicas de un usuario dentro de la app.</p><p>Comprueba el estado del nivel de acceso para verificar si el usuario tiene el acceso necesario a la app.</p> |

:::warning
**Nota:** si todavía usas la versión de StoreKit de Apple inferior a v2.0 y la versión del SDK de Adapty inferior a v.2.9.0, debes proporcionar el [secreto compartido de App Store de Apple](app-store-connection-configuration#step-5-enter-app-store-shared-secret) en su lugar. Apple ha declarado este método como obsoleto.
:::

## Cambiar la suscripción al realizar una compra \{#change-subscription-when-making-a-purchase\}

Cuando un usuario elige una nueva suscripción en lugar de renovar la actual, el funcionamiento depende del store:

- En App Store, la suscripción se actualiza automáticamente dentro del grupo de suscripciones. Si un usuario compra una suscripción de un grupo mientras ya tiene una de otro, ambas suscripciones estarán activas al mismo tiempo.
- En Google Play, la suscripción no se actualiza automáticamente. Tendrás que gestionar el cambio en el código de tu app móvil como se describe a continuación.

Para reemplazar la suscripción por otra en Android, llama al método `.makePurchase()` con el parámetro adicional:

```typescript showLineNumbers
try {
    const purchaseResult = await adapty.makePurchase(product, params);
    switch (purchaseResult.type) {
      case 'success':
        const isSubscribed = purchaseResult.profile?.accessLevels['YOUR_ACCESS_LEVEL']?.isActive;

        if (isSubscribed) {
          // Grant access to the paid features
        }
        break;
      case 'user_cancelled':
        // Handle the case where the user canceled the purchase
        break;
      case 'pending':
        // Handle deferred purchases (e.g., the user will pay offline with cash)
        break;
    }
} catch (error) {
    // Handle the error
}
```
Parámetro adicional de la solicitud:

| Parámetro  | Presencia | Descripción                                                  |
| :--------- | :-------- | :----------------------------------------------------------- |
| **params** | requerido | un objeto de tipo [`MakePurchaseParamsInput`](https://react-native.adapty.io/types/makepurchaseparamsinput). |

:::info
**Versión 3.8.2+**: La estructura `MakePurchaseParamsInput` ha sido actualizada. `oldSubVendorProductId` y `prorationMode` ahora están anidados bajo `subscriptionUpdateParams`, e `isOfferPersonalized` se ha movido al nivel superior.

Ejemplo:
```javascript
makePurchase(product, {
    android: {
        subscriptionUpdateParams: {
            oldSubVendorProductId: 'old_product_id',
            prorationMode: 'charge_prorated_price'
        },
        isOfferPersonalized: true
    }
});
```
:::

Puedes leer más sobre suscripciones y modos de reemplazo en la documentación de Google para desarrolladores:

- [Acerca de los modos de reemplazo](https://developer.android.com/google/play/billing/subscriptions#replacement-modes)
- [Recomendaciones de Google para los modos de reemplazo](https://developer.android.com/google/play/billing/subscriptions#replacement-recommendations)
- Modo de reemplazo [`CHARGE_PRORATED_PRICE`](https://developer.android.com/reference/com/android/billingclient/api/BillingFlowParams.SubscriptionUpdateParams.ReplacementMode#CHARGE_PRORATED_PRICE()). Nota: este método solo está disponible para actualizaciones de suscripción. No se admiten degradaciones.
- Modo de reemplazo [`DEFERRED`](https://developer.android.com/reference/com/android/billingclient/api/BillingFlowParams.SubscriptionUpdateParams.ReplacementMode#DEFERRED()). Nota: el cambio real de suscripción solo ocurrirá cuando finalice el período de facturación de la suscripción actual.

## Canjear códigos de oferta en iOS \{#redeem-offer-codes-in-ios\}

---
no_index: true
---
import Callout from '../../../components/Callout.astro';

<Details>
<summary>Sobre los códigos de oferta</summary>

Los códigos de oferta te permiten dar descuentos o períodos de prueba gratuitos a usuarios concretos. A diferencia de las ofertas habituales, que se aplican de forma automática, los códigos de oferta se distribuyen fuera de la app — por email, redes sociales o materiales impresos. Los usuarios los canjean introduciendo el código en el App Store, accediendo a una URL de canje o a través de un diálogo dentro de la app.

Para configurar códigos de oferta, abre una suscripción en App Store Connect y ve a su sección **Offer Codes**. Puedes crear [tres tipos](https://developer.apple.com/help/app-store-connect/manage-subscriptions/set-up-subscription-offer-codes) de códigos de oferta:

- **Free** — la suscripción es gratuita durante un período determinado y la siguiente renovación se cobra al precio completo.
- **Pay as you go** — el usuario paga un precio reducido en cada ciclo de facturación durante un período determinado y, después, la suscripción se renueva al precio completo.
- **Pay up front** — el usuario paga un precio único reducido por toda la duración de la oferta y, después, la suscripción se renueva al precio completo.

No es necesario añadir los códigos de oferta a Adapty. Apple etiqueta cada transacción durante el período de la oferta con la categoría del código de oferta. Esto incluye el canje inicial y todas las renovaciones con descuento posteriores. Adapty detecta la etiqueta y registra cada transacción con la categoría de oferta `offer_code`. Cuando termina el período de oferta y la suscripción se renueva al precio completo, la etiqueta deja de estar presente. Puedes filtrar los análisis por el tipo de oferta **Offer Code** en el [Adapty Dashboard](controls-filters-grouping-compare-proceeds).

#### Resolución de discrepancias en los ingresos \{#revenue-discrepancy-troubleshooting\}

Si observas que una transacción con código de oferta aparece en Adapty al precio completo del producto en lugar del precio reducido, verifica lo siguiente en App Store Connect:

- El código de oferta tiene los precios correctos configurados para todas las regiones donde los usuarios pueden canjearlo.
- El precio de la oferta está configurado para el país o región específica del usuario. Apple envía el precio regional en la transacción. Si no hay ningún precio regional configurado para la oferta, Apple puede enviar el precio completo del producto.

Puedes filtrar y verificar las transacciones con código de oferta en el [Adapty Dashboard](controls-filters-grouping-compare-proceeds) mediante los filtros de tipo de oferta **Offer Code** y **Offer Discount Type**.

#### Códigos promocionales heredados (obsoletos) \{#legacy-promo-codes-deprecated\}

<Callout type="warning">
Apple dejó obsoletos los códigos promocionales para compras in-app en marzo de 2026. Los códigos de oferta los sustituyen con más funcionalidades: elegibilidad configurable, fechas de expiración y hasta 1 millón de códigos por trimestre. Si antes usabas códigos promocionales para compras in-app, migra a los códigos de oferta en App Store Connect.
</Callout>

Los códigos promocionales heredados (limitados a 100 por app y versión) daban acceso gratuito a una suscripción. A diferencia de los códigos de oferta, Apple no incluía información de descuento en las transacciones con código promocional — enviaba el precio completo del producto en el recibo. Por ello, Adapty registraba estas transacciones al precio completo, lo que generaba discrepancias entre los análisis de Adapty y App Store Connect.

Si ves transacciones históricas al precio completo que deberían haber sido gratuitas, es probable que provengan de códigos promocionales heredados. Como estos códigos ya están obsoletos, migra a los códigos de oferta para un seguimiento preciso de los ingresos.

</Details>

Para mostrar la hoja de canje de códigos en tu app:

```typescript showLineNumbers
adapty.presentCodeRedemptionSheet();
```

:::danger
Según nuestras observaciones, la hoja de canje de códigos de oferta en algunas apps puede no funcionar de manera fiable. Recomendamos redirigir al usuario directamente a la App Store.

Para hacerlo, debes abrir la URL con el siguiente formato:
`https://apps.apple.com/redeem?ctx=offercodes&id={apple_app_id}&code={code}`
:::

## Gestionar planes prepagos (Android) \{#manage-prepaid-plans-android\}

Si los usuarios de tu app pueden comprar [planes prepagos](https://developer.android.com/google/play/billing/subscriptions#prepaid-plans) (por ejemplo, adquirir una suscripción no renovable por varios meses), puedes habilitar las [transacciones pendientes](https://developer.android.com/google/play/billing/subscriptions#pending) para planes prepagos.

```typescript showLineNumbers
adapty.activate("PUBLIC_SDK_KEY", {
    android: { pendingPrepaidPlansEnabled: true }
});
```

---


# File: react-native-restore-purchase
---

---
title: "Restaurar compras en una app móvil con React Native SDK"
description: "Aprende a restaurar compras en Adapty para garantizar una experiencia de usuario fluida."
---

La restauración de compras tanto en iOS como en Android es una funcionalidad que permite a los usuarios recuperar el acceso a contenido adquirido anteriormente, como suscripciones o compras in-app, sin que se les vuelva a cobrar. Esta funcionalidad es especialmente útil para usuarios que hayan desinstalado y reinstalado la app, o que hayan cambiado a un nuevo dispositivo y quieran acceder a su contenido previamente comprado sin pagar de nuevo.

:::note
En los paywalls creados con [Paywall Builder](adapty-paywall-builder), las compras se restauran automáticamente sin que tengas que añadir código adicional. Si es tu caso, puedes saltarte este paso.
:::

Para restaurar una compra cuando no utilizas el [Paywall Builder](adapty-paywall-builder) para personalizar el paywall, llama al método `.restorePurchases()`:

```typescript showLineNumbers
try {
    const profile = await adapty.restorePurchases();
    const isSubscribed = profile.accessLevels['YOUR_ACCESS_LEVEL']?.isActive;
  
    if (isSubscribed) {
        // restore access
    }
} catch (error) {
    // handle the error
}
```

Parámetros de respuesta:

| Parámetro | Descripción |
|---------|-----------|
| **Profile** | <p>Un objeto [`AdaptyProfile`](https://react-native.adapty.io/interfaces/adaptyprofile). Este modelo contiene información sobre niveles de acceso, suscripciones y compras únicas.</p><p>Comprueba el **estado del nivel de acceso** para determinar si el usuario tiene acceso a la app.</p> |

:::tip

¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app móvil? Echa un vistazo a nuestras [apps de ejemplo](sample-apps), que muestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funcionalidades básicas.

:::

---


# File: implement-observer-mode-react-native
---

---
title: "Implementar el modo Observer en React Native SDK"
description: "Implementa el modo Observer en Adapty para rastrear eventos de suscripción de usuarios en React Native SDK."
---

Si ya tienes tu propia infraestructura de compras y no estás listo para migrar completamente a Adapty, puedes explorar el [modo Observer](observer-vs-full-mode). En su forma básica, el modo Observer ofrece analíticas avanzadas e integración fluida con sistemas de atribución y analíticas.

Si esto cubre tus necesidades, solo tienes que:
1. Activarlo al configurar el SDK de Adapty estableciendo el parámetro `observerMode` en `true`. Sigue las instrucciones de configuración para [React Native](sdk-installation-reactnative).
2. [Reportar transacciones](report-transactions-observer-mode-react-native) desde tu infraestructura de compras existente a Adapty.

### Configuración del modo Observer \{#observer-mode-setup\}

Activa el modo Observer si gestionas las compras y el estado de la suscripción tú mismo y usas Adapty solo para enviar eventos de suscripción y analíticas.

:::important
Cuando se ejecuta en modo Observer, el SDK de Adapty no cerrará ninguna transacción, así que asegúrate de gestionarlas tú mismo.
:::

```typescript showLineNumbers title="App.tsx"

adapty.activate('YOUR_PUBLIC_SDK_KEY', {
  observerMode: true, // Enable observer mode
});
```

Parámetros:

| Parámetro                   | Descripción                                                  |
| --------------------------- | ------------------------------------------------------------ |
| observerMode                | Un valor booleano que controla el [modo Observer](observer-vs-full-mode). El valor por defecto es `false`. |

## Usar los paywalls de Adapty en el modo Observer \{#using-adapty-paywalls-in-observer-mode\}

Si también quieres usar los paywalls y las funciones de pruebas A/B de Adapty, puedes hacerlo, pero requiere una configuración adicional en el modo Observer. Esto es lo que necesitas hacer además de los pasos anteriores:

1. Muestra los paywalls de la forma habitual para los [paywalls de Remote Config](present-remote-config-paywalls-react-native).
3. [Asocia los paywalls](report-transactions-observer-mode-react-native) con las transacciones de compra.

---


# File: report-transactions-observer-mode-react-native
---

---
title: "Reportar transacciones en Observer Mode en el SDK de React Native"
description: "Reporta transacciones de compra en el Observer Mode de Adapty para obtener información sobre usuarios y seguimiento de ingresos en el SDK de React Native."
---

<Tabs groupId="sdk-version" queryString> 

<TabItem value="current" label="Adapty SDK v3.4+ (current)" default> 
En Observer Mode, el SDK de Adapty no puede rastrear por sí solo las compras realizadas a través de tu sistema de compras existente. Debes reportar las transacciones desde tu app store. Es fundamental configurar esto **antes** de publicar tu app para evitar errores en los análisis.

Usa `reportTransaction` para reportar explícitamente cada transacción y que Adapty pueda reconocerla.

:::warning

**¡No omitas el reporte de transacciones!**
Si no llamas a `reportTransaction`, Adapty no reconocerá la transacción, no aparecerá en los análisis y no se enviará a las integraciones.

:::

Si usas paywalls de Adapty, incluye el `variationId` al reportar una transacción. Esto vincula la compra al paywall que la originó, garantizando análisis precisos del paywall.

```typescript showLineNumbers
const variationId = paywall.variationId;

try {
    await adapty.reportTransaction(transactionId, variationId);
} catch (error) {
    // handle the `AdaptyError`
}
```

Parámetros:

| Parámetro     | Presencia | Descripción                                                  |
| ------------- | --------- | ------------------------------------------------------------ |
| transactionId | obligatorio | <ul><li> Para iOS: identificador de la transacción.</li><li> Para Android: identificador de cadena (`purchase.getOrderId`) de la compra, donde la compra es una instancia de la clase [Purchase](https://developer.android.com/reference/com/android/billingclient/api/Purchase) de la biblioteca de facturación.</li></ul> |
| variationId   | opcional | El identificador de cadena de la variante. Puedes obtenerlo usando la propiedad `variationId` del objeto [AdaptyPaywall](https://react-native.adapty.io/interfaces/adaptypaywall). |

</TabItem>
<TabItem value="old" label="Adapty SDK 3.3.x (legacy)" default> 

En Observer Mode, el SDK de Adapty no puede rastrear por sí solo las compras realizadas a través de tu sistema de compras existente. Debes reportar las transacciones desde tu app store o restaurarlas. Es fundamental configurar esto **antes** de publicar tu app para evitar errores en los análisis.

Usa `reportTransaction` en ambas plataformas para reportar explícitamente cada transacción, y usa `restorePurchases` en Android como paso adicional para asegurarte de que Adapty la reconozca.

:::warning

**¡No omitas el reporte de transacciones!**
Si no llamas a estos métodos, Adapty no reconocerá la transacción, no aparecerá en los análisis y no se enviará a las integraciones.

:::

Si usas paywalls de Adapty, incluye el `variationId` al reportar una transacción. Esto vincula la compra al paywall que la originó, garantizando análisis precisos del paywall.

```typescript showLineNumbers
if (Platform.OS === 'android') {
    try {
        await adapty.restorePurchases();
    } catch (error) {
        // handle the error
    }
}

...

const variationId = paywall.variationId;

try {
    await adapty.reportTransaction(transactionId, variationId);
} catch (error) {
    // handle the `AdaptyError`
}
```

Parámetros:

| Parámetro     | Presencia | Descripción                                                  |
| ------------- | --------- | ------------------------------------------------------------ |
| transactionId | obligatorio | <ul><li> Para iOS, StoreKit 1: un objeto [SKPaymentTransaction](https://developer.apple.com/documentation/storekit/skpaymenttransaction).</li><li> Para iOS, StoreKit 2: objeto [Transaction](https://developer.apple.com/documentation/storekit/transaction).</li><li> Para Android: identificador de cadena (`purchase.getOrderId`) de la compra, donde la compra es una instancia de la clase [Purchase](https://developer.android.com/reference/com/android/billingclient/api/Purchase) de la biblioteca de facturación.</li></ul> |
| variationId   | opcional | El identificador de cadena de la variante. Puedes obtenerlo usando la propiedad `variationId` del objeto [AdaptyPaywall](https://react-native.adapty.io/interfaces/adaptypaywall). |

</TabItem>
<TabItem value="old2" label="Adapty SDK up to 3.2.x (legacy)" default> 

<Tabs groupId="current-os" queryString> 
<TabItem value="swift" label="iOS" default> 

**Reportar transacciones**

- Las versiones hasta la 3.1.x escuchan automáticamente las transacciones en el App Store, por lo que no se requiere reporte manual.
- La versión 3.2 no admite Observer Mode.

</TabItem> 
<TabItem value="kotlin" label="Android and Android-based cross-platforms" default> 

**Reportar transacciones**

Usa `restorePurchases` para reportar una transacción a Adapty en Observer Mode, tal como se explica en la página [Restaurar compras en el código móvil](react-native-restore-purchase).

:::warning
**¡No omitas el reporte de transacciones!**
Si no llamas a `restorePurchases`, Adapty no reconocerá la transacción, no aparecerá en los análisis y no se enviará a las integraciones.
::: 

</TabItem>
</Tabs>

**Asociar paywalls a transacciones**

El SDK de Adapty no puede determinar el origen de las compras, ya que eres tú quien las procesa. Por lo tanto, si planeas usar paywalls y/o pruebas A/B en Observer Mode, debes asociar la transacción proveniente de tu app store con el paywall correspondiente en el código de tu app móvil. Es importante hacerlo correctamente antes de publicar tu app; de lo contrario, generará errores en los análisis.

```typescript 
const variationId = paywall.variationId;

try {
    await adapty.setVariationId('transactionId', variationId);
} catch (error) {
    // handle the `AdaptyError`
}
```

Parámetros de la solicitud:

| Parámetro     | Presencia | Descripción                                                  |
| ------------- | --------- | ------------------------------------------------------------ |
| transactionId | obligatorio | <p>Para iOS, StoreKit 1: un objeto [SKPaymentTransaction](https://developer.apple.com/documentation/storekit/skpaymenttransaction).</p><p>Para iOS, StoreKit 2: objeto [Transaction](https://developer.apple.com/documentation/storekit/transaction).</p><p>Para Android: identificador de cadena (purchase.getOrderId de la compra, donde la compra es una instancia de la clase [Purchase](https://developer.android.com/reference/com/android/billingclient/api/Purchase) de la biblioteca de facturación.</p> |
| variationId   | obligatorio | El identificador de cadena de la variante. Puedes obtenerlo usando la propiedad `variationId` del objeto [AdaptyPaywall](https://react-native.adapty.io/interfaces/adaptypaywall). |

</TabItem> 
</Tabs>

---


# File: react-native-troubleshoot-purchases
---

---
title: "Solucionar problemas de compras en React Native SDK"
description: "Solucionar problemas de compras en React Native SDK"
---

Esta guía te ayuda a resolver los problemas más comunes al implementar compras manualmente en el SDK de React Native.

## makePurchase se ejecuta correctamente, pero el perfil no se actualiza \{#makepurchase-is-called-successfully-but-the-profile-is-not-being-updated\}

**Problema**: El método `makePurchase` se completa correctamente, pero el perfil del usuario y el estado de la suscripción no se actualizan en Adapty.

**Causa**: Normalmente indica que la configuración de Google Play Store está incompleta o tiene errores.

**Solución**: Asegúrate de haber completado todos los [pasos de configuración de Google Play](initial-android).

## makePurchase se invoca dos veces \{#makepurchase-is-invoked-twice\}

**Problema**: El método `makePurchase` se está llamando varias veces para la misma compra.

**Causa**: Esto suele ocurrir cuando el flujo de compra se activa varias veces por problemas de gestión del estado de la UI o interacciones rápidas del usuario.

**Solución**: Asegúrate de haber completado todos los [pasos de configuración de Google Play](initial-android).

## AdaptyError.cantMakePayments en modo observer \{#adaptyelrorcantmakepayments-in-observer-mode\}

**Problema**: Recibes `AdaptyError.cantMakePayments` al usar `makePurchase` en modo observer.

**Causa**: En el modo observer, debes gestionar las compras por tu cuenta, no usar el método `makePurchase` de Adapty.

**Solución**: Si usas `makePurchase` para las compras, desactiva el modo observer. Tienes que elegir entre usar `makePurchase` o gestionar las compras por tu cuenta en el modo observer. Consulta [Implementar el modo Observer](implement-observer-mode-react-native) para más detalles.

## Error de Adapty: (code: 103, message: Play Market request failed on purchases updated: responseCode=3, debugMessage=Billing Unavailable, detail: null) \{#adapty-error-code-103-message-play-market-request-failed-on-purchases-updated-responsecode3-debugmessagebilling-unavailable-detail-null\}

**Problema**: Estás recibiendo un error de facturación no disponible de Google Play Store.

**Causa**: Este error no está relacionado con Adapty. Es un error de la Biblioteca de Facturación de Google Play que indica que la facturación no está disponible en el dispositivo.

**Solución**: Este error no está relacionado con Adapty. Puedes consultar más información en la documentación de Play Store: [Handle BillingResult response codes](https://developer.android.com/google/play/billing/errors#billing_unavailable_error_code_3) | Play Billing | Android Developers.

## No se encuentran makePurchasesCompletionHandlers \{#not-found-makepurchasescompletionhandlers\}

**Problema**: Estás encontrando problemas porque no se encuentran los `makePurchasesCompletionHandlers`.

**Causa**: Esto suele estar relacionado con problemas en las pruebas en sandbox.

**Solución**: Crea un nuevo usuario sandbox e inténtalo de nuevo. Esto suele resolver los problemas del manejador de finalización de compras relacionados con el sandbox.

## Otros problemas \{#other-issues\}

**Problema**: Experimentas otros problemas relacionados con las compras que no se tratan arriba.

**Solución**: Migra el SDK a la última versión siguiendo las [guías de migración](react-native-sdk-migration-guides) si es necesario. Muchos problemas se resuelven en versiones más recientes del SDK.

---


# File: react-native-identifying-users
---

---
title: "Identificar usuarios en el SDK de React Native"
description: "Aprende cómo identificar usuarios en tu app de React Native con el SDK de Adapty."
---

Adapty crea un ID de perfil interno para cada usuario. Sin embargo, si tienes tu propio sistema de autenticación, debes establecer tu propio Customer User ID. Puedes encontrar usuarios por su Customer User ID en la sección [Perfiles](profiles-crm) y usarlo en la [API del lado del servidor](getting-started-with-server-side-api), que se enviará a todas las integraciones.
### Establecer el ID de usuario en la configuración \{#setting-customer-user-id-on-configuration\}

Si tienes un ID de usuario durante la configuración, pásalo como parámetro `customerUserId` al método `.activate()`:

```typescript showLineNumbers
adapty.activate("PUBLIC_SDK_KEY", {
    customerUserId: "YOUR_USER_ID"
});
```

:::tip

¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app móvil? Echa un vistazo a nuestras [apps de ejemplo](sample-apps), que muestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funcionalidades básicas.

:::
### Configurar el ID de usuario del cliente tras la configuración \{#setting-customer-user-id-after-configuration\}

Si no tienes un ID de usuario en la configuración del SDK, puedes establecerlo más adelante en cualquier momento con el método `.identify()`. Los casos más habituales para usar este método son después del registro o la autenticación, cuando el usuario pasa de ser anónimo a estar autenticado.

```typescript showLineNumbers
try {
    await adapty.identify("YOUR_USER_ID");
    // successfully identified
} catch (error) {
    // handle the error
}
```

Parámetros de la solicitud:

- **Customer User ID** (obligatorio): un identificador de usuario de tipo string.
:::warning
Reenvío de datos significativos del usuario

En algunos casos, como cuando un usuario vuelve a iniciar sesión en su cuenta, los servidores de Adapty ya tienen información sobre ese usuario. En estos escenarios, el SDK de Adapty cambiará automáticamente para trabajar con el nuevo usuario. Si pasaste algún dato al usuario anónimo, como atributos personalizados o atribuciones de redes de terceros, deberás reenviar esos datos para el usuario identificado.

También es importante tener en cuenta que debes volver a solicitar todos los paywalls y productos después de identificar al usuario, ya que los datos del nuevo usuario pueden ser diferentes.
:::
### Cerrar sesión e iniciar sesión \{#logging-out-and-logging-in\}

Puedes cerrar la sesión del usuario en cualquier momento llamando al método `.logout()`:

```typescript showLineNumbers
try {
    await adapty.logout();
    // successful logout
} catch (error) {
    // handle the error
}
```

Luego puedes iniciar sesión del usuario usando el método `.identify()`.
## Asignar `appAccountToken` (iOS) \{#assign-appaccounttoken-ios\}

[`appAccountToken`](https://developer.apple.com/documentation/storekit/product/purchaseoption/appaccounttoken(_:)) es un **UUID** que te permite vincular las transacciones del App Store con la identidad interna de tus usuarios.  
StoreKit asocia este token con cada transacción, de modo que tu backend puede relacionar los datos del App Store con tus usuarios.

Usa un UUID estable generado por usuario y reutilízalo para la misma cuenta en todos los dispositivos.
Así te aseguras de que las compras y las notificaciones del App Store queden correctamente vinculadas.
Puedes establecer el token de dos maneras: durante la activación del SDK o al identificar al usuario.

:::important
Siempre debes pasar `appAccountToken` junto con `customerUserId`.
Si solo pasas el token, no se incluirá en la transacción.
:::
```typescript showLineNumbers
// Durante la configuración:
adapty.activate("PUBLIC_SDK_KEY", {
    customerUserId: "YOUR_USER_ID",
    ios: { appAccountToken: "YOUR_APP_ACCOUNT_TOKEN" },
});

// O al identificar usuarios
try {
    await adapty.identify("YOUR_USER_ID", {
        ios: {appAccountToken: 'YOUR_APP_ACCOUNT_TOKEN'}
    });
    // identificado correctamente
} catch (error) {
    // gestiona el error
}
```
### Establecer IDs de cuenta ofuscados (Android) \{#set-obfuscated-account-ids-android\}

Google Play requiere IDs de cuenta ofuscados en ciertos casos de uso para mejorar la privacidad y seguridad del usuario. Estos IDs ayudan a Google Play a identificar las compras manteniendo el anonimato de la información del usuario, lo que resulta especialmente importante para la prevención del fraude y el análisis de datos.

Es posible que necesites establecer estos IDs si tu aplicación maneja datos de usuario sensibles o si debes cumplir con normativas de privacidad específicas. Los IDs ofuscados permiten a Google Play hacer seguimiento de las compras sin exponer los identificadores reales de los usuarios.
```typescript showLineNumbers
// Durante la configuración:
adapty.activate("PUBLIC_SDK_KEY", {
    customerUserId: "YOUR_USER_ID",
    android: { obfuscatedAccountId: 'YOUR_OBFUSCATED_ACCOUNT_ID' }
});

// O al identificar usuarios
try {
    await adapty.identify("YOUR_USER_ID", {
        android: { obfuscatedAccountId: 'YOUR_OBFUSCATED_ACCOUNT_ID' }
    });
    // identificado correctamente
} catch (error) {
    // gestionar el error
}
```
## Detectar usuarios en varios dispositivos \{#detect-users-across-devices\}

---
no_index: true
---

Cuando el SDK se activa, lee automáticamente los derechos existentes del usuario desde StoreKit (iOS) o Google Play Billing (Android) y los sincroniza con el backend de Adapty. Una suscripción activa aparece en el perfil de Adapty sin que la app llame a `restorePurchases`.

Lo que **no** ocurre automáticamente es reconocer que un perfil en un dispositivo nuevo pertenece al mismo usuario que el perfil en el dispositivo original. Adapty relaciona perfiles por Customer User ID, así que la continuidad de identidad depende de lo que uses como CUID.

**Lo que Adapty puede detectar entre dispositivos**

| Tu configuración | Lo que Adapty detecta | Lo que debes hacer |
| --- | --- | --- |
| Customer User ID = `device_id` (sin login en la app) | El nuevo dispositivo obtiene un CUID diferente y, por tanto, un perfil diferente. La suscripción se sincroniza con el nuevo perfil mediante un evento **Access level updated**, pero `subscription_started` no se dispara — el nuevo perfil se trata como heredero de la compra original. Los análisis basados en `subscription_started` contarán de menos a los usuarios que vuelven. | Usa un ID de cuenta estable como Customer User ID para que un usuario que regresa coincida con el perfil existente en todos los dispositivos. |
| Customer User ID = ID de cuenta estable (login en cada dispositivo) | El SDK sincroniza automáticamente la suscripción en `activate()`, e `identify()` relaciona el perfil existente por CUID. | No se necesita configuración adicional — tanto la identidad como la suscripción se resuelven automáticamente. |
| Heredero de Apple Family Sharing | El miembro de la familia recibe la suscripción solo a través de un evento **Access level updated** — `subscription_started` no se dispara. | Escucha el evento **Access level updated**. Consulta [Apple Family Sharing](apple-family-sharing) para ver la matriz de eventos completa. |
| Misma cuenta de Apple/Google, distintos usuarios dentro de la app | El primer perfil que registra la compra se convierte en el principal. Los perfiles posteriores ven la suscripción a través de una cadena de herederos, con un evento **Access level updated**. | Exige login y elige un [modo de compartición](sharing-paid-access-between-user-accounts) que se adapte a tu modelo. |

**Restaurar compras en un dispositivo nuevo**

Muestra un botón "Restaurar compras" iniciado por el usuario en tu paywall. Apple App Review (directriz 3.1.1) lo exige, y actúa como alternativa cuando la sincronización automática no cubre algún caso límite. El botón debe llamar a `restorePurchases` en tu SDK.

No es necesario llamar a `restorePurchases` de forma programática al primer inicio para el uso normal — el SDK ya ejecuta el equivalente en `activate()`. Reserva las llamadas programáticas para forzar una verificación de recibo actualizada, por ejemplo al depurar un acceso que falta después de que `activate()` haya completado.

---


# File: react-native-setting-user-attributes
---

---
title: "Establecer atributos de usuario en el SDK de React Native"
description: "Aprende cómo actualizar atributos de usuario y datos de perfil en tu app de React Native con el SDK de Adapty."
---

Puedes establecer atributos opcionales como correo electrónico, número de teléfono, etc., para los usuarios de tu app. Luego puedes usar esos atributos para crear [segmentos](segments) de usuarios o simplemente verlos en el CRM.

### Establecer atributos de usuario \{#setting-user-attributes\}

Para establecer atributos de usuario, llama al método `.updateProfile()`:

```typescript showLineNumbers
// Only for TypeScript validation

const params: AdaptyProfileParameters = {
    email: 'email@email.com',
    phoneNumber: '+18888888888',
    firstName: 'John',
    lastName: 'Appleseed',
    gender: 'other',
    birthday: new Date().toISOString(),
};

try {
    await adapty.updateProfile(params);
} catch (error) {
    // handle `AdaptyError`
}
```

Ten en cuenta que los atributos que hayas establecido previamente con el método `updateProfile` no se restablecerán.

:::tip

¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app móvil? Echa un vistazo a nuestras [apps de ejemplo](sample-apps), que muestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funcionalidades básicas.

:::

### Lista de claves permitidas \{#the-allowed-keys-list\}

Las claves permitidas `<Key>` de `AdaptyProfileParameters.Builder` y los valores `<Value>` correspondientes se indican a continuación:

| Clave | Valor |
|---|-----|
| <p>email</p><p>phoneNumber</p><p>firstName</p><p>lastName</p> | String |
| gender | Enum, los valores permitidos son: `female`, `male`, `other` |
| birthday | Date |

### Atributos de usuario personalizados \{#custom-user-attributes\}

Puedes definir tus propios atributos personalizados. Estos suelen estar relacionados con el uso de tu app. Por ejemplo, en aplicaciones de fitness pueden ser el número de ejercicios por semana; en apps de aprendizaje de idiomas, el nivel de conocimiento del usuario, etc. Puedes usarlos en segmentos para crear paywalls y ofertas dirigidas, y también en analíticas para determinar qué métricas de producto influyen más en los ingresos.

```typescript showLineNumbers
try {
  await adapty.updateProfile({
    codableCustomAttributes: {
      key_1: 'value_1',
      key_2: 2,
    },
  });
} catch (error) {
    // handle `AdaptyError`
}
```

Para eliminar una clave existente, usa el método `.withRemoved(customAttributeForKey:)`:

```typescript showLineNumbers
try {
  // to remove a key, pass null as its value
  await adapty.updateProfile({
    codableCustomAttributes: {
      key_1: null,
      key_2: null,
    },
  });
} catch (error) {
    // handle `AdaptyError`
}
```

A veces necesitas saber qué atributos personalizados ya están configurados. Para ello, usa el campo `customAttributes` del objeto `AdaptyProfile`.

:::warning
Ten en cuenta que el valor de `customAttributes` puede estar desactualizado, ya que los atributos de usuario pueden enviarse desde distintos dispositivos en cualquier momento, por lo que los atributos en el servidor podrían haber cambiado después de la última sincronización.
:::

### Límites \{#limits\}

- Hasta 30 atributos personalizados por usuario
- Los nombres de clave pueden tener hasta 30 caracteres. El nombre de la clave puede incluir caracteres alfanuméricos y cualquiera de los siguientes: `_`  `-` `.`
- El valor puede ser una cadena de texto o un número flotante con un máximo de 50 caracteres.

---


# File: react-native-listen-subscription-changes
---

---
title: "Comprobar el estado de suscripción en el SDK de React Native"
description: "Haz seguimiento y gestión del estado de suscripción del usuario en Adapty para mejorar la retención de clientes en tu app de React Native."
---

Con Adapty, hacer seguimiento del estado de suscripción es muy sencillo. No tienes que insertar manualmente los IDs de producto en tu código. En su lugar, puedes comprobar fácilmente el estado de suscripción de un usuario verificando si tiene un [nivel de acceso](access-level) activo.

<details>
   <summary>Antes de empezar a comprobar el estado de suscripción (haz clic para ampliar)</summary>

- Para iOS, configura las [notificaciones del servidor de App Store](enable-app-store-server-notifications)
- Para Android, configura las [notificaciones en tiempo real para desarrolladores (RTDN)](enable-real-time-developer-notifications-rtdn)
</details>

## Nivel de acceso y el objeto AdaptyProfile \{#access-level-and-the-adaptyprofile-object\}

Los niveles de acceso son propiedades del objeto [AdaptyProfile](https://react-native.adapty.io/interfaces/adaptyprofile). Te recomendamos recuperar el perfil cuando arranque tu app, por ejemplo cuando [identificas a un usuario](react-native-identifying-users#setting-customer-user-id-on-configuration), y actualizarlo cada vez que se produzcan cambios. Así podrás usar el objeto de perfil sin tener que solicitarlo repetidamente.

Para recibir notificaciones de las actualizaciones del perfil, escucha los cambios de perfil tal como se describe en la sección [Escuchar actualizaciones del perfil, incluidos los niveles de acceso](react-native-listen-subscription-changes) que encontrarás más abajo.

:::tip

¿Quieres ver un ejemplo real de cómo se integra el SDK de Adapty en una app móvil? Echa un vistazo a nuestras [apps de ejemplo](sample-apps), que muestran la configuración completa, incluyendo la visualización de paywalls, la realización de compras y otras funcionalidades básicas.

:::

## Obtener el nivel de acceso desde el servidor \{#retrieving-the-access-level-from-the-server\}

Para obtener el nivel de acceso desde el servidor, usa el método `.getProfile()`:

```typescript showLineNumbers
try {
    const profile = await adapty.getProfile();
} catch (error) {
  // handle the error
}
```

Parámetros de respuesta:

| Parámetro | Descripción                                                  |
| --------- | ------------------------------------------------------------ |
| Profile   | <p>Un objeto [AdaptyProfile](https://react-native.adapty.io/interfaces/adaptyprofile). Por lo general, solo necesitas comprobar el estado del nivel de acceso del perfil para determinar si el usuario tiene acceso premium a la app.</p><p></p><p>El método `.getProfile` devuelve el resultado más actualizado, ya que siempre intenta consultar la API. Si por algún motivo (por ejemplo, sin conexión a internet) el SDK de Adapty no puede recuperar información del servidor, se devolverán los datos de la caché. También es importante tener en cuenta que el SDK de Adapty actualiza la caché de `AdaptyProfile` de forma periódica para mantener esta información lo más actualizada posible.</p> |

El método `.getProfile()` te proporciona el perfil de usuario desde el que puedes obtener el estado del nivel de acceso. Puedes tener múltiples niveles de acceso por app. Por ejemplo, si tienes una app de noticias y vendes suscripciones a diferentes temáticas de forma independiente, puedes crear niveles de acceso "sports" y "science". Pero la mayoría de las veces solo necesitarás un nivel de acceso; en ese caso, puedes usar simplemente el nivel de acceso predeterminado "premium".

Aquí tienes un ejemplo para comprobar el nivel de acceso "premium" predeterminado:

```typescript showLineNumbers
try {
    const profile = await adapty.getProfile();
    
  const isActive = profile.accessLevels?.["premium"]?.isActive;
    if (isActive) {
        // grant access to premium features
    }
} catch (error) {
    // handle the error
}
```

### Escuchar actualizaciones del estado de suscripción \{#listening-for-subscription-status-updates\}

Cada vez que cambia la suscripción del usuario, Adapty lanza un evento.

Para recibir mensajes de Adapty, necesitas realizar algunas configuraciones adicionales:

```typescript showLineNumbers
// Create an "onLatestProfileLoad" event listener
adapty.addEventListener('onLatestProfileLoad', profile => {
    // handle any changes to subscription state
});
```

Adapty también lanza un evento al iniciar la aplicación. En ese caso, se pasará el estado de suscripción almacenado en caché.

### Caché del estado de suscripción \{#subscription-status-cache\}

La caché implementada en el SDK de Adapty almacena el estado de suscripción del perfil. Esto significa que, aunque el servidor no esté disponible, se puede acceder a los datos en caché para obtener información sobre el estado de suscripción del perfil.

No obstante, hay que tener en cuenta que no es posible solicitar datos directamente desde la caché. El SDK consulta el servidor periódicamente cada minuto para comprobar si hay actualizaciones o cambios relacionados con el perfil. Si hay alguna modificación, como nuevas transacciones u otras actualizaciones, se enviarán a los datos en caché para mantenerlos sincronizados con el servidor.

---


# File: react-native-deal-with-att
---

---
title: "Gestionar ATT en el SDK de React Native"
description: "Empieza con Adapty en React Native para simplificar la configuración y gestión de suscripciones."
---

Si tu aplicación utiliza el framework AppTrackingTransparency y muestra al usuario una solicitud de autorización de seguimiento de la app, debes enviar el [estado de autorización](https://developer.apple.com/documentation/apptrackingtransparency/attrackingmanager/authorizationstatus/) a Adapty.

```typescript showLineNumbers

try {
  await adapty.updateProfile({
    // you can also pass a string value (validated via tsc) if you prefer
    appTrackingTransparencyStatus: AppTrackingTransparencyStatus.Authorized,
  });
} catch (error) {
  // handle `AdaptyError`
}
```

:::warning
Te recomendamos encarecidamente que envíes este valor lo antes posible cuando cambie; solo así los datos se enviarán a tiempo a las integraciones que hayas configurado.
:::

---


# File: kids-mode-react-native
---

---
title: "Modo Niños en React Native SDK"
description: "Activa fácilmente el Modo Niños para cumplir con las políticas de Apple y Google. Sin recopilación de IDFA, GAID ni datos publicitarios en el SDK de React Native."
---

Si tu aplicación React Native está dirigida a niños, debes cumplir las políticas de [Apple](https://developer.apple.com/kids/) y [Google](https://support.google.com/googleplay/android-developer/answer/9893335). Si usas el SDK de Adapty, unos pocos pasos sencillos te permitirán configurarlo para cumplir con estas políticas y superar las revisiones de la tienda.

## ¿Qué se requiere? \{#whats-required\}

Necesitas configurar el SDK de Adapty para deshabilitar la recopilación de:

- [IDFA (Identifier for Advertisers)](https://en.wikipedia.org/wiki/Identifier_for_Advertisers) (iOS)
- [Android Advertising ID (AAID/GAID)](https://support.google.com/googleplay/android-developer/answer/6048248) (Android)
- [Dirección IP](https://www.ftc.gov/system/files/ftc_gov/pdf/p235402_coppa_application.pdf)

Además, te recomendamos utilizar el ID de usuario del cliente con cuidado. Un ID de usuario con el formato `<NombreApellido>` se considerará definitivamente como recopilación de datos personales, al igual que el uso del correo electrónico. Para el Modo Niños, la mejor práctica es utilizar identificadores aleatorios o anonimizados (por ejemplo, IDs hasheados o UUIDs generados por el dispositivo) para garantizar el cumplimiento.

## Activar el Modo Niños \{#enabling-kids-mode\}

### Cambios en el Adapty Dashboard \{#updates-in-the-adapty-dashboard\}

En el Adapty Dashboard, debes deshabilitar la recopilación de direcciones IP. Para ello, ve a [App settings](https://app.adapty.io/settings/general) y haz clic en **Disable IP address collection** en la sección **Collect users' IP address**.

### Cambios en el código de tu aplicación móvil \{#updates-in-your-mobile-app-code\}

¡La compatibilidad con el Modo Niños en React Native estará disponible próximamente!

Por ahora, puedes consultar las guías nativas de cada plataforma:
- [Modo Niños en iOS SDK](kids-mode) para la configuración en iOS
- [Modo Niños en Android SDK](kids-mode-android) para la configuración en Android

---


# File: react-native-get-onboardings
---

---
title: "Obtener onboardings en React Native SDK"
description: "Aprende cómo recuperar onboardings en Adapty para React Native."
---

Después de [diseñar la parte visual de tu onboarding](design-onboarding) con el builder en el Adapty Dashboard, puedes mostrarlo en tu app de React Native. El primer paso es obtener el onboarding asociado al placement y su configuración de vista, como se describe a continuación.

Antes de comenzar, asegúrate de que:

1. Tienes instalado el [SDK de Adapty para React Native](sdk-installation-reactnative) en la versión 3.8.0 o superior.
2. Has [creado un onboarding](create-onboarding).
3. Has añadido el onboarding a un [placement](placements).

## Obtener el onboarding \{#fetch-onboarding\}

Cuando creas un [onboarding](onboardings) con nuestro builder sin código, se almacena como un contenedor con configuración que tu app debe obtener y mostrar. Este contenedor gestiona toda la experiencia: qué contenido aparece, cómo se presenta y cómo se procesan las interacciones del usuario (como respuestas a preguntas o entradas de formularios). El contenedor también registra automáticamente los eventos de analíticas, por lo que no necesitas implementar un seguimiento de vistas por separado.

Para un rendimiento óptimo, obtén la configuración del onboarding con antelación para que las imágenes tengan tiempo suficiente de descargarse antes de mostrárselas a los usuarios.

Para obtener un onboarding, usa el método `getOnboarding`:

```typescript showLineNumbers
try {
    const placementId = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const onboarding = await adapty.getOnboarding(placementId, locale);
    // the requested onboarding
} catch (error) {
    // handle the error
}
```

Luego, llama al método `createOnboardingView` para crear una instancia de vista.

:::warning
El resultado del método `createOnboardingView` solo puede usarse una vez. Si necesitas volver a usarlo, llama de nuevo al método `createOnboardingView`. Llamarlo dos veces sin recrearlo puede provocar el error `AdaptyUIError.viewAlreadyPresented`.
:::

```typescript showLineNumbers
// for the Adapty SDK < 3.14 – import {createOnboardingView} from 'react-native-adapty/dist/ui';

if (onboarding.hasViewConfiguration) {
    try {
        const view = await createOnboardingView(onboarding);
    } catch (error) {
        // handle the error
    }
} else {
    //use your custom logic
}
```

Parámetros:

| Parámetro         | Presencia | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
|-------------------|--------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **placementId**   | requerido | El identificador del [Placement](placements) deseado. Es el valor que especificaste al crear un placement en el Adapty Dashboard.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **locale**        | <p>opcional</p><p>por defecto: `en`</p> | <p>El identificador de la localización del onboarding. Se espera que este parámetro sea un código de idioma compuesto por uno o dos subetiquetas separadas por el carácter menos (**-**). La primera subetiqueta es para el idioma y la segunda para la región.</p><p></p><p>Ejemplo: `en` significa inglés, `pt-br` representa el portugués de Brasil.</p><p>Consulta [Localizations and locale codes](localizations-and-locale-codes) para más información sobre los códigos de localización y cómo recomendamos usarlos.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| **fetchPolicy**   | por defecto: `.reloadRevalidatingCacheData` | <p>Por defecto, el SDK intentará cargar los datos desde el servidor y devolverá los datos en caché en caso de fallo. Recomendamos esta opción porque garantiza que tus usuarios siempre reciban los datos más actualizados.</p><p></p><p>Sin embargo, si crees que tus usuarios tienen conexión inestable a internet, considera usar `.returnCacheDataElseLoad` para devolver los datos en caché si existen. En este caso, los usuarios podrían no obtener los datos más recientes, pero experimentarán tiempos de carga más rápidos, independientemente de lo inestable que sea su conexión. La caché se actualiza regularmente, por lo que es seguro usarla durante la sesión para evitar solicitudes de red.</p><p></p><p>Ten en cuenta que la caché permanece intacta al reiniciar la app y solo se borra cuando se desinstala la app o mediante una limpieza manual.</p><p></p><p>El SDK de Adapty almacena los onboardings localmente en dos capas: la caché de actualización regular descrita anteriormente y los onboardings de respaldo. También usamos CDN para obtener los onboardings más rápido y un servidor de respaldo independiente en caso de que el CDN sea inaccesible. Este sistema está diseñado para garantizar que siempre obtengas la versión más reciente de tus onboardings, asegurando la fiabilidad incluso cuando la conexión a internet es escasa.</p> |
| **loadTimeoutMs** | por defecto: 5 seg | <p>Este valor limita el tiempo de espera para este método. Si se alcanza el tiempo de espera, se devolverán los datos en caché o el fallback local.</p><p>Ten en cuenta que, en casos excepcionales, este método puede superar ligeramente el tiempo especificado en `loadTimeout`, ya que la operación puede consistir en diferentes solicitudes internamente.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |

Parámetros de respuesta:

| Parámetro | Descripción                                                                                                                                                |
|:----------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------|
| Onboarding      | Un objeto [`AdaptyOnboarding`](https://react-native.adapty.io/interfaces/adaptyonboarding) con: el identificador y la configuración del onboarding, Remote Config y otras propiedades. |

## Acelera la obtención del onboarding con el onboarding de audiencia predeterminada \{#speed-up-onboarding-fetching-with-default-audience-onboarding\}

Normalmente, los onboardings se obtienen casi al instante, por lo que no necesitas preocuparte por acelerar este proceso. Sin embargo, en casos donde tienes numerosas audiencias y onboardings, y tus usuarios tienen una conexión a internet débil, obtener un onboarding puede tardar más de lo deseado. En esas situaciones, puede que quieras mostrar un onboarding predeterminado para garantizar una experiencia de usuario fluida en lugar de no mostrar ningún onboarding.

Para abordar esto, puedes usar el método `getOnboardingForDefaultAudience`, que obtiene el onboarding del placement especificado para la audiencia **All Users**. Sin embargo, es fundamental entender que el enfoque recomendado es obtener el onboarding con el método `getOnboarding`, como se detalla en la sección [Obtener el onboarding](#fetch-onboarding) anterior.

:::warning
Considera usar `getOnboarding` en lugar de `getOnboardingForDefaultAudience`, ya que este último tiene limitaciones importantes:

- **Problemas de compatibilidad**: Puede generar problemas al dar soporte a varias versiones de la app, lo que requiere diseños retrocompatibles o aceptar que las versiones más antiguas podrían mostrarse incorrectamente.
- **Sin personalización**: Solo muestra contenido para la audiencia "All Users", eliminando la segmentación basada en país, atribución o atributos personalizados.

Si una obtención más rápida compensa estos inconvenientes para tu caso de uso, utiliza `getOnboardingForDefaultAudience` como se muestra a continuación. De lo contrario, usa `getOnboarding` como se describe [arriba](#fetch-onboarding).
:::

```typescript showLineNumbers
try {
    const placementId = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const onboarding = await adapty.getOnboardingForDefaultAudience(placementId, locale);
    // the requested onboarding
} catch (error) {
    // handle the error
}
```

Parámetros:

| Parámetro | Presencia | Descripción                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
|---------|--------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **placementId** | requerido | El identificador del [Placement](placements) deseado. Es el valor que especificaste al crear un placement en el Adapty Dashboard.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **locale** | <p>opcional</p><p>por defecto: `en`</p> | <p>El identificador de la localización del onboarding. Se espera que este parámetro sea un código de idioma compuesto por uno o dos subetiquetas separadas por el carácter menos (**-**). La primera subetiqueta es para el idioma y la segunda para la región.</p><p></p><p>Ejemplo: `en` significa inglés, `pt-br` representa el portugués de Brasil.</p><p>Consulta [Localizations and locale codes](localizations-and-locale-codes) para más información sobre los códigos de localización y cómo recomendamos usarlos.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| **fetchPolicy** | por defecto: `.reloadRevalidatingCacheData` | <p>Por defecto, el SDK intentará cargar los datos desde el servidor y devolverá los datos en caché en caso de fallo. Recomendamos esta opción porque garantiza que tus usuarios siempre reciban los datos más actualizados.</p><p></p><p>Sin embargo, si crees que tus usuarios tienen conexión inestable a internet, considera usar `.returnCacheDataElseLoad` para devolver los datos en caché si existen. En este caso, los usuarios podrían no obtener los datos más recientes, pero experimentarán tiempos de carga más rápidos, independientemente de lo inestable que sea su conexión. La caché se actualiza regularmente, por lo que es seguro usarla durante la sesión para evitar solicitudes de red.</p><p></p><p>Ten en cuenta que la caché permanece intacta al reiniciar la app y solo se borra cuando se desinstala la app o mediante una limpieza manual.</p><p></p><p>El SDK de Adapty almacena los onboardings localmente en dos capas: la caché de actualización regular descrita anteriormente y los onboardings de respaldo. También usamos CDN para obtener los onboardings más rápido y un servidor de respaldo independiente en caso de que el CDN sea inaccesible. Este sistema está diseñado para garantizar que siempre obtengas la versión más reciente de tus onboardings, asegurando la fiabilidad incluso cuando la conexión a internet es escasa.</p> |

---


# File: react-native-present-onboardings
---

---
title: "Presentar onboardings en React Native SDK"
description: "Descubre cómo presentar onboardings en React Native para aumentar las conversiones y los ingresos."
---

Si has personalizado un onboarding con el builder, no tienes que preocuparte por renderizarlo en el código de tu app para mostrárselo al usuario. Ese onboarding ya contiene tanto lo que debe mostrarse como la forma en que debe hacerlo.

Antes de empezar, asegúrate de que:

1. Tienes instalado [Adapty React Native SDK](sdk-installation-reactnative) 3.8.0 o posterior.
2. Has [creado un onboarding](create-onboarding).
3. Has añadido el onboarding a un [placement](placements).

El SDK de Adapty para React Native ofrece dos formas de presentar onboardings:

- **Componente React**: Un componente embebido que te permite integrarlo en la arquitectura y el sistema de navegación de tu app.

- **Presentación modal**

## Componente React \{#react-component\}

Para insertar un onboarding dentro de tu árbol de componentes existente, usa el componente `AdaptyOnboardingView` directamente en la jerarquía de componentes de React Native. El componente embebido te permite integrarlo en la arquitectura y el sistema de navegación de tu app.

:::note
En Android, recomendamos una configuración adicional para `AdaptyOnboardingView` con el fin de evitar un artefacto visual en el renderizado. Consulta [La UI del sistema se superpone al contenido del onboarding en Android](#system-ui-overlaps-onboarding-content-on-android).
:::

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

```typescript showLineNumbers title="React Native (TSX)"

function MyOnboarding({ onboarding }) {
  const onAnalytics = useCallback<OnboardingEventHandlers['onAnalytics']>((event, meta) => {}, []);
  const onClose = useCallback<OnboardingEventHandlers['onClose']>((actionId, meta) => {}, []);
  const onCustom = useCallback<OnboardingEventHandlers['onCustom']>((actionId, meta) => {}, []);
  const onPaywall = useCallback<OnboardingEventHandlers['onPaywall']>((actionId, meta) => {}, []);
  const onStateUpdated = useCallback<OnboardingEventHandlers['onStateUpdated']>((action, meta) => {}, []);
  const onFinishedLoading = useCallback<OnboardingEventHandlers['onFinishedLoading']>((meta) => {}, []);
  const onError = useCallback<OnboardingEventHandlers['onError']>((error) => {}, []);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      onAnalytics={onAnalytics}
      onClose={onClose}
      onCustom={onCustom}
      onPaywall={onPaywall}
      onStateUpdated={onStateUpdated}
      onFinishedLoading={onFinishedLoading}
      onError={onError}
    />
  );
}
```
</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>

```typescript showLineNumbers title="React Native (TSX)"

function MyOnboarding({ onboarding }) {
  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={{ flex: 1 }}
      eventHandlers={{
        onAnalytics(event, meta) { 
          // Handle analytics events
        },
        onClose(actionId, meta) { 
          // Handle close actions
        },
        onCustom(actionId, meta) { 
          // Handle custom actions
        },
        onPaywall(actionId, meta) { 
          // Handle paywall actions
        },
        onStateUpdated(action, meta) { 
          // Handle state updates
        },
        onFinishedLoading(meta) { 
          // Handle when onboarding finishes loading
        },
        onError(error) { 
          // Handle errors
        },
      }}
    />
  );
}
```
</TabItem>
</Tabs>

## Presentación modal \{#modal-presentation\}

Para mostrar un onboarding como pantalla independiente que el usuario pueda cerrar, usa el método `view.present()` sobre el `view` creado por el método `createOnboardingView`. Cada `view` solo puede usarse una vez. Si necesitas mostrar el onboarding de nuevo, llama a `createOnboardingView` otra vez para crear una nueva instancia de `view`.

:::warning
Reutilizar el mismo `view` sin recrearlo no está permitido. Producirá un error `AdaptyUIError.viewAlreadyPresented`.
:::

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>
```typescript showLineNumbers title="React Native (TSX)"

const view = await createOnboardingView(onboarding);

// Optional: handle onboarding events (close, custom actions, etc)
// view.setEventHandlers({ ... });

try {
    await view.present();
} catch (error) {
    // handle the error
}
```
</TabItem>

<TabItem value="old" label="SDK version < 3.14" default>
```typescript showLineNumbers title="React Native (TSX)"

const view = await createOnboardingView(onboarding);

view.registerEventHandlers(); // handle close press, etc

try {
    await view.present();
} catch (error) {
    // handle the error
}
```
</TabItem>
</Tabs>

### Configurar el estilo de presentación en iOS \{#configure-ios-presentation-style\}

Configura cómo se presenta el paywall en iOS pasando el parámetro `iosPresentationStyle` al método `present()`. El parámetro acepta los valores `'full_screen'` (por defecto) o `'page_sheet'`.

```typescript showLineNumbers
try {
  await view.present(iosPresentationStyle: 'page_sheet');
} catch (error) {
  // handle the error
}
```

## Loader durante el onboarding \{#loader-during-onboarding\}

Al presentar un onboarding en React Native, puede que notes un breve destello blanco o una pantalla de carga antes de que aparezca el onboarding. Esto ocurre mientras se inicializa la vista nativa subyacente. Puedes gestionarlo de distintas formas según tus necesidades y tu flujo de trabajo.

#### Controlar la splash screen con onFinishedLoading \{#control-splash-screen-using-onfinishedloading\}

:::note
Este enfoque solo está disponible al usar el componente React. No está disponible para la presentación modal.
:::

El enfoque recomendado para React Native es mantener visible tu splash screen o una capa personalizada hasta que el onboarding haya cargado por completo y ocultarla manualmente.

Al usar el componente React (`AdaptyOnboardingView`), espera al evento `onFinishedLoading` antes de ocultar tu splash screen o capa de superposición:

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

```typescript showLineNumbers title="React Native (TSX)"

function MyOnboarding({ onboarding }) {
  const [isLoading, setIsLoading] = useState(true);

  const onFinishedLoading = useCallback<OnboardingEventHandlers['onFinishedLoading']>((meta) => {
    // Hide your splash screen or custom overlay here
    setIsLoading(false);
  }, []);

  return (
    <>
      <AdaptyOnboardingView
        onboarding={onboarding}
        onFinishedLoading={onFinishedLoading}
        // ... other callbacks
      />
      {isLoading && <YourCustomLoadingOverlay />}
    </>
  );
}
```

</TabItem>

<TabItem value="old" label="SDK version < 3.14">

```typescript showLineNumbers title="React Native (TSX)"

function MyOnboarding({ onboarding }) {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <>
      <AdaptyOnboardingView
        onboarding={onboarding}
        eventHandlers={{
          onFinishedLoading(meta) {
            // Hide your splash screen or custom overlay here
            setIsLoading(false);
          },
          // ... other handlers
        }}
      />
      {isLoading && <YourCustomLoadingOverlay />}
    </>
  );
}
```

</TabItem>
</Tabs>

#### Personalizar el loader nativo \{#customize-native-loader\}

:::important
El flujo gestionado de Expo no permite colocar layouts nativos personalizados (por ejemplo, `res/layout` en Android). Para apps con Expo, controlar la splash screen o usar una capa de React Native es la única solución viable.
:::

Puedes reemplazar el loader nativo usando layouts específicos de cada plataforma en Android e iOS. Si usas la presentación modal, esta es tu única opción.

Sin embargo, este enfoque suele ser menos cómodo para apps React Native:

- Requiere implementaciones separadas para Android e iOS
- No es compatible con el flujo gestionado de Expo

Define un placeholder para cada plataforma:

- **iOS**: Añade `AdaptyOnboardingPlaceholderView.xib` a tu proyecto de Xcode. [Más información](ios-present-onboardings#add-smooth-transitions-between-the-splash-screen-and-onboarding).
- **Android**: Crea `adapty_onboarding_placeholder_view.xml` en `res/layout` y define allí un placeholder. [Más información](android-present-onboardings#add-smooth-transitions-between-the-splash-screen-and-onboarding).

## Personalizar cómo se abren los enlaces en los onboardings \{#customize-how-links-open-in-onboardings\}

:::important
La personalización de cómo se abren los enlaces en los onboardings está disponible a partir de la versión 3.15.1 del SDK de Adapty.
:::

Por defecto, los enlaces de los onboardings se abren en un navegador integrado en la app. Esto ofrece una experiencia fluida al mostrar las páginas web dentro de tu aplicación, sin que el usuario tenga que cambiar de app.

Si prefieres abrir los enlaces en un navegador externo, puedes personalizar este comportamiento estableciendo el parámetro `externalUrlsPresentation` en `WebPresentation.BrowserOutApp`:

<Tabs groupId="rn-onboarding-views" queryString>
<TabItem value="component" label="React component" default>

```typescript showLineNumbers title="React Native (TSX)"

function MyOnboarding({ onboarding }) {
  const onAnalytics = useCallback<OnboardingEventHandlers['onAnalytics']>((event, meta) => {}, []);
  const onClose = useCallback<OnboardingEventHandlers['onClose']>((actionId, meta) => {}, []);
  const onCustom = useCallback<OnboardingEventHandlers['onCustom']>((actionId, meta) => {}, []);
  const onPaywall = useCallback<OnboardingEventHandlers['onPaywall']>((actionId, meta) => {}, []);
  const onStateUpdated = useCallback<OnboardingEventHandlers['onStateUpdated']>((action, meta) => {}, []);
  const onFinishedLoading = useCallback<OnboardingEventHandlers['onFinishedLoading']>((meta) => {}, []);
  const onError = useCallback<OnboardingEventHandlers['onError']>((error) => {}, []);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      externalUrlsPresentation={WebPresentation.BrowserOutApp} // default – BrowserInApp
      onAnalytics={onAnalytics}
      onClose={onClose}
      onCustom={onCustom}
      onPaywall={onPaywall}
      onStateUpdated={onStateUpdated}
      onFinishedLoading={onFinishedLoading}
      onError={onError}
    />
  );
}
```
</TabItem>

<TabItem value="modal" label="Modal presentation">

```typescript showLineNumbers title="React Native (TSX)"

const view = await createOnboardingView(
  onboarding, 
  { externalUrlsPresentation: WebPresentation.BrowserOutApp } // default – BrowserInApp
);

try {
    await view.present();
} catch (error) {
    // handle the error
}
```
</TabItem>
</Tabs>

## Solución de problemas \{#troubleshooting\}

### La UI del sistema se superpone al contenido del onboarding en Android \{#system-ui-overlaps-onboarding-content-on-android\}

:::note
Esta configuración solo está disponible en proyectos de React Native sin gestión de Expo.

Si usas el flujo gestionado de Expo, no puedes añadir este recurso de Android directamente. Para aplicar esta configuración, debes crear un plugin de configuración de Expo personalizado que añada el recurso de Android correspondiente y registrarlo en `app.config.js`. Esto es necesario porque Expo gestiona el proyecto nativo de Android por ti.
:::

Al usar `AdaptyOnboardingView` en Android, los elementos de la UI del sistema, como la barra de estado y la barra de navegación, pueden aparecer encima del contenido del paywall. Para evitarlo, añade el siguiente recurso booleano a tu app:

1. Ve a `android/app/src/main/res/values`. Si no existe el archivo `bools.xml`, créalo.

2. Añade el siguiente recurso:

```xml
<resources>
    <bool name="adapty_onboarding_enable_safe_area_paddings">false</bool>
</resources>
```

Ten en cuenta que los cambios se aplican de forma global a todos los onboardings de tu app.

## Siguientes pasos \{#next-steps\}

Una vez que hayas presentado tu onboarding, querrás [gestionar las interacciones y eventos del usuario](react-native-handling-onboarding-events). Aprende a manejar los eventos del onboarding para responder a las acciones del usuario y realizar un seguimiento de la analítica.

---


# File: react-native-handling-onboarding-events
---

---
title: "Manejar eventos de onboarding en React Native SDK"
description: "Maneja eventos relacionados con el onboarding en React Native usando Adapty."
---

Los onboardings configurados con el builder generan eventos a los que tu app puede responder. La forma de manejarlos depende del enfoque de presentación que estés usando:

- **Presentación modal**: Requiere configurar manejadores de eventos que gestionen los eventos de todas las vistas de onboarding
- **Componente React**: Maneja los eventos mediante parámetros de callback en línea directamente en el widget

Antes de empezar, asegúrate de que:

1. Tienes instalado el [SDK de React Native de Adapty](sdk-installation-reactnative) versión 3.8.0 o posterior.
2. Has [creado un onboarding](create-onboarding).
3. Has añadido el onboarding a un [placement](placements).

Para controlar o monitorizar los procesos que ocurren en la pantalla de onboarding dentro de tu app, implementa manejadores de eventos:

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

Para el componente React, los eventos se manejan mediante props individuales de manejadores de eventos en el componente `AdaptyOnboardingView`:

```typescript showLineNumbers title="React Native (TSX)"

function MyOnboarding({ onboarding }) {
  const onAnalytics = useCallback<OnboardingEventHandlers['onAnalytics']>((event, meta) => {}, []);
  const onClose = useCallback<OnboardingEventHandlers['onClose']>((actionId, meta) => {}, []);
  const onCustom = useCallback<OnboardingEventHandlers['onCustom']>((actionId, meta) => {}, []);
  const onPaywall = useCallback<OnboardingEventHandlers['onPaywall']>((actionId, meta) => {}, []);
  const onStateUpdated = useCallback<OnboardingEventHandlers['onStateUpdated']>((action, meta) => {}, []);
  const onFinishedLoading = useCallback<OnboardingEventHandlers['onFinishedLoading']>((meta) => {}, []);
  const onError = useCallback<OnboardingEventHandlers['onError']>((error) => {}, []);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      onAnalytics={onAnalytics}
      onClose={onClose}
      onCustom={onCustom}
      onPaywall={onPaywall}
      onStateUpdated={onStateUpdated}
      onFinishedLoading={onFinishedLoading}
      onError={onError}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

Para la presentación modal, implementa el método de manejadores de eventos.

:::important
Llamar a `setEventHandlers` varias veces sobrescribirá los manejadores que proporciones, reemplazando tanto los predeterminados como los configurados anteriormente para esos eventos específicos.
:::

```javascript showLineNumbers title="React Native"

const view = await createOnboardingView(onboarding);

const unsubscribe = view.setEventHandlers({
  onAnalytics(event, meta) {
    // Track analytics events
  },
  onClose(actionId, meta) {
    // Handle close action
    view.dismiss();
    return true;
  },
  onCustom(actionId, meta) {
    // Handle custom actions
  },
  onPaywall(actionId, meta) {
    // Handle paywall actions
  },
  onStateUpdated(action, meta) {
    // Handle user input updates
  },
  onFinishedLoading(meta) {
    // Onboarding finished loading
  },
  onError(error) {
    // Handle loading errors
  },
});

try {
  await view.present();
} catch (error) {
  // handle the error
}
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14">

Para versiones del SDK anteriores a 3.14, solo se admite la presentación modal:

```javascript showLineNumbers title="React Native"

const view = await createOnboardingView(onboarding);

const unsubscribe = view.registerEventHandlers({
  onAnalytics(event, meta) {
    // Track analytics events
  },
  onClose(actionId, meta) {
    // Handle close action
    view.dismiss();
    return true;
  },
  onCustom(actionId, meta) {
    // Handle custom actions
  },
  onPaywall(actionId, meta) {
    // Handle paywall actions
  },
  onStateUpdated(action, meta) {
    // Handle user input updates
  },
  onFinishedLoading(meta) {
    // Onboarding finished loading
  },
  onError(error) {
    // Handle loading errors
  },
});

try {
  await view.present();
} catch (error) {
  // handle the error
}
```

</TabItem>
</Tabs>

## Tipos de eventos \{#event-types\}

Las siguientes secciones describen los distintos tipos de eventos que puedes manejar, independientemente del enfoque de presentación que estés usando.

### Manejar acciones personalizadas \{#handle-custom-actions\}

En el builder, puedes añadir una acción **custom** a un botón y asignarle un ID.

  <img src="/assets/shared/img/ios-events-1.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

Después, puedes usar ese ID en tu código y manejarlo como una acción personalizada. Por ejemplo, si un usuario pulsa un botón personalizado como **Login** o **Allow notifications**, el manejador de eventos se disparará con el parámetro `actionId` que coincide con el **Action ID** del builder. Puedes crear tus propios IDs, como "allowNotifications".

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

```typescript showLineNumbers title="React Native (TSX)"

function MyOnboarding({ onboarding }) {
  const onCustom = useCallback<OnboardingEventHandlers['onCustom']>((actionId, meta) => {
    switch (actionId) {
      case 'login':
        login();
        break;
      case 'allow_notifications':
        allowNotifications();
        break;
    }
  }, []);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      onCustom={onCustom}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

```javascript showLineNumbers title="React Native"

const view = await createOnboardingView(onboarding);

const unsubscribe = view.setEventHandlers({
  onCustom(actionId, meta) {
    switch (actionId) {
      case 'login':
        login();
        break;
      case 'allow_notifications':
        allowNotifications();
        break;
    }
  },
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14">

```javascript showLineNumbers title="React Native"

const view = await createOnboardingView(onboarding);

const unsubscribe = view.registerEventHandlers({
  onCustom(actionId, meta) {
    switch (actionId) {
      case 'login':
        login();
        break;
      case 'allow_notifications':
        allowNotifications();
        break;
    }
  },
});
```

</TabItem>
</Tabs>

<Details>
<summary>Ejemplo de evento (Haz clic para expandir)</summary>

```json
{
  "actionId": "allow_notifications",
  "meta": {
    "onboardingId": "onboarding_123",
    "screenClientId": "profile_screen",
    "screenIndex": 0,
    "screensTotal": 3
  }
}
```
</Details>

### Finalización de la carga del onboarding \{#finishing-loading-onboarding\}

Cuando un onboarding termina de cargarse, se dispara este evento:

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

```typescript showLineNumbers title="React Native (TSX)"

function MyOnboarding({ onboarding }) {
  const onFinishedLoading = useCallback<OnboardingEventHandlers['onFinishedLoading']>((meta) => {
    console.log('Onboarding loaded:', meta.onboardingId);
  }, []);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      onFinishedLoading={onFinishedLoading}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

```javascript showLineNumbers title="React Native"

const view = await createOnboardingView(onboarding);

const unsubscribe = view.setEventHandlers({
  onFinishedLoading(meta) {
    console.log('Onboarding loaded:', meta.onboardingId);
  },
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14">

```javascript showLineNumbers title="React Native"

const view = await createOnboardingView(onboarding);

const unsubscribe = view.registerEventHandlers({
  onFinishedLoading(meta) {
    console.log('Onboarding loaded:', meta.onboardingId);
  },
});
```

</TabItem>
</Tabs>

<Details>
<summary>Ejemplo de evento (Haz clic para expandir)</summary>

```json
{
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "welcome_screen",
        "screen_index": 0,
        "total_screens": 4
    }
}
```
</Details>

### Cerrar el onboarding \{#closing-onboarding\}

El onboarding se considera cerrado cuando el usuario pulsa un botón con la acción **Close** asignada.

  <img src="/assets/shared/img/ios-events-2.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

:::important
Ten en cuenta que debes gestionar qué ocurre cuando el usuario cierra el onboarding. Por ejemplo, necesitas dejar de mostrar el propio onboarding.
:::

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

```typescript showLineNumbers title="React Native (TSX)"

function MyOnboarding({ onboarding, navigation }) {
  const onClose = useCallback<OnboardingEventHandlers['onClose']>((actionId, meta) => {
    navigation.goBack();  
  }, [navigation]);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      onClose={onClose}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

```javascript showLineNumbers title="React Native"

const view = await createOnboardingView(onboarding);

const unsubscribe = view.setEventHandlers({
  onClose(actionId, meta) {
    await view.dismiss();
    return true;
  },
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14">

```javascript showLineNumbers title="React Native"

const view = await createOnboardingView(onboarding);

const unsubscribe = view.registerEventHandlers({
  onClose(actionId, meta) {
    await view.dismiss();
    return true;
  },
});
```

</TabItem>
</Tabs>

<Details>
<summary>Ejemplo de evento (Haz clic para expandir)</summary>

```json
{
  "action_id": "close_button",
  "meta": {
    "onboarding_id": "onboarding_123",
    "screen_cid": "final_screen",
    "screen_index": 3,
    "total_screens": 4
  }
}
```
</Details>

### Abrir un paywall \{#opening-a-paywall\}

:::tip
Maneja este evento para abrir un paywall si quieres abrirlo dentro del onboarding. Si prefieres abrirlo después de que se cierre, hay una forma más directa: maneja la acción de cierre y abre el paywall sin depender de los datos del evento.
:::

Si el usuario pulsa un botón que abre un paywall, recibirás el ID de acción del botón que [configuraste manualmente](get-paid-in-onboardings). La forma más sencilla de trabajar con paywalls en onboardings es hacer que el ID de acción coincida con el ID del placement del paywall.

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

```typescript showLineNumbers title="React Native (TSX)"

function MyOnboarding({ onboarding }) {
  const onPaywall = useCallback<OnboardingEventHandlers['onPaywall']>((actionId, meta) => {
    openPaywall(actionId);
  }, []);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      onPaywall={onPaywall}
    />
  );
}

const openPaywall = async (placementId) => {
  // Implement your paywall opening logic here
};
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

Ten en cuenta que, en iOS, solo se puede mostrar una vista (paywall u onboarding) en pantalla al mismo tiempo. Si presentas un paywall encima de un onboarding, no podrás controlar el onboarding en segundo plano de forma programática. Si intentas cerrar el onboarding, se cerrará el paywall en su lugar, dejando el onboarding visible. Para evitarlo, cierra siempre la vista del onboarding antes de presentar el paywall.

```javascript showLineNumbers title="React Native"

const view = await createOnboardingView(onboarding);

const unsubscribe = view.setEventHandlers({
  onPaywall(actionId, meta) {
    view.dismiss().then(() => {
      openPaywall(actionId);
    });
  },
});

const openPaywall = async (placementId) => {
  // Implement your paywall opening logic here
};
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14">

Ten en cuenta que, en iOS, solo se puede mostrar una vista (paywall u onboarding) en pantalla al mismo tiempo. Si presentas un paywall encima de un onboarding, no podrás controlar el onboarding en segundo plano de forma programática. Si intentas cerrar el onboarding, se cerrará el paywall en su lugar, dejando el onboarding visible. Para evitarlo, cierra siempre la vista del onboarding antes de presentar el paywall.

```javascript showLineNumbers title="React Native"

const view = await createOnboardingView(onboarding);

const unsubscribe = view.registerEventHandlers({
  onPaywall(actionId, meta) {
    view.dismiss().then(() => {
      openPaywall(actionId);
    });
  },
});

const openPaywall = async (placementId) => {
  // Implement your paywall opening logic here
};
```

</TabItem>
</Tabs>

<Details>
<summary>Ejemplo de evento (Haz clic para expandir)</summary>

```json
{
    "action_id": "premium_offer_1",
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "pricing_screen",
        "screen_index": 2,
        "total_screens": 4
    }
}
```
</Details>

### Seguimiento de la navegación \{#tracking-navigation\}

Recibes un evento de análisis cuando se producen distintos eventos relacionados con la navegación durante el flujo del onboarding:

<Tabs groupId="version" queryString>
<TabItem value="new" label="SDK version 3.14 or later" default>

<Tabs groupId="presentation-method" queryString>
<TabItem value="platform" label="React component" default>

```typescript showLineNumbers title="React Native (TSX)"

function MyOnboarding({ onboarding }) {
  const onAnalytics = useCallback<OnboardingEventHandlers['onAnalytics']>((event, meta) => {
    trackEvent(event.name, meta.onboardingId);
  }, []);

  return (
    <AdaptyOnboardingView
      onboarding={onboarding}
      style={styles.container}
      onAnalytics={onAnalytics}
    />
  );
}
```

</TabItem>
<TabItem value="standalone" label="Modal presentation">

```javascript showLineNumbers title="React Native"

const view = await createOnboardingView(onboarding);

const unsubscribe = view.setEventHandlers({
  onAnalytics(event, meta) {
    trackEvent(event.name, meta.onboardingId);
  },
});
```

</TabItem>
</Tabs>

</TabItem>

<TabItem value="old" label="SDK version < 3.14">

```javascript showLineNumbers title="React Native"

const view = await createOnboardingView(onboarding);

const unsubscribe = view.registerEventHandlers({
  onAnalytics(event, meta) {
    trackEvent(event.name, meta.onboardingId);
  },
});
```

</TabItem>
</Tabs>

El objeto `event` puede ser uno de los siguientes tipos:

| Tipo | Descripción |
|------------|-------------|
| `onboardingStarted` | Cuando el onboarding ha terminado de cargarse |
| `screenPresented` | Cuando se muestra cualquier pantalla |
| `screenCompleted` | Cuando se completa una pantalla. Incluye `elementId` opcional (identificador del elemento completado) y `reply` opcional (respuesta del usuario). Se dispara cuando el usuario realiza cualquier acción para salir de la pantalla. |
| `secondScreenPresented` | Cuando se muestra la segunda pantalla |
| `userEmailCollected` | Se dispara cuando se recoge el correo electrónico del usuario mediante el campo de entrada |
| `onboardingCompleted` | Se dispara cuando el usuario llega a una pantalla con el ID `final`. Si necesitas este evento, [asigna el ID `final` a la última pantalla](design-onboarding). |
| `unknown` | Para cualquier tipo de evento no reconocido. Incluye `name` (el nombre del evento desconocido) y `meta` (metadatos adicionales) |

Cada evento incluye información `meta` con los siguientes campos:

| Campo | Descripción |
|------------|-------------|
| `onboardingId` | Identificador único del flujo de onboarding |
| `screenClientId` | Identificador de la pantalla actual |
| `screenIndex` | Posición de la pantalla actual en el flujo |
| `screensTotal` | Número total de pantallas en el flujo |

<Details>
<summary>Ejemplos de eventos (Haz clic para expandir)</summary>

```javascript
// onboardingStarted
{
  "name": "onboarding_started",
  "meta": {
    "onboarding_id": "onboarding_123",
    "screen_cid": "welcome_screen",
    "screen_index": 0,
    "total_screens": 4
  }
}

// screenPresented
{
    "name": "screen_presented",
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "interests_screen",
        "screen_index": 2,
        "total_screens": 4
    }
}

// screenCompleted
{
    "name": "screen_completed",
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "profile_screen",
        "screen_index": 1,
        "total_screens": 4
    },
    "params": {
        "element_id": "profile_form",
        "reply": "success"
    }
}

// secondScreenPresented
{
    "name": "second_screen_presented",
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "profile_screen",
        "screen_index": 1,
        "total_screens": 4
    }
}

// userEmailCollected
{
    "name": "user_email_collected",
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "profile_screen",
        "screen_index": 1,
        "total_screens": 4
    }
}

// onboardingCompleted
{
    "name": "onboarding_completed",
    "meta": {
        "onboarding_id": "onboarding_123",
        "screen_cid": "final_screen",
        "screen_index": 3,
        "total_screens": 4
    }
}
```
</Details>

---


# File: react-native-onboarding-input
---

---
title: "Procesar datos de onboardings en el SDK de React Native"
description: "Guarda y usa datos de onboardings en tu app de React Native con el SDK de Adapty."
---

Cuando tus usuarios responden a una pregunta de un quiz o introducen datos en un campo de texto, se invocará el método `onStateUpdatedAction`. Puedes guardar o procesar el tipo de campo en tu código.

Por ejemplo:

```javascript
// Presentación a pantalla completa
const unsubscribe = view.registerEventHandlers({
  onStateUpdated(action, meta) {
    // Procesar datos 
  },
});

// Widget embebido
<AdaptyOnboardingView
  onboarding={onboarding}
  eventHandlers={{
    onStateUpdated(action, meta) {
      // Procesar datos 
    },
  }}
/>
```

Consulta el formato de la acción [aquí](https://react-native.adapty.io/types/onboardingstateupdatedaction).

<Details>
<summary>Ejemplos de datos guardados (el formato puede variar según tu implementación)</summary>

```javascript
// Ejemplo de una acción de selección guardada
{
    "elementId": "preference_selector",
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "preferences_screen",
        "screenIndex": 1,
        "screensTotal": 3
    },
    "params": {
        "type": "select",
        "value": {
            "id": "option_1",
            "value": "premium",
            "label": "Premium Plan"
        }
    }
}

// Ejemplo de una acción de selección múltiple guardada
{
    "elementId": "interests_selector",
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "interests_screen",
        "screenIndex": 2,
        "screensTotal": 3
    },
    "params": {
        "type": "multiSelect",
        "value": [
            {
                "id": "interest_1",
                "value": "sports",
                "label": "Sports"
            },
            {
                "id": "interest_2",
                "value": "music",
                "label": "Music"
            }
        ]
    }
}

// Ejemplo de una acción de entrada guardada
{
    "elementId": "name_input",
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "profile_screen",
        "screenIndex": 0,
        "screensTotal": 3
    },
    "params": {
        "type": "input",
        "value": {
            "type": "text",
            "value": "John Doe"
        }
    }
}

// Ejemplo de una acción de selector de fecha guardada
{
    "elementId": "birthday_picker",
    "meta": {
        "onboardingId": "onboarding_123",
        "screenClientId": "profile_screen",
        "screenIndex": 0,
        "screensTotal": 3
    },
"params": {
    "type": "datePicker",
    "value": {
        "day": 15,
        "month": 6,
        "year": 1990
        }
    }
}
```
</Details>

## Casos de uso \{#use-cases\}

### Enriquecer perfiles de usuario con datos \{#enrich-user-profiles-with-data\}

Si quieres vincular inmediatamente los datos introducidos con el perfil del usuario y evitar pedirle la misma información dos veces, debes [actualizar el perfil de usuario](react-native-setting-user-attributes) con esos datos al gestionar la acción.

Por ejemplo, si pides a los usuarios que introduzcan su nombre en el campo de texto con el ID `name` y quieres usar ese valor como su nombre de pila, y también les pides su correo electrónico en el campo `email`, en el código de tu app quedaría así:

```javascript showLineNumbers
// Presentación a pantalla completa
const unsubscribe = view.registerEventHandlers({
  onStateUpdated(action, meta) {
    // Guardar preferencias o respuestas del usuario
    if (action.elementType === 'input') {
      const profileParams = {};
      
      // Mapear elementId al campo de perfil correspondiente
      switch (action.elementId) {
        case 'name':
          if (action.value.type === 'text') {
            profileParams.firstName = action.value.value;
          }
          break;
        case 'email':
          if (action.value.type === 'email') {
            profileParams.email = action.value.value;
          }
          break;
      }
      
      // Actualizar el perfil si hay datos que actualizar
      if (Object.keys(profileParams).length > 0) {
        adapty.updateProfile(profileParams).catch(error => {
          // gestionar el error
        });
      }
    }
  },
});

// Widget embebido
<AdaptyOnboardingView
  onboarding={onboarding}
  eventHandlers={{
    onStateUpdated(action, meta) {
      // Guardar preferencias o respuestas del usuario
      if (action.elementType === 'input') {
        const profileParams = {};
        
        // Mapear elementId al campo de perfil correspondiente
        switch (action.elementId) {
          case 'name':
            if (action.value.type === 'text') {
              profileParams.firstName = action.value.value;
            }
            break;
          case 'email':
            if (action.value.type === 'email') {
              profileParams.email = action.value.value;
            }
            break;
        }
        
        // Actualizar el perfil si hay datos que actualizar
        if (Object.keys(profileParams).length > 0) {
          adapty.updateProfile(profileParams).catch(error => {
            // gestionar el error
          });
        }
      }
    },
  }}
/>
```

### Personalizar paywalls según las respuestas \{#customize-paywalls-based-on-answers\}

Usando quizzes en los onboardings, también puedes personalizar los paywalls que muestras a los usuarios cuando completan el onboarding.

Por ejemplo, puedes preguntarles sobre su experiencia con el deporte y mostrar distintos CTAs y productos a diferentes grupos de usuarios.

1. [Añade un quiz](onboarding-quizzes) en el constructor de onboarding y asigna IDs con significado a sus opciones.

2. Gestiona las respuestas del quiz según sus IDs y [establece atributos personalizados](react-native-setting-user-attributes) para los usuarios.

```javascript showLineNumbers
// Presentación a pantalla completa
const unsubscribe = view.registerEventHandlers({
  onStateUpdated(action, meta) {
    // Gestionar respuestas del quiz y establecer atributos personalizados
    if (action.elementType === 'select') {
      const profileParams = {};
      
      // Mapear respuestas del quiz a atributos personalizados
      switch (action.elementId) {
        case 'experience':
          // Establecer el atributo personalizado 'experience' con el valor seleccionado (beginner, amateur, pro)
          profileParams.codableCustomAttributes = {
            experience: action.value.value
          };
          break;
      }
      
      // Actualizar el perfil si hay datos que actualizar
      if (Object.keys(profileParams).length > 0) {
        adapty.updateProfile(profileParams).catch(error => {
          // gestionar el error
        });
      }
    }
  },
});

// Widget embebido
<AdaptyOnboardingView
  onboarding={onboarding}
  eventHandlers={{
    onStateUpdated(action, meta) {
      // Gestionar respuestas del quiz y establecer atributos personalizados
      if (action.elementType === 'select') {
        const profileParams = {};
        
        // Mapear respuestas del quiz a atributos personalizados
        switch (action.elementId) {
          case 'experience':
            // Establecer el atributo personalizado 'experience' con el valor seleccionado (beginner, amateur, pro)
            profileParams.codableCustomAttributes = {
              experience: action.value.value
            };
            break;
        }
        
        // Actualizar el perfil si hay datos que actualizar
        if (Object.keys(profileParams).length > 0) {
          adapty.updateProfile(profileParams).catch(error => {
            // gestionar el error
          });
        }
      }
    },
  }}
/>
```

3. [Crea segmentos](segments) para cada valor de atributo personalizado.
4. Crea un [placement](placements) y añade [audiencias](audience) para cada segmento que hayas creado.
5. [Muestra un paywall](react-native-paywalls) para el placement en el código de tu app. Si tu onboarding tiene un botón que abre un paywall, implementa el código del paywall como [respuesta a la acción de ese botón](react-native-handling-onboarding-events#opening-a-paywall).

---


# File: react-native-sdk-call-order
---

---
title: "Orden de llamadas en el SDK de React Native"
description: "Evita la pérdida de acceso premium, la atribución incompleta y los errores intermitentes #2002 llamando a los métodos del SDK de Adapty en el orden correcto."
---

`adapty.activate()` debe completarse antes de llamar a cualquier otro método del SDK de Adapty. Hasta que se resuelva, el SDK no tiene estado. Cualquier llamada realizada antes o en paralelo con `activate()` fallará con [`#2002 notActivated`](react-native-handle-errors#custom-network-codes).

Si tu app autentica usuarios y obtienes un customer user ID después del lanzamiento, llama a `adapty.identify()` en ese momento. No llames a métodos de acción del usuario hasta que `identify` se resuelva. Las llamadas que compiten con él fallan con [`#3006 profileWasChanged`](react-native-handle-errors#custom-network-codes) o aterrizan en el perfil anónimo creado durante la activación. Cuando esto ocurre, la atribución, los IDs de MMP como `appsflyer_id` y la propiedad de la instalación no siempre se transfieren al perfil identificado. Si tu app no autentica usuarios, omite `identify` y sigue trabajando con el perfil anónimo.

Los SDK de MMP y análisis (AppsFlyer, Adjust, Branch, PostHog) siguen la misma regla. Inicialízalos primero y espera sus callbacks de UID antes de llamar a `adapty.activate`. De lo contrario, el ID del MMP aterriza en un perfil anónimo temporal y no siempre se transfiere al identificado. Para más detalles sobre AppsFlyer, consulta [AppsFlyer](appsflyer).

## El orden correcto \{#the-correct-order\}

Tu ruta depende de dos cosas: cuándo conoces el customer user ID y si usas un SDK de MMP o análisis.

- **Pasos 2 y 5**: Obligatorios para todas las apps. Activa el SDK y luego llama a los métodos del SDK.
- **Pasos 1 y 3**: Requeridos solo si integras un SDK de MMP o análisis (AppsFlyer, Adjust, Branch, PostHog).
- **Paso 4**: Requerido solo si tu app autentica usuarios y recopila el customer user ID después del lanzamiento.

Si tienes el customer user ID al lanzar la app, pásalo directamente a `activate()` (paso 2a). Esta ruta nunca crea un perfil anónimo, por lo que el paso 4 no es necesario.

| Paso | Llamada                                                                                                       | Cuándo                                                                                  | Notas                                                                                          |
|------|---------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------|
| 1    | Inicializa tu SDK de MMP o análisis (AppsFlyer, Adjust, PostHog, Branch)                                      | Al lanzar la app, primero                                                               | Espera el callback de UID del MMP, por ejemplo `getAppsFlyerUID`.                              |
| 2a   | `adapty.activate('YOUR_PUBLIC_SDK_KEY', { customerUserId: 'YOUR_USER_ID' })`                                  | Al lanzar la app, después del paso 1, si tienes el customer user ID                    | Recomendado. Nunca se crea un perfil anónimo.                                                  |
| 2b   | `adapty.activate('YOUR_PUBLIC_SDK_KEY')` sin `customerUserId`                                                 | Al lanzar la app, después del paso 1, si no tienes el customer user ID (o nunca lo recopilas) | Adapty crea un perfil anónimo.                                                            |
| 3    | `adapty.updateAttribution(data, source, networkUserId)` para cada MMP                                         | Después del paso 2, antes de cualquier llamada de acción del usuario                   | Necesario para que los IDs de MMP lleguen al perfil correcto.                                  |
| 4    | `await adapty.identify('YOUR_USER_ID')`                                                                       | Después del paso 3 (o del paso 2 si no hay MMP), antes del paso 5 — solo en la ruta 2b con autenticación | Siempre usa `await`. Las llamadas concurrentes durante `identify` producen `#3006 profileWasChanged`. |
| 5    | `getPaywall`, `getPaywallProducts`, `restorePurchases`, `makePurchase`, `updateAttribution`, `updateProfile`  | Después del paso 4 si llamas a `identify`; de lo contrario, después del paso 3 (o del paso 2 si no hay MMP) | Estas llamadas necesitan un perfil estable.                                               |

:::important
Saltarse estos pasos provoca pérdida de acceso premium para usuarios que regresan, `appsflyer_id` ausente en los perfiles y paywalls devueltos para la audiencia incorrecta.
:::

## Instalaciones de web2app y web funnel \{#web2app-and-web-funnel-installs\}

Si los usuarios compran en un checkout web (Stripe, Paddle) y luego instalan la app nativa, el primer `activate()` del dispositivo crea un nuevo perfil anónimo. Este perfil no está vinculado al perfil web. Si puedes resolver el customer user ID antes del lanzamiento de la app (desde tu flujo de autenticación o el referrer de instalación), pásalo directamente a `activate()`. De lo contrario, la compra web será invisible en el dispositivo hasta que llames a `identify('YOUR_USER_ID')` y luego a `restorePurchases`.

Para los metadatos que debes enviar con cada checkout web, consulta:

- [Stripe](stripe)
- [Paddle](paddle)

---


# File: react-native-optimize-paywall-fetching
---

---
title: "Optimizar la carga de paywalls en React Native SDK"
description: "Carga paywalls de Adapty de forma fiable: temporización, caché y patrones de respaldo para React Native."
---

Una carga de paywall fiable en React Native hace tres cosas: renderiza rápido, devuelve el paywall dirigido a la audiencia correcta y activa el respaldo de forma elegante cuando la red va lenta. Las reglas a continuación cubren los patrones de temporización, caché y respaldo para lograrlo.

:::tip
Las reglas asumen que `adapty.activate()` y `adapty.identify()` ya se han resuelto. Consulta [Orden de llamadas en React Native SDK](react-native-sdk-call-order).
:::

## Reglas y errores comunes \{#rules-and-pitfalls\}

| Haz esto | No hagas esto | Por qué |
|---|---|---|
| Carga el placement que estás a punto de mostrar.                                                                                  | Precargues todos los placements de forma concurrente al inicio.        | La precarga masiva bloquea el hilo JS y produce una pantalla en negro durante la ráfaga.                                  |
| Llama a `getPaywall` después de que la atribución haya tenido oportunidad de resolverse — por ejemplo, 1–2 segundos después de `activate` o cuando se dispare `onProfileUpdate`. | Llames a `getPaywall` en el montaje del componente raíz. | La atribución aún no ha llegado. El paywall se resuelve contra la audiencia por defecto y omite silenciosamente los segmentos y la personalización de ASA. |
| Configura un `loadTimeoutMs` y un [paywall de respaldo](fallback-paywalls) para cada placement.                             | Esperes indefinidamente a `getPaywall`.                     | Sin tiempo de espera, los usuarios con mala conectividad ven una pantalla en blanco hasta que la red responde — o cierran la app.     |

Consulta [Obtener paywalls y productos](fetch-paywalls-and-products-react-native) para la referencia de los parámetros `fetchPolicy` y `loadTimeoutMs`, y [Placements](placements) para elegir el placement adecuado.

## Ajustar para mala conectividad \{#tune-for-poor-connectivity\}

Para mercados con conectividad constantemente deficiente (zonas rurales, transporte, regiones afectadas por enrutamiento):

- Establece `fetchPolicy: .returnCacheDataElseLoad` en cada carga excepto la primera.
- Configura un [paywall de respaldo](fallback-paywalls) para cada placement en el Adapty Dashboard.
- Establece `loadTimeoutMs` entre 3 y 5 segundos y acepta el respaldo cuando se agote el tiempo.
- No condicionar la visualización del paywall a `getProfile()`. Llama a `getPaywall` de forma independiente para que un perfil lento no bloquee la interfaz.

---


# File: react-native-test
---

---
title: "Prueba y lanzamiento en React Native SDK"
description: "Aprende cómo probar y lanzar tu aplicación React Native con el SDK de Adapty."
---

Si ya has implementado el SDK de Adapty en tu aplicación React Native, querrás comprobar que todo está configurado correctamente y que las compras funcionan según lo esperado tanto en iOS como en Android. Esto implica probar tanto la integración del SDK como el flujo de compra real con el entorno sandbox de Apple y el entorno de pruebas de Google Play.

## Prueba tu aplicación \{#test-your-app\}

Para hacer pruebas exhaustivas de tus compras in-app, consulta nuestras guías de pruebas por plataforma: [guía de pruebas para iOS](test-purchases-in-sandbox) y [guía de pruebas para Android](testing-on-android).

## Prepárate para el lanzamiento \{#prepare-for-release\}

Antes de enviar tu aplicación a la store, sigue la [lista de verificación para el lanzamiento](release-checklist) para confirmar que:

- La conexión con la store y las notificaciones del servidor están configuradas
- Las compras se completan y se registran en Adapty
- El acceso se desbloquea y se restaura correctamente
- Se cumplen los requisitos de privacidad y revisión

---


# File: InvalidProductIdentifiers-react-native
---

---
title: "Solución para el error Code-1000 noProductIDsFound en el SDK de React Native"
description: "Resuelve errores de identificador de producto no válido al gestionar suscripciones en Adapty."
---

El error con código 1000, `noProductIDsFound`, indica que ninguno de los productos que solicitaste en el paywall está disponible para su compra en el App Store, aunque aparezcan listados en él. Este error a veces viene acompañado de una advertencia `InvalidProductIdentifiers`. Si la advertencia aparece sin error, puedes ignorarla con tranquilidad.

Si estás encontrando el error `noProductIDsFound`, sigue estos pasos para resolverlo:

## Paso 1. Verifica el bundle ID \{#step-2-check-bundle-id\}

---
no_index: true 
---

1. Abre [App Store Connect](https://appstoreconnect.apple.com/apps). Selecciona tu app y ve a la sección **General** → **App Information**.

2. Copia el **Bundle ID** en la subsección **General Information**.

   

<Zoom>
  <img src="/docs/img/afd5012-bundle_id_apple.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>
</Zoom>

3. Abre la pestaña [**App settings** -> **iOS SDK**](https://app.adapty.io/settings/ios-sdk) desde el menú superior de Adapty y pega el valor copiado en el campo **Bundle ID**.

   

<Zoom>
  <img src="/docs/img/2d64163-bundle_id.webp"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>
</Zoom>

4. Vuelve a la página **App information** en App Store Connect y copia el **Apple ID** desde allí.
5. En la página [**App settings** -> **iOS SDK**](https://app.adapty.io/settings/ios-sdk) del Adapty Dashboard, pega el ID en el campo **Apple app ID**.

## Paso 2. Verifica los productos \{#step-3-check-products\}

1. Ve a **App Store Connect** y navega a [**Monetization** → **Subscriptions**](https://appstoreconnect.apple.com/apps/6477523342/distribution/subscriptions) en el menú de la izquierda.

 <img src="/assets/shared/img/subscription_group_open.webp"
 style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
 }}
  />

2. Haz clic en el nombre del grupo de suscripción. Verás tus productos listados en la sección **Subscriptions**.

3. Asegúrate de que el producto que estás probando esté marcado como **Ready to Submit**.
    
   <img src="/assets/shared/img/ready-to-submit.webp"
      style={{
        border: '1px solid #727272', /* border width and color */
        width: '700px', /* image width */
        display: 'block', /* for alignment */
        margin: '0 auto' /* center alignment */
      }}
    />
    

4. Compara el ID de producto de la tabla con el que aparece en la pestaña [**Products**](https://app.adapty.io/products) del Adapty Dashboard. Si los IDs no coinciden, copia el ID del producto de la tabla y [crea un producto](create-product) con ese ID en el Adapty Dashboard.

  

 <img src="/assets/shared/img/product-id-copy.webp"
 style={{
   border: '1px solid #727272', /* border width and color */
   width: '700px', /* image width */
   display: 'block', /* for alignment */
   margin: '0 auto' /* center alignment */
 }}
/>

## Paso 3. Verifica la disponibilidad del producto \{#step-4-check-product-availability\}

1. Vuelve a **App Store Connect** y abre la misma sección **Subscriptions**.

 
   <img src="/assets/shared/img/subscription_group_open.webp"
   style={{
     border: '1px solid #727272', /* border width and color */
     width: '700px', /* image width */
     display: 'block', /* for alignment */
     margin: '0 auto' /* center alignment */
   }}
    />
 

2. Haz clic en el nombre del grupo de suscripción para ver tus productos.

3. Selecciona el producto que estás probando.
   
   <img src="/assets/shared/img/click-product.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
     />
     

4. Desplázate hasta la sección **Availability** y comprueba que todos los países y regiones necesarios aparecen en la lista.

   
   <img src="/assets/shared/img/product-availability.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
     />
     

## Paso 4. Verifica los precios del producto \{#step-5-check-product-prices\}

1. De nuevo, ve a la sección **Monetization** → **Subscriptions** en **App Store Connect**.

 
   <img src="/assets/shared/img/subscription_group_open.webp"
   style={{
     border: '1px solid #727272', /* border width and color */
     width: '700px', /* image width */
     display: 'block', /* for alignment */
     margin: '0 auto' /* center alignment */
   }}
    />
 

2. Haz clic en el nombre del grupo de suscripción.

3. Selecciona el producto que estás probando.
    
    <img src="/assets/shared/img/click-product.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
    />
    

4. Desplázate hacia abajo hasta **Subscription Pricing** y despliega la sección **Current Pricing for New Subscribers**.
    
    <img src="/assets/shared/img/check-prices.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
    />
    

5. Asegúrate de que todos los precios necesarios aparecen en la lista.
    
    <img src="/assets/shared/img/product-pricing.webp"
    style={{
      border: '1px solid #727272', /* border width and color */
      width: '700px', /* image width */
      display: 'block', /* for alignment */
      margin: '0 auto' /* center alignment */
    }}
    />
    

    

## Paso 5. Verifica que el estado de pago de la app, la cuenta bancaria y los formularios fiscales estén activos \{#step-5-check-app-paid-status-bank-account-and-tax-forms-are-active\}

1. En la página de inicio de [**App Store Connect**](https://appstoreconnect.apple.com/), haz clic en **Business**.

    
        <img src="/assets/shared/img/business.webp"
    style={{
        border: '1px solid #727272', /* border width and color */
        width: '700px', /* image width */
        display: 'block', /* for alignment */
        margin: '0 auto' /* center alignment */
    }}
    />
    

2. Selecciona el nombre de tu empresa.

    
        <img src="/assets/shared/img/business-name.webp"
    style={{
        border: '1px solid #727272', /* border width and color */
        width: '700px', /* image width */
        display: 'block', /* for alignment */
        margin: '0 auto' /* center alignment */
    }}
    />
    

3. Desplázate hacia abajo y comprueba que tu **Paid Apps Agreement**, **Bank Account** y **Tax forms** muestran el estado **Active**.

    
        <img src="/assets/shared/img/appstore-connect-status.webp"
    style={{
        border: '1px solid #727272', /* border width and color */
        width: '700px', /* image width */
        display: 'block', /* for alignment */
        margin: '0 auto' /* center alignment */
    }}
    />
    

Siguiendo estos pasos deberías poder resolver la advertencia `InvalidProductIdentifiers` y publicar tus productos en el store.

## Paso 6. Recrea el producto si está bloqueado \{#step-6-recreate-the-product-if-its-stuck\}

Los pasos 1 a 5 pueden superarse correctamente —estado `Approved`, Bundle ID coincidente, API key válida— y aun así el SDK devuelve `1000 noProductIDsFound`. En ese caso, es posible que el producto esté bloqueado en el registro de Apple. El registro de productos de Apple puede entrar ocasionalmente en un estado en el que un producto existe en la interfaz de App Store Connect pero no está expuesto en la ruta de búsqueda de StoreKit.

Elimina el producto en App Store Connect y vuelve a crearlo con el mismo ID de producto. Espera hasta 24 horas tras la recreación para que los cambios se propaguen.

---


# File: cantMakePayments-react-native
---

---
title: "Solución para el error Code-1003 cantMakePayment en el SDK de React Native"
description: "Resuelve el error de pago al gestionar suscripciones en Adapty."
---

El error 1003, `cantMakePayments`, indica que no es posible realizar compras in-app en este dispositivo.

Si encuentras el error `cantMakePayments`, normalmente se debe a una de estas razones:

- Restricciones del dispositivo: El error no está relacionado con Adapty. Consulta las soluciones más abajo.
- Configuración del modo Observer: El método `makePurchase` y el modo Observer no pueden usarse al mismo tiempo. Consulta la sección más abajo.

## Problema: Restricciones del dispositivo \{#issue-device-restrictions\}

| Problema                       | Solución                                                                                                                                    |
|-------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------|
| Restricciones de Screen Time  | Desactiva las restricciones de compras in-app en [Screen Time](https://support.apple.com/en-us/102470) |
| Cuenta suspendida             | Contacta con el soporte de Apple para resolver problemas con la cuenta                                                                      |
| Restricciones regionales      | Usa una cuenta de App Store de una región compatible                                                                                        |

## Problema: Usar el modo Observer y makePurchase a la vez \{#issue-using-both-observer-mode-and-makepurchase\}

Si usas `makePurchases` para gestionar las compras, no necesitas el modo Observer. El [modo Observer](observer-vs-full-mode) solo es necesario si implementas la lógica de compra tú mismo.

Por lo tanto, si usas `makePurchase`, puedes eliminar sin problema la activación del modo Observer del código de inicialización del SDK.

---


# File: migration-react-native-314
---

---
title: "Migrar el SDK de Adapty React Native a la versión 3.14"
description: "Migra al SDK de Adapty React Native v3.14 para mejorar el rendimiento y acceder a nuevas funciones de monetización."
---

El SDK de Adapty React Native 3.14.0 es una versión mayor que introduce mejoras que requieren pasos de migración de tu parte:

- El método `registerEventHandlers` ha sido reemplazado por el método `setEventHandlers`.
- En `AdaptyOnboardingView`, los manejadores de eventos ahora se pasan como props individuales en lugar de un objeto `eventHandlers`
- Se ha introducido un nuevo estilo de importación simplificado para los componentes de UI
- El método `logShowOnboarding` ha sido eliminado
- La versión mínima de React Native se ha actualizado a 0.73.0
- El estilo de presentación predeterminado de iOS para paywalls y onboardings ha cambiado de hoja de página a pantalla completa

## Reemplaza `registerEventHandlers` por `setEventHandlers` \{#replace-registereventhandlers-with-seteventhandlers\}

El método `registerEventHandlers` utilizado para trabajar con el Paywall Builder y el Onboarding Builder de Adapty ha sido reemplazado por el método `setEventHandlers`.
Si usas el Paywall Builder y/o el Onboarding Builder de Adapty, busca `registerEventHandlers` en el código de tu app y reemplázalo por `setEventHandlers`.

Este cambio se ha introducido para que el comportamiento del método sea más claro: los manejadores ahora funcionan de uno en uno porque cada uno devuelve `true`/`false`, y tener varios manejadores para un mismo evento hacía que el comportamiento resultante fuera confuso.

Ten en cuenta que al usar componentes de React como `AdaptyOnboardingView` o `AdaptyPaywallView`, no es necesario devolver `true`/`false` desde los manejadores de eventos, ya que controlas la visibilidad del componente mediante tu propia gestión de estado. Los valores de retorno solo son necesarios para la presentación de pantallas modales donde el SDK gestiona el ciclo de vida de la vista.

:::important
Llamar a `setEventHandlers` varias veces sobreescribirá los manejadores que proporciones, reemplazando tanto los predeterminados como los establecidos previamente para esos eventos específicos.
:::

```diff showLineNumbers 
- const unsubscribe = view.registerEventHandlers({
-    // your event handlers
- })

 const unsubscribe = view.setEventHandlers({
    // your event handlers
 })
``` 

## Actualiza las rutas de importación de los componentes de UI \{#update-import-paths-for-ui-components\}

El SDK de Adapty 3.14.0 introduce un estilo de importación simplificado para los componentes de UI. En lugar de importar desde `react-native-adapty/dist/ui`, ahora puedes importar directamente desde `react-native-adapty`.

El nuevo estilo de importación es más coherente con las prácticas estándar de React Native y hace que las declaraciones de importación sean más limpias. Si usas componentes de UI como `AdaptyPaywallView` o `AdaptyOnboardingView`, actualiza tus importaciones como se muestra a continuación:

```diff showLineNumbers
- import { AdaptyPaywallView } from 'react-native-adapty/dist/ui';
+ import { AdaptyPaywallView } from 'react-native-adapty';

- import { AdaptyOnboardingView } from 'react-native-adapty/dist/ui';
+ import { AdaptyOnboardingView } from 'react-native-adapty';

- import { createPaywallView } from 'react-native-adapty/dist/ui';
+ import { createPaywallView } from 'react-native-adapty';

- import { createOnboardingView } from 'react-native-adapty/dist/ui';
+ import { createOnboardingView } from 'react-native-adapty';
```

:::note
Por compatibilidad con versiones anteriores, el estilo de importación antiguo (`react-native-adapty/dist/ui`) sigue siendo compatible. Sin embargo, recomendamos usar el nuevo estilo de importación para mayor consistencia y claridad.
:::

## Actualiza los manejadores de eventos del onboarding en el componente de React \{#update-onboarding-event-handlers-in-the-react-component\}

Los manejadores de eventos para los onboardings se han movido fuera del objeto `eventHandlers` en `AdaptyOnboardingView`. Si estás mostrando onboardings con `AdaptyOnboardingView`, actualiza la estructura de manejo de eventos.

:::important
Ten en cuenta la forma en que recomendamos implementar los manejadores de eventos. Para evitar recrear objetos en cada renderizado, usa `useCallback` para las funciones que manejan eventos.
:::

```diff showLineNumbers
 import React, { useCallback } from 'react';
- import { AdaptyOnboardingView } from 'react-native-adapty/dist/ui';
+ import { AdaptyOnboardingView } from 'react-native-adapty';
+ import type { OnboardingEventHandlers } from 'react-native-adapty';
+
+ function MyOnboarding({ onboarding }) {
+   const onAnalytics = useCallback<OnboardingEventHandlers['onAnalytics']>((event, meta) => {}, []);
+   const onClose = useCallback<OnboardingEventHandlers['onClose']>((actionId, meta) => {}, []);
+   const onCustom = useCallback<OnboardingEventHandlers['onCustom']>((actionId, meta) => {}, []);
+   const onPaywall = useCallback<OnboardingEventHandlers['onPaywall']>((actionId, meta) => {}, []);
+   const onStateUpdated = useCallback<OnboardingEventHandlers['onStateUpdated']>((action, meta) => {}, []);
+   const onFinishedLoading = useCallback<OnboardingEventHandlers['onFinishedLoading']>((meta) => {}, []);
+   const onError = useCallback<OnboardingEventHandlers['onError']>((error) => {}, []);
+
   return (
     <AdaptyOnboardingView
       onboarding={onboarding}
       style={styles.container}
-       eventHandlers={{
-         onAnalytics(event, meta) { /* ... */ },
-         onClose(actionId, meta) { /* ... */ },
-         onCustom(actionId, meta) { /* ... */ },
-         onPaywall(actionId, meta) { /* ... */ },
-         onStateUpdated(action, meta) { /* ... */ },
-         onFinishedLoading(meta) { /* ... */ },
-         onError(error) { /* ... */ },
-       }}
+       onAnalytics={onAnalytics}
+       onClose={onClose}
+       onCustom={onCustom}
+       onPaywall={onPaywall}
+       onStateUpdated={onStateUpdated}
+       onFinishedLoading={onFinishedLoading}
+       onError={onError}
     />
   );
+ }
```

:::note
Por compatibilidad con versiones anteriores, el prop `eventHandlers` sigue siendo compatible, pero está obsoleto. Recomendamos migrar a props individuales de manejadores de eventos como se muestra arriba.
:::

## Elimina `logShowOnboarding` \{#delete-logshowonboarding\}

En el SDK de Adapty 3.14.0, hemos eliminado el método `logShowOnboarding` del SDK.
Si has estado usando este método, no estará disponible cuando actualices el SDK a la versión 3.14 o posterior.

En su lugar, puedes [crear onboardings en el constructor de onboardings sin código de Adapty](onboardings). Las analíticas de estos onboardings se registran automáticamente y tienes muchas opciones de personalización.

## Actualiza React Native \{#update-react-native\}

A partir del SDK de Adapty 3.14.0, la versión mínima compatible de React Native es 0.73.0. Si estás usando una versión anterior, actualiza React Native a la versión 0.73.0 o posterior para que tu experiencia con el SDK de Adapty sea consistente y fiable.

## Actualiza el estilo de presentación de iOS para paywalls y onboardings modales \{#update-ios-presentation-style-for-modal-paywalls-and-onboardings\}

En el SDK de Adapty 3.14.0, el estilo de presentación predeterminado de iOS para paywalls y onboardings mostrados con el método `view.present()` ha cambiado de hoja de página a pantalla completa.

Si quieres mantener el estilo de presentación de hoja de página anterior, pasa el parámetro `iosPresentationStyle` al método `present()`:

```typescript showLineNumbers title="React Native (TSX)"
try {
  await view.present({ iosPresentationStyle: 'page_sheet' });
} catch (error) {
  // handle the error
}
```

---


# File: react-native-migration-guide-380
---

---
title: "Migrar el SDK de Adapty React Native a v. 3.8"
description: "Migra al SDK de Adapty React Native v3.8 para obtener mejor rendimiento y nuevas funciones de monetización."
---

Adapty SDK 3.8.0 es una versión mayor que incorpora mejoras que, sin embargo, pueden requerir algunos pasos de migración por tu parte.

## Actualizar el tipo de entrada para obtener los parámetros del placement \{#update-input-type-for-getting-placement-params\}

`GetPaywallParamsInput` ha sido renombrado a `GetPlacementParamsInput`:

```diff showLineNumbers
- type GetPaywallParamsInput = {
+ type GetPlacementParamsInput = {
   placementId: string;
   locale?: string;
   fetchPolicy?: AdaptyPlacementFetchPolicy;
   loadTimeoutMs?: number;
 }
```

## Actualizar el método de respaldo \{#update-fallback-method\}

El método para configurar los respaldos ha sido actualizado, y el tipo para especificar las ubicaciones de respaldo ha sido renombrado:

```diff showLineNumbers
- adapty.setFallbackPaywalls(paywallsLocation: Input.FallbackPaywallsLocation);
+ adapty.setFallback(fileLocation: Input.FileLocation);
```

## Actualizar el acceso a las propiedades del paywall \{#update-paywall-property-access\}

Las siguientes propiedades han sido movidas de `AdaptyPaywall` a `AdaptyPlacement`:

```diff showLineNumbers
- paywall.abTestName
- paywall.audienceName
- paywall.revision
- paywall.placementId
+ paywall.placement.abTestName
+ paywall.placement.audienceName
+ paywall.placement.revision
+ paywall.placement.id
```

---


# File: migration-to-react-native-sdk-34
---

---
title: "Migrar el SDK de Adapty para React Native a v. 3.4"
description: "Migra al SDK de Adapty para React Native v3.4 para mejorar el rendimiento y acceder a nuevas funciones de monetización."
---

El SDK de Adapty 3.4.0 es una versión mayor que introduce mejoras que requieren pasos de migración por tu parte.

## Actualizar los archivos del paywall de respaldo \{#update-fallback-paywall-files\}

Actualiza los archivos del paywall de respaldo para garantizar la compatibilidad con la nueva versión del SDK:

1. [Descarga los archivos actualizados del paywall de respaldo](fallback-paywalls) desde el Adapty Dashboard.
2. [Reemplaza los paywalls de respaldo existentes en tu aplicación móvil](react-native-use-fallback-paywalls) con los nuevos archivos.

## Actualizar la implementación del Modo Observador \{#update-implementation-of-observer-mode\}

Si usas el Modo Observador, asegúrate de actualizar su implementación.

Anteriormente, se utilizaban diferentes métodos para reportar transacciones a Adapty. En la nueva versión, el método `reportTransaction` debe utilizarse de forma consistente tanto en Android como en iOS. Este método reporta explícitamente cada transacción a Adapty, asegurando que sea reconocida. Si se utilizó un paywall, pasa el ID de variación para vincular la transacción a él.

:::warning

**¡No omitas el reporte de transacciones!**
Si no llamas a `reportTransaction`, Adapty no reconocerá la transacción, no aparecerá en los análisis y no se enviará a las integraciones.

:::

```diff showLineNumbers 
- if (Platform.OS === 'android') {
-     try {
-         await adapty.restorePurchases();
-     } catch (error) {
-         // handle the error
-     }
- }

  const variationId = paywall.variationId;

  try {
      await adapty.reportTransaction(transactionId, variationId);
  } catch (error) {
      // handle the `AdaptyError`
  }
```

---


# File: migration-to-react-native330
---

---
title: "Migrar el SDK de Adapty React Native a la v. 3.3"
description: "Migra al SDK de Adapty React Native v3.3 para mejorar el rendimiento y acceder a nuevas funciones de monetización."
---

Adapty SDK 3.3.1 es una versión mayor que incluye mejoras que pueden requerir algunos pasos de migración de tu parte.

1. Actualiza al SDK de Adapty v3.3.x.
2. Actualiza los modelos.
3. Elimina el método `getProductsIntroductoryOfferEligibility`.
4. Actualiza el proceso de compra.
5. Actualiza la presentación de paywalls del Paywall Builder.
6. Revisa la implementación del temporizador definido por el desarrollador.
7. Actualiza el manejo de eventos de compra del Paywall Builder.
8. Actualiza el manejo de eventos de acción personalizada del Paywall Builder.
9. Modifica el callback `onProductSelected`.
10. Elimina los parámetros de integración de terceros del método `updateProfile`.
11. Actualiza las configuraciones de integración para Adjust, AirBridge, Amplitude, AppMetrica, Appsflyer, Branch, Facebook Ads, Firebase y Google Analytics, Mixpanel, OneSignal y Pushwoosh.
12. Actualiza la implementación del modo Observer.

## Actualiza el SDK de Adapty React Native a 3.3.x \{#upgrade-adapty-react-native-sdk-to-33x\}

Antes de la versión 3.3.1, el SDK `react-native-adapty` era el SDK principal y obligatorio para que Adapty funcionara correctamente en tu app. El SDK `@adapty/react-native-ui` era opcional y solo era necesario si usabas el Paywall Builder de Adapty.

A partir de la versión 3.3.1, el SDK `@adapty/react-native-ui` está obsoleto y su funcionalidad se ha integrado en el SDK `react-native-adapty`. Para actualizar a la versión 3.3.1, sigue estos pasos:

1. Actualiza el paquete `react-native-adapty` a la versión 3.3.1.
2. Elimina el paquete `@adapty/react-native-ui` de las dependencias de tu proyecto.
3. Sincroniza las dependencias de tu proyecto para aplicar los cambios.

## Cambios en los modelos \{#changes-in-models\}

### Nuevos modelos \{#new-models\}

1. [AdaptySubscriptionOffer](https://react-native.adapty.io/interfaces/adaptysubscriptionoffer):

    ```typescript showLineNumbers
    export interface AdaptySubscriptionOffer {
      readonly identifier: AdaptySubscriptionOfferId;

      phases: AdaptyDiscountPhase[];

      android?: {
        offerTags?: string[];
      };
    }
    ```

2. [AdaptySubscriptionOfferId](https://react-native.adapty.io/types/adaptysubscriptionofferid):

    ```typescript showLineNumbers
    export type AdaptySubscriptionOfferId =
      | { id?: string; type: 'introductory'; }
      | { id: string; type: 'promotional' | 'win_back'; };
    ```

### Modelos modificados \{#changed-models\}

1. [AdaptyPaywallProduct](https://react-native.adapty.io/interfaces/adaptypaywallproduct):
   
    - Se renombró la propiedad `subscriptionDetails` a `subscription`.
      
      <p> </p>
      
     ```diff showLineNumbers
     -  subscriptionDetails?: AdaptySubscriptionDetails; 
     +  subscription?: AdaptySubscriptionDetails;
     ```
    
2. [AdaptySubscriptionDetails](https://react-native.adapty.io/interfaces/adaptysubscriptiondetails):

    - Se eliminó `promotionalOffer`. Ahora la oferta promocional se entrega dentro de la propiedad `offer` solo si está disponible. En ese caso, `offer?.identifier?.type` será `'promotional'`.

    - Se eliminó `introductoryOfferEligibility` (las ofertas solo se devuelven si el usuario es elegible).

    - Se eliminó `offerId`. El ID de la oferta ahora se almacena en `AdaptySubscriptionOffer.identifier`.

    - `offerTags` se movió a `AdaptySubscriptionOffer.android`.
      
      <p> </p>

    ```diff showLineNumbers
    -  introductoryOffers?: AdaptyDiscountPhase[];
    +  offer?: AdaptySubscriptionOffer;
    
       ios?: {
    -    promotionalOffer?: AdaptyDiscountPhase;
         subscriptionGroupIdentifier?: string;
       };
    
       android?: {
    -    offerId?: string;
         basePlanId: string;
    -    introductoryOfferEligibility: OfferEligibility;
    -    offerTags?: string[];
         renewalType?: 'prepaid' | 'autorenewable';
       };
     }
    ```
3. [AdaptyDiscountPhase](https://react-native.adapty.io/interfaces/adaptydiscountphase):
   
    - El campo `identifier` se eliminó del modelo `AdaptyDiscountPhase`. El identificador de la oferta ahora se almacena en `AdaptySubscriptionOffer.identifier`.
      
      <p> </p>
      
     ```diff showLineNumbers
     -  ios?: {
     -    readonly identifier?: string;
     -  };
     ```

### Modelos eliminados \{#remove-models\}

1. `AttributionSource`:
   - Ahora se usa un string en los lugares donde antes se usaba `AttributionSource`.
2. `OfferEligibility`:
   - Este modelo se ha eliminado porque ya no es necesario. Ahora, una oferta solo se devuelve si el usuario es elegible.

## Elimina el método `getProductsIntroductoryOfferEligibility` \{#remove-getproductsintroductoryoffereligibility-method\}

Antes del SDK de Adapty 3.3.1, los objetos de producto siempre incluían las ofertas, incluso si el usuario no era elegible. Esto requería verificar la elegibilidad manualmente antes de usar la oferta.

A partir de la versión 3.3.1, el objeto de producto incluye ofertas solo si el usuario es elegible. Esto simplifica el proceso, ya que puedes asumir que el usuario es elegible si hay una oferta presente.

## Actualiza el proceso de compra \{#update-making-purchase\}

En versiones anteriores, las compras canceladas y pendientes se trataban como errores y devolvían los códigos `2: 'paymentCancelled'` y `25: 'pendingPurchase'`, respectivamente.

A partir de la versión 3.3.1, las compras canceladas y pendientes se consideran resultados exitosos y deben manejarse en consecuencia:

```typescript showLineNumbers
try {
    const purchaseResult = await adapty.makePurchase(product);
    switch (purchaseResult.type) {
      case 'success':
        const isSubscribed = purchaseResult.profile?.accessLevels['YOUR_ACCESS_LEVEL']?.isActive;

        if (isSubscribed) {
          // Grant access to the paid features
        }
        break;
      case 'user_cancelled':
        // Handle the case where the user canceled the purchase
        break;
      case 'pending':
        // Handle deferred purchases (e.g., the user will pay offline with cash)
        break;
    }
} catch (error) {
    // Handle the error
}
```

## Actualiza la presentación de paywalls del Paywall Builder \{#update-paywall-builder-paywall-presentation\}

Para ver ejemplos actualizados, consulta la documentación [Presentar paywalls nuevos del Paywall Builder en React Native](react-native-present-paywalls).

```diff showLineNumbers
- import { createPaywallView } from '@adapty/react-native-ui';
+ import { createPaywallView } from 'react-native-adapty/dist/ui';

const view = await createPaywallView(paywall);

view.registerEventHandlers(); // handle close press, etc

try {
  await view.present();
} catch (error) {
  // handle the error
}
```

## Actualiza la implementación del temporizador definido por el desarrollador \{#update-developer-defined-timer-implementation\}

Renombra el parámetro `timerInfo` a `customTimers`:

```diff showLineNumbers
- let timerInfo = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) }
+ let customTimers = { 'CUSTOM_TIMER_NY': new Date(2025, 0, 1) }
 //and then you can pass it to createPaywallView as follows:
- view = await createPaywallView(paywall, { timerInfo })
+ view = await createPaywallView(paywall, { customTimers })
```

## Modifica los eventos de compra del Paywall Builder \{#modify-paywall-builder-purchase-events\}

Antes:

- Las compras canceladas activaban el callback `onPurchaseCancelled`.
- Las compras pendientes devolvían el código de error `25: 'pendingPurchase'`.

Ahora:

- Ambas se manejan mediante el callback `onPurchaseCompleted`.

#### Pasos para migrar: \{#steps-to-migrate\}

1. Elimina el callback `onPurchaseCancelled`.
2. Elimina el manejo del código de error `25: 'pendingPurchase'`.
3. Actualiza el callback `onPurchaseCompleted`:

```typescript showLineNumbers

const view = await createPaywallView(paywall);

const unsubscribe = view.registerEventHandlers({
  // ... other optional callbacks
  onPurchaseCompleted(purchaseResult, product) {
    switch (purchaseResult.type) {
      case 'success':
        const isSubscribed = purchaseResult.profile?.accessLevels['YOUR_ACCESS_LEVEL']?.isActive;

        if (isSubscribed) {
          // Grant access to the paid features
        }
        break;
// highlight-start
      case 'user_cancelled':
        // Handle the case where the user canceled the purchase
        break;
      case 'pending':
        // Handle deferred purchases (e.g., the user will pay offline with cash)
        break;
// highlight-end
    }
// highlight-start
    return purchaseResult.type !== 'user_cancelled';
// highlight-end
  },
});
```

## Modifica los eventos de acción personalizada del Paywall Builder \{#modify-paywall-builder-custom-action-events\}

Callbacks eliminados:

-  `onAction`
-  `onCustomEvent`

Callback añadido:

- Nuevo callback `onCustomAction(actionId)`. Úsalo para acciones personalizadas.

## Modifica el callback `onProductSelected` \{#modify-onproductselected-callback\}

Antes, `onProductSelected` requería el objeto `product`. Ahora requiere `productId` como string.

## Elimina los parámetros de integración de terceros del método `updateProfile` \{#remove-third-party-integration-parameters-from-updateprofile-method\}

Los identificadores de integración de terceros ahora se configuran con el método `setIntegrationIdentifier`. El método `updateProfile` ya no los acepta.

## Actualiza la configuración del SDK de integraciones de terceros \{#update-third-party-integration-sdk-configuration\}

Para garantizar que las integraciones funcionen correctamente con el SDK de Adapty React Native 3.3.1 y versiones posteriores, actualiza las configuraciones de tu SDK para las siguientes integraciones según se describe en las secciones a continuación.

Además, si usabas `AttributionSource` para obtener el identificador de atribución, cambia tu código para proporcionar el identificador requerido como string.

### Adjust \{#adjust\}

Actualiza el código de tu app móvil como se muestra a continuación. Para ver el ejemplo de código completo, consulta la [configuración del SDK para la integración con Adjust](adjust#connect-your-app-to-adjust).

```diff showLineNumbers
 import { Adjust, AdjustConfig } from "react-native-adjust";
 import { adapty } from "react-native-adapty";

 var adjustConfig = new AdjustConfig(appToken, environment);

 // Before submiting Adjust config...
 adjustConfig.setAttributionCallbackListener(attribution => {
   // Make sure Adapty SDK is activated at this point
   // You may want to lock this thread awaiting of `activate`
   adapty.updateAttribution(attribution, "adjust");
 });

 // ...
 Adjust.create(adjustConfig);

+ Adjust.getAdid((adid) => {
+   if (adid)
+     adapty.setIntegrationIdentifier("adjust_device_id", adid);
+ });
```

### AirBridge \{#airbridge\}

Actualiza el código de tu app móvil como se muestra a continuación. Para ver el ejemplo de código completo, consulta la [configuración del SDK para la integración con AirBridge](airbridge#connect-your-app-to-airbridge).

```diff showLineNumbers
 import Airbridge from 'airbridge-react-native-sdk';
 import { adapty } from 'react-native-adapty';

 try {
   const deviceId = await Airbridge.state.deviceUUID();

-  await adapty.updateProfile({
-    airbridgeDeviceId: deviceId,
-  });
+  await adapty.setIntegrationIdentifier("airbridge_device_id", deviceId);
 } catch (error) {
   // handle `AdaptyError`
 }
```

### Amplitude \{#amplitude\}

Actualiza el código de tu app móvil como se muestra a continuación. Para ver el ejemplo de código completo, consulta la [configuración del SDK para la integración con Amplitude](amplitude#sdk-configuration).

```diff showLineNumbers
  import { adapty } from 'react-native-adapty';

 try {
-   await adapty.updateProfile({
-     amplitudeDeviceId: deviceId,
-     amplitudeUserId: userId,
-   });
+   await adapty.setIntegrationIdentifier("amplitude_device_id", deviceId);
+   await adapty.setIntegrationIdentifier("amplitude_user_id", userId);
 } catch (error) {
   // handle `AdaptyError`
 }
```

### AppMetrica \{#appmetrica\}

Actualiza el código de tu app móvil como se muestra a continuación. Para ver el ejemplo de código completo, consulta la [configuración del SDK para la integración con AppMetrica](appmetrica#sdk-configuration).

```diff showLineNumbers
 import { adapty } from 'react-native-adapty';
 import AppMetrica, { DEVICE_ID_KEY, StartupParams, StartupParamsReason } from '@appmetrica/react-native-analytics';

 // ...
 const startupParamsCallback = async (
   params?: StartupParams,
   reason?: StartupParamsReason
 ) => {
   const deviceId = params?.deviceId
   if (deviceId) {
     try {
-       await adapty.updateProfile({
-         appmetricaProfileId: 'YOUR_ADAPTY_CUSTOMER_USER_ID',
-         appmetricaDeviceId: deviceId,
-       });
+       await adapty.setIntegrationIdentifier("appmetrica_profile_id", 'YOUR_ADAPTY_CUSTOMER_USER_ID');
+       await adapty.setIntegrationIdentifier("appmetrica_device_id", deviceId);
     } catch (error) {
       // handle `AdaptyError`
     }
   }
 }

 AppMetrica.requestStartupParams(startupParamsCallback, [DEVICE_ID_KEY])
```

### AppsFlyer \{#appsflyer\}

Actualiza el código de tu app móvil como se muestra a continuación. Para ver el ejemplo de código completo, consulta la [configuración del SDK para la integración con AppsFlyer](appsflyer#connect-your-app-to-appsflyer).

```diff showLineNumbers
 import { adapty, AttributionSource } from 'react-native-adapty';
 import appsFlyer from 'react-native-appsflyer';

 appsFlyer.onInstallConversionData(installData => {
     try {
-        const networkUserId = appsFlyer.getAppsFlyerUID();
-        adapty.updateAttribution(installData, AttributionSource.AppsFlyer, networkUserId);
+        const uid = appsFlyer.getAppsFlyerUID();
+        adapty.setIntegrationIdentifier("appsflyer_id", uid);
+        adapty.updateAttribution(installData, "appsflyer");
     } catch (error) {
         // handle the error
     }
 });

 // ...
 appsFlyer.initSdk(/*...*/);
```

### Branch \{#branch\}

Actualiza el código de tu app móvil como se muestra a continuación. Para ver el ejemplo de código completo, consulta la [configuración del SDK para la integración con Branch](branch#connect-your-app-to-branch).

```diff showLineNumbers
 import { adapty, AttributionSource } from 'react-native-adapty';
 import branch from 'react-native-branch';

 branch.subscribe({
   enComplete: ({
     params,
   }) => {
-    adapty.updateAttribution(params, AttributionSource.Branch);
+    adapty.updateAttribution(params, "branch");
   },
 });
```

### Facebook Ads \{#facebook-ads\}

Actualiza el código de tu app móvil como se muestra a continuación. Para ver el ejemplo de código completo, consulta la [configuración del SDK para la integración con Facebook Ads](facebook-ads#connect-your-app-to-facebook-ads).

```diff showLineNumbers
 import { adapty } from 'react-native-adapty';
 import { AppEventsLogger } from 'react-native-fbsdk-next';

 try {
   const anonymousId = await AppEventsLogger.getAnonymousID();

-  await adapty.updateProfile({
-    facebookAnonymousId: anonymousId,
-  });
+  await adapty.setIntegrationIdentifier("facebook_anonymous_id", anonymousId);
 } catch (error) {
   // handle `AdaptyError`
 }
```

### Firebase y Google Analytics \{#firebase-and-google-analytics\}

Actualiza el código de tu app móvil como se muestra a continuación. Para ver el ejemplo de código completo, consulta la [configuración del SDK para la integración con Firebase y Google Analytics](firebase-and-google-analytics).

```diff showLineNumbers
 import analytics from '@react-native-firebase/analytics';
 import { adapty } from 'react-native-adapty';

 try {
   const appInstanceId = await analytics().getAppInstanceId();

-   await adapty.updateProfile({
-     firebaseAppInstanceId: appInstanceId,
-   });
+   await adapty.setIntegrationIdentifier("firebase_app_instance_id", appInstanceId);
 } catch (error) {
   // handle `AdaptyError`
 }
```

### Mixpanel \{#mixpanel\}

Actualiza el código de tu app móvil como se muestra a continuación. Para ver el ejemplo de código completo, consulta la [configuración del SDK para la integración con Mixpanel](mixpanel#sdk-configuration).

```diff showLineNumbers
 import { adapty } from 'react-native-adapty';
 import { Mixpanel } from 'mixpanel-react-native';

 // ...
 try {
-   await adapty.updateProfile({
-     mixpanelUserId: mixpanelUserId,
-   });
+   await adapty.setIntegrationIdentifier("mixpanel_user_id", mixpanelUserId);
 } catch (error) {
   // handle `AdaptyError`
 }
```

### OneSignal \{#onesignal\}

Actualiza el código de tu app móvil como se muestra a continuación. Para ver el ejemplo de código completo, consulta la [configuración del SDK para la integración con OneSignal](onesignal#sdk-configuration).

<Tabs groupId="current-os" queryString> 

<TabItem value="v5+" label="OneSignal SDK v5+ (current)" default> 

```diff showLineNumbers
 import { adapty } from 'react-native-adapty';
 import OneSignal from 'react-native-onesignal';

 OneSignal.User.pushSubscription.addEventListener('change', (subscription) => {
   const subscriptionId = subscription.current.id;

   if (subscriptionId) {
-    adapty.updateProfile({
-      oneSignalSubscriptionId: subscriptionId,
-    });
+    adapty.setIntegrationIdentifier("one_signal_subscription_id", subscriptionId);
   }
 });
```

 </TabItem> 

<TabItem value="pre-v5" label="OneSignal SDK v. up to 4.x (legacy)" default> 

```diff showLineNumbers
 import { adapty } from 'react-native-adapty';
 import OneSignal from 'react-native-onesignal';

 OneSignal.addSubscriptionObserver(event => {
   const playerId = event.to.userId;
   
-  adapty.updateProfile({
-    oneSignalPlayerId: playerId,
-  });
+  adapty.setIntegrationIdentifier("one_signal_player_id", playerId);
 });
```

 </TabItem> 

</Tabs>

### Pushwoosh \{#pushwoosh\}

Actualiza el código de tu app móvil como se muestra a continuación. Para ver el ejemplo de código completo, consulta la [configuración del SDK para la integración con Pushwoosh](pushwoosh#sdk-configuration).

```diff showLineNumbers
 import { adapty } from 'react-native-adapty';
 import Pushwoosh from 'pushwoosh-react-native-plugin';

 // ...
 try {
-  await adapty.updateProfile({
-    pushwooshHWID: hwid,
-  });
+  await adapty.setIntegrationIdentifier("pushwoosh_hwid", hwid);
 } catch (error) {
   // handle `AdaptyError`
 }
```

## Actualiza la implementación del modo Observer \{#update-observer-mode-implementation\}

Actualiza la forma en que vinculas los paywalls a las transacciones. Antes, usabas el método `setVariationId` para asignar el `variationId`. Ahora puedes incluir el `variationId` directamente al registrar la transacción con el nuevo método `reportTransaction`. Consulta el ejemplo de código final en [Asociar paywalls con transacciones de compra en el modo Observer](report-transactions-observer-mode-react-native).

:::warning

No olvides registrar la transacción con el método `reportTransaction`. Si omites este paso, Adapty no reconocerá la transacción, no otorgará niveles de acceso, no la incluirá en los análisis ni la enviará a las integraciones. ¡Este paso es imprescindible!

:::

:::note

Ten en cuenta que el orden de los parámetros del método `reportTransaction` es diferente al del método `setVariationId`.

:::

```diff showLineNumbers
  const variationId = paywall.variationId;

 try {
-    await adapty.setVariationId(variationId, transactionId);
+    await adapty.reportTransaction(transactionId, variationId);
 } catch (error) {
     // handle the `AdaptyError`
 }

```

---


# File: migration-to-react-native-sdk-v3
---

---
title: "Migrar el SDK de Adapty para React Native a la versión 3.0"
description: "Migra al SDK de Adapty para React Native v3.0 para un mejor rendimiento y nuevas funciones de monetización."
---

El SDK de Adapty v.3.0 incluye compatibilidad con el nuevo y emocionante [Adapty Paywall Builder](adapty-paywall-builder), la nueva versión de la herramienta no-code y fácil de usar para crear paywalls. Con su máxima flexibilidad y ricas capacidades de diseño, tus paywalls serán más efectivos y rentables.

## Actualizar a la versión 3.0.1 \{#upgrade-to-version-301\}

1. Actualiza a la versión 3.0.1 como de costumbre.
2. Reemplaza los archivos de paywall de respaldo:
   1. [Descarga la versión más reciente](fallback-paywalls) desde el Adapty Dashboard.
   2. Guárdalos en el dispositivo del usuario y pásalos al método `.setFallbackPaywalls` tal como se describe [aquí](react-native-use-fallback-paywalls).

---


# End of Documentation

_Generated on: 2026-05-15T20:13:57.622Z_
_Successfully processed: 40/40 files_