Habilitar compras con Flow & Paywall Builder en Kotlin Multiplatform SDK
Esta guía usa las APIs del SDK de Adapty para Kotlin Multiplatform v4 (beta). Si usas la v3, consulta la guía de migración para ver los nombres de métodos correspondientes.
Para habilitar las compras in-app, necesitas entender tres conceptos clave:
- Productos – todo lo que los usuarios pueden comprar (suscripciones, consumibles, acceso de por vida)
- Flows y paywalls – pantallas que presentan productos a los usuarios, creadas en el Flow & Paywall Builder sin código. El SDK los recupera mediante
getFlow. Si prefieres construir la interfaz en tu propio código, consulta Implementar paywalls personalizados. - Placements – dónde y cuándo mostrar flows y paywalls en tu app (como
main,onboarding,settings). Los vinculas a 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 opciones a distintos usuarios.
Adapty te ofrece tres formas de activar las compras en tu aplicación. Elige la que mejor se adapte a tus necesidades:
| Implementación | Complejidad | Cuándo usarla |
|---|---|---|
| Adapty Flow & Paywall Builder | ✅ Fácil | Creas un flow o paywall completo y listo para compras en el editor sin código. Adapty lo renderiza automáticamente y gestiona toda la lógica de compra, validación de recibos y gestión de suscripciones. |
| Paywalls personalizados | 🟡 Media | Implementas la UI de tu paywall en el código de tu app, pero sigues obteniendo el objeto flow desde Adapty para mantener flexibilidad en la oferta de productos. Consulta la guía. |
| Modo observador | 🔴 Difícil | Ya tienes tu propia infraestructura de gestión de compras y quieres seguir usándola. Ten en cuenta que el modo observador tiene sus limitaciones en Adapty. Consulta el artículo. |
Los pasos a continuación muestran cómo implementar un flow o paywall creado en el Adapty Flow & Paywall Builder.
Si prefieres crear la UI del paywall tú mismo, consulta Implementar paywalls personalizados.
Para mostrar un flow o paywall creado en el Adapty Flow & Paywall Builder, en el código de tu app solo necesitas:
- Obtén el flow o paywall: Obténlo desde Adapty.
- Muéstralo y deja que Adapty gestione las compras: Muestra la vista en tu app.
- Gestiona las acciones de los botones: Asocia las interacciones del usuario con la respuesta de tu app. Por ejemplo, abre enlaces o cierra el paywall cuando los usuarios pulsen botones.
Antes de empezar
Antes de empezar, completa estos pasos:
- Conecta tu app al App Store y/o Google Play en el Adapty Dashboard.
- Crea tus productos en Adapty.
- Crea un flow o paywall y añade productos.
- Crea un placement y añade tu flow o paywall.
- Instala y activa el SDK 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 flows y placements usando el CLI para desarrolladores.
1. Obtén el flow o el paywall
Tus flows y paywalls están asociados a placements configurados en el dashboard. Los placements te permiten mostrar diferentes flows o paywalls para distintas audiencias o ejecutar pruebas A/B.
Para obtener un flow o paywall creado en el Adapty Flow & Paywall Builder, debes:
-
Obtener el objeto
flowmediante el ID del placement usando el métodogetFlow. -
Crea la vista del flow con el método
createFlowView. La vista contiene los elementos de UI y el estilo necesarios para mostrarla. Si el flow no tiene ninguna vista configurada,createFlowViewdevuelve un error; trátalo enonError.
Para obtener la vista, publica el flow o el paywall. Un flow o paywall con ediciones sin publicar tiene el estado Dirty, y su placement sigue sirviendo la última versión publicada.
Adapty.getFlow("YOUR_PLACEMENT_ID")
.onSuccess { flow ->
AdaptyUI.createFlowView(flow)
.onSuccess { view ->
view.present()
}
.onError { error ->
// the flow has no view configured, or view creation failed
}
}
.onError { error ->
// handle the error
}
2. Mostrar el flow o el paywall
Ahora que tienes el flow, basta con añadir unas pocas líneas para mostrarlo.
Para mostrar el flow visual en la pantalla del dispositivo, primero debes crear la vista. Para ello, llama al método AdaptyUI.createFlowView():
AdaptyUI.createFlowView(flow)
.onSuccess { view ->
view.present()
}
.onError { error ->
// handle the error
}
Una vez que la vista se haya creado correctamente, puedes presentarla en la pantalla del dispositivo. Cada vista solo se puede usar una vez: después de llamar a dismiss(), llama a createFlowView de nuevo para mostrar el flow otra vez.
Para más detalles sobre cómo mostrar un flow o paywall, consulta nuestra guía.
3. Gestionar acciones de botones
Cuando los usuarios pulsan botones en el flow o paywall, el SDK de Kotlin Multiplatform gestiona automáticamente las compras, la restauración, el cierre de pantalla y la apertura de enlaces.
Sin embargo, otros botones tienen IDs personalizados o predefinidos y requieren que gestiones las acciones en tu código. O puede que quieras anular 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.
Ten en cuenta que, por defecto, el flow permanece abierto tras una compra exitosa. Si quieres cerrarlo una vez que la compra finaliza, descarta la vista en el callback flowViewDidFinishPurchase.
AdaptyUI.setFlowsEventsObserver(object : AdaptyUIFlowsEventsObserver {
override fun flowViewDidPerformAction(view: AdaptyUIFlowView, action: AdaptyUIAction) {
when (action) {
is AdaptyUIAction.CloseAction -> mainUiScope.launch { view.dismiss() }
else -> Unit
}
}
override fun flowViewDidFinishPurchase(
view: AdaptyUIFlowView,
product: AdaptyPaywallProduct,
purchaseResult: AdaptyPurchaseResult
) {
if (purchaseResult !is AdaptyPurchaseResult.UserCanceled) {
mainUiScope.launch { view.dismiss() }
}
}
})
Próximos pasos
Tu flow o paywall está listo para mostrarse en la app. Prueba tus compras en el sandbox de App Store o en Google Play Store para asegurarte de que puedes completar una compra de prueba desde el flow.
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í se muestra cómo integrar todos esos pasos en tu app.
// Set up the observer for handling flow events
AdaptyUI.setFlowsEventsObserver(object : AdaptyUIFlowsEventsObserver {
override fun flowViewDidPerformAction(view: AdaptyUIFlowView, action: AdaptyUIAction) {
when (action) {
is AdaptyUIAction.CloseAction -> mainUiScope.launch { view.dismiss() }
else -> Unit
}
}
override fun flowViewDidFinishPurchase(
view: AdaptyUIFlowView,
product: AdaptyPaywallProduct,
purchaseResult: AdaptyPurchaseResult
) {
if (purchaseResult !is AdaptyPurchaseResult.UserCanceled) {
mainUiScope.launch { view.dismiss() }
}
}
})
// Get and display the flow
Adapty.getFlow("YOUR_PLACEMENT_ID")
.onSuccess { flow ->
AdaptyUI.createFlowView(flow)
.onSuccess { view ->
view.present()
}
.onError { error ->
// the flow has no view configured — use custom logic
}
}
.onError { error ->
// handle the error
}