Integra Adapty en tu app React Native con ayuda de IA

Esta guía te lleva paso a paso por la integración de Adapty en tu app de React Native con una herramienta de codificación con IA: le proporcionas la documentación correcta de Adapty en el orden correcto.

Antes de empezar: configuración del dashboard

Adapty necesita algo de configuración en el dashboard antes de que escribas código con el SDK. Puedes hacerlo con una skill interactiva de LLM o manualmente desde el Dashboard.

Enfoque con skill (recomendado)

El skill de 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 necesitas conectar tus stores en el Dashboard.

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

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

Enfoque desde el dashboard

Si prefieres configurar todo de forma manual, esto es lo que necesitas antes de escribir código. Tu LLM no puede buscar los valores del dashboard por ti — tendrás que proporcionarlos.

Conecta tus app stores: En el Adapty Dashboard, ve a App settings → General. Conecta tanto App Store como Google Play si tu app tiene como destino ambas plataformas. Esto es necesario para que las compras funcionen. Conecta los app stores
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, es la cadena que pasas a adapty.activate("YOUR_PUBLIC_SDK_KEY").
Crea al menos un producto: En el Adapty Dashboard, ve a la página Products. No referencias los productos directamente en el código — Adapty los entrega a través de paywalls. Añadir productos
Crea un paywall y un placement: En el Adapty Dashboard, crea un paywall en la página Paywalls y luego 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
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 es profile.accessLevels['premium']?.isActive. El nivel de acceso premium predeterminado funciona para la mayoría de las apps. Si los usuarios de pago acceden a funciones distintas según el producto (por ejemplo, un plan basic frente a un plan pro), crea niveles de acceso adicionales antes de empezar a programar.

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 paywall correctamente.

Configura cuando estés listo

Estos pasos no son necesarios para empezar a programar, pero los necesitarás a medida que tu integración madure:

Pruebas A/B: Configúralas en la página Placements. No se requieren cambios en el código. Pruebas A/B
Paywalls y placements adicionales: Añade más llamadas getPaywall con distintos IDs de placement.
Integraciones de analíticas: Configúralas en la página Integrations. La configuración varía según la integración. Consulta integraciones de analíticas e integraciones de atribución.

Proporciona la documentación de Adapty a tu LLM

Usar Context7 (recomendado)

Context7 es un servidor MCP que da a tu LLM acceso directo a la documentación actualizada de Adapty. Tu LLM obtiene automáticamente la documentación correcta 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. 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

Aunque Context7 elimina la necesidad de pegar enlaces de documentación manualmente, el orden de implementación es importante. Sigue el recorrido de implementación paso a paso para asegurarte de que todo funciona correctamente.

Usa los documentos en texto plano

Puedes acceder a cualquier documento de Adapty en texto plano Markdown. 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.

Cada etapa del recorrido de implementación a continuación incluye un bloque “Send this to your LLM” con enlaces .md para pegar.

Para acceder a más documentación de una vez, consulta los archivos de índice y subconjuntos por plataforma a continuación.

Guía de implementación paso a paso

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

Planifica tu integración

Antes de escribir código, pídele a tu LLM que analice tu proyecto y cree un plan de implementación. Si tu herramienta de IA tiene un modo de planificación (como el modo plan 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 generar cualquier código.

Dile a tu LLM qué enfoque usas para las compras, ya que esto determina qué guías debe seguir:

Adapty Paywall Builder: Creas paywalls en el editor sin código de Adapty y el SDK los renderiza automáticamente.
Paywalls creados manualmente: Construyes tu propia interfaz de paywall en código, pero sigues usando Adapty para obtener productos y gestionar compras.
Modo observer: Mantienes tu infraestructura de compras existente y usas Adapty solo para análisis e integraciones.

¿No sabes cuál elegir? Consulta la tabla comparativa en la guía de inicio rápido.

Instalar y configurar el SDK

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

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

Guías:

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

Checkpoint

Esperado: La app se compila y ejecuta tanto en iOS como en Android. Los logs de Metro bundler muestran el log de activación de Adapty.
Error frecuente: “Public API key is missing” → comprueba que hayas reemplazado el marcador de posición con tu clave real desde App settings.

Mostrar paywalls y gestionar compras

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

Prueba cada compra en el sandbox a medida que avanzas — no esperes hasta el final. Consulta Probar compras en sandbox para ver las instrucciones de configuración.

Guías:

Checkpoint

Esperado: El paywall aparece con los productos configurados. Al tocar un producto, se activa el diálogo de compra sandbox.
Problema habitual: Paywall vacío o error en getPaywall → verifica que el ID del placement coincida exactamente con el dashboard y que el placement tenga una audiencia asignada.

Guías:

Activar compras en tu paywall personalizado (inicio rápido)
Obtener paywalls y productos
Renderizar paywall diseñado con Remote Config
Realizar compras
Restaurar compras 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

Checkpoint

Expected: Tu paywall personalizado muestra los productos obtenidos desde Adapty. Al pulsar un producto, se activa el diálogo de compra en sandbox.
Gotcha: Array de productos vacío → verifica que el paywall tenga productos asignados en el dashboard y que el placement tenga una audiencia.

Comprobar el estado de la suscripción

Tras una compra, consulta el perfil del usuario para verificar si tiene un nivel de acceso activo y así controlar el acceso al contenido premium.

Guía: Comprobar el estado de la suscripción

Envía esto a tu LLM:

Read these Adapty docs before writing code:
- https://adapty.io/docs/es/react-native-check-subscription-status.md

Checkpoint

Resultado esperado: Tras una compra en sandbox, profile.accessLevels['premium']?.isActive devuelve true.
Problema frecuente: accessLevels vacío después de la compra → comprueba que el producto tenga un nivel de acceso asignado en el dashboard.

Identificar usuarios

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

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

Guía: Identificar usuarios

Envía esto a tu LLM:

Read these Adapty docs before writing code:
- https://adapty.io/docs/es/react-native-quickstart-identify.md

Checkpoint

Esperado: Después de 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 los paywalls para evitar que la atribución quede en un perfil anónimo.

Preparativos para el lanzamiento

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

Guía: Checklist de lanzamiento

Envía esto a tu LLM:

Read these Adapty docs before releasing:
- https://adapty.io/docs/es/release-checklist.md

Checkpoint

Expected: Todos los elementos del checklist confirmados: conexiones con el store, notificaciones del servidor, flujo de compra, comprobación de niveles de acceso y requisitos de privacidad.
Gotcha: 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

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

llms.txt: Lista todas las páginas con enlaces .md. Un estándar emergente para hacer sitios web accesibles a LLMs. Ten en cuenta que para algunos agentes de IA (p. ej., ChatGPT) tendrás que descargar llms.txt y subirlo al chat como archivo.
llms-full.txt: Toda la documentación de Adapty combinada en un único archivo. Muy grande — úsalo solo cuando necesites una visión completa.
react-native-llms.txt y react-native-llms-full.txt específicos de React Native: subconjuntos por plataforma que ahorran tokens en comparación con el sitio completo.