Habilitar compras usando paywalls en el SDK de Kotlin Multiplatform
Para habilitar las compras in-app, necesitas entender tres conceptos clave:
- Productos – cualquier cosa que los usuarios puedan comprar (suscripciones, consumibles, acceso de por vida)
- Paywalls son 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 – 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 distintos paywalls a distintos usuarios.
Adapty te ofrece tres formas de habilitar compras en tu app. Elige la que mejor se adapte a los requisitos de tu aplicación:
| Implementación | Complejidad | Cuándo usarla |
|---|---|---|
| Adapty Paywall Builder | ✅ Fácil | Creas un paywall completo y listo para compras en el editor sin código. Adapty lo renderiza automáticamente y gestiona todo el flujo de compra, la validación de recibos y la gestión de suscripciones en segundo plano. |
| Paywalls creados manualmente | 🟡 Media | Implementas la UI de tu paywall en el código de tu app, pero sigues obteniendo el objeto paywall de Adapty para mantener flexibilidad en las ofertas de productos. Consulta la guía. |
| 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. |
Los pasos que se muestran a continuación explican 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.
Para mostrar un paywall creado en el Adapty Paywall Builder, en el código de tu app solo necesitas:
- Obtener el paywall: Obtén el paywall desde Adapty.
- Mostrar el paywall y Adapty gestionará las compras por ti: Muestra el contenedor del paywall que obtuviste en tu app.
- Gestionar las acciones de los botones: Asocia las interacciones del usuario con el paywall con la respuesta de tu app a ellas. Por ejemplo, abrir enlaces o cerrar el paywall cuando los usuarios pulsan botones.
Antes de empezar
Antes de comenzar, completa estos pasos:
- Conecta tu app al App Store y/o Google Play en el Adapty Dashboard.
- Crea tus productos en Adapty.
- Crea un paywall y añade productos a él.
- Crea un placement y añade tu paywall a él.
- Instala y activa el SDK de Adapty en el código de tu app.
La forma más rápida de completar estos pasos es seguir la guía de inicio rápido o crear paywalls y placements usando la CLI para desarrolladores.
1. Obtener el paywall
Tus paywalls están asociados con placements configurados en el dashboard. Los placements te permiten ejecutar diferentes paywalls para distintas audiencias o realizar pruebas A/B.
Para obtener un paywall creado en el Adapty Paywall Builder, necesitas:
-
Obtener el objeto
paywallpor el ID del placement usando el métodogetPaywally comprobar si es un paywall creado en el builder. -
Obtener la configuración de vista del paywall usando el método
createPaywallView. La configuración de vista contiene los elementos de UI y el estilo necesarios para mostrar el paywall.
Para obtener la configuración de 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á.
Adapty.getPaywall("YOUR_PLACEMENT_ID")
.onSuccess { paywall ->
if (!paywall.hasViewConfiguration) {
return@onSuccess
}
val paywallView = AdaptyUI.createPaywallView(paywall = paywall)
paywallView?.present()
}
.onError { error ->
// handle the error
}
2. Mostrar el paywall
Ahora que tienes la configuración del paywall, basta con añadir unas pocas líneas para mostrarlo.
Para mostrar el paywall visual en la pantalla del dispositivo, primero debes configurarlo. Para ello, llama al método AdaptyUI.createPaywallView():
val paywallView = AdaptyUI.createPaywallView(paywall = paywall)
paywallView?.present()
Una vez que la vista se haya creado correctamente, puedes presentarla en la pantalla del dispositivo.
Para más detalles sobre cómo mostrar un paywall, consulta nuestra guía.
3. Gestionar las acciones de los botones
Cuando los usuarios pulsan botones en el paywall, el SDK de Kotlin Multiplatform gestiona automáticamente las compras, la restauración, el cierre del paywall y la apertura de enlaces.
Sin embargo, otros botones tienen IDs personalizados o predefinidos y requieren gestionar las acciones en tu código. O puede que quieras sobrescribir su comportamiento predeterminado.
Por ejemplo, aquí está el comportamiento predeterminado del botón de cierre. No necesitas añadirlo en el código, pero aquí puedes ver cómo se hace si fuera necesario.
AdaptyUI.setPaywallsEventsObserver(object : AdaptyUIPaywallsEventsObserver {
override fun paywallViewDidPerformAction(view: AdaptyUIPaywallView, action: AdaptyUIAction) {
when (action) {
AdaptyUIAction.CloseAction, AdaptyUIAction.AndroidSystemBackAction -> view.dismiss()
}
}
})
Próximos pasos
Tu paywall está listo para mostrarse en la app. Prueba tus compras en el sandbox del App Store o en Google Play Store para asegurarte de que puedes completar una compra de prueba desde el paywall.
Ahora necesitas comprobar el nivel de acceso de los usuarios para asegurarte de mostrar un paywall o dar acceso a las funciones de pago a los usuarios correctos.
Ejemplo completo
Aquí puedes ver cómo integrar todos estos pasos en tu app.
// Set up the observer for handling paywall actions
AdaptyUI.setPaywallsEventsObserver(object : AdaptyUIPaywallsEventsObserver {
override fun paywallViewDidPerformAction(view: AdaptyUIPaywallView, action: AdaptyUIAction) {
when (action) {
is AdaptyUIAction.CloseAction -> view.dismiss()
}
}
})
// Get and display the paywall
Adapty.getPaywall("YOUR_PLACEMENT_ID")
.onSuccess { paywall ->
if (!paywall.hasViewConfiguration) {
// Use custom logic
return@onSuccess
}
val paywallView = AdaptyUI.createPaywallView(paywall = paywall)
paywallView?.present()
}
.onError { error ->
// handle the error
}