Integra Adapty en tu app de React Native con ayuda 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)

La skill adapty-sdk-integration 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

Elige el formato según tu herramienta. La lista completa está en el README de la 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

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.

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

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)

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

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

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
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").
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
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
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 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 paywalls correcto.

Configurar cuando estés listo

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
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 e integraciones de atribución.

Dale documentación de Adapty a tu LLM

Usa Context7 (recomendado)

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

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 a la documentación manualmente, el orden de implementación es importante. Sigue el tutorial de implementación que aparece a continuación paso a paso para asegurarte de que todo funciona.

Usa documentación en texto plano

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.

Cada etapa del tutorial de implementación 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 que aparecen más abajo.

Tutorial de implementación

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

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: Creas los paywalls en el editor no-code 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 analítica e integraciones.

¿No sabes cuál elegir? Lee la tabla de comparación en la guía de inicio rápido.

Instala y configura el 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:

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

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

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 para las instrucciones de configuración.

Guías:

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

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.

Guías:

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

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.

Guías:

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

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.

Comprueba el estado de la suscripción

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

Envía esto a tu LLM:

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

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

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

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

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

Envía esto a tu LLM:

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

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

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: Lista todas las páginas con enlaces .md. Es un estándar emergente 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: 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 y react-native-llms-full.txt: Subconjuntos específicos de la plataforma que ahorran tokens en comparación con el sitio completo.