---
title: "Habilitar compras con Flow Builder en el SDK de Kotlin Multiplatform"
description: "Guía de inicio rápido para habilitar compras in-app con Adapty Flow Builder."
---

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](migration-to-kmp-sdk-v4) para ver los nombres de métodos correspondientes.

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

- [**Products**](product) – todo lo que los usuarios pueden comprar (suscripciones, consumibles, acceso de por vida)
- [**Flows**](adapty-flow-builder) – secuencias de pantallas que presentan productos a los usuarios, creadas en el Flow Builder sin código. El SDK las recupera mediante `getFlow`. Si prefieres construir la interfaz en tu propio código, usa un paywall en su lugar — consulta [Implementar paywalls manualmente](kmp-quickstart-manual).
- [**Placements**](placements) – dónde y cuándo muestras flows en tu app (por ejemplo, `main`, `onboarding`, `settings`). Asocias flows 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 flows diferentes 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 usar |
|---|---|---|
| Adapty Flow Builder | ✅ Fácil | [Creas un flow completo y listo para compras en el constructor no-code](quickstart-paywalls). Adapty lo renderiza automáticamente y gestiona todo el flujo de compra, la validación de recibos y la gestión de suscripciones. |
| Paywalls creados manualmente | 🟡 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](kmp-quickstart-manual). |
| 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](observer-vs-full-mode). |

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

Si prefieres construir la UI del paywall tú mismo, consulta [Implementar paywalls manualmente](kmp-quickstart-manual).
:::

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

1. **Obtener el flow**: Obtenlo desde Adapty.
2. **Mostrarlo y Adapty gestionará las compras por ti**: Muestra la vista en tu app.
3. **Gestionar las acciones de los botones**: Asocia las interacciones del usuario con la respuesta de tu app. Por ejemplo, abrir enlaces o cerrar el flow cuando los usuarios pulsen 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 flow y añade productos a él](create-paywall).
4. [Crea un placement y añade tu flow a él](create-placement).
5. [Instala y activa el SDK](sdk-installation-kotlin-multiplatform) 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 flows y placements usando el [CLI para desarrolladores](developer-cli-quickstart).
:::

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

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

Para obtener un flow creado en el Adapty Flow Builder, debes:

1. Obtener el objeto `flow` por el ID del [placement](placements) usando el método `getFlow`.

2. Crear la vista del flow con el método `createFlowView`. La vista contiene los elementos de UI y los estilos necesarios para mostrar el flow. Si el flow no tiene ninguna vista configurada, `createFlowView` devuelve un error — gestiónalo en `onError`.

:::important
Para obtener la vista, debes activar el toggle **Show on device** en el Flow Builder. De lo contrario, `createFlowView` devolverá un error y el flow no se mostrará.
:::

```kotlin showLineNumbers
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 \{#display-the-flow\}

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()`:

```kotlin showLineNumbers
AdaptyUI.createFlowView(flow)
    .onSuccess { view ->
        view.present()
    }
    .onError { error ->
        // handle the error
    }
```

Una vez que la vista se haya creado correctamente, puedes mostrarla en la pantalla del dispositivo. Cada vista solo puede usarse una vez: después de llamar a `dismiss()`, llama de nuevo a `createFlowView` para mostrar el flow otra vez.

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

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

Cuando los usuarios hacen clic en los botones del flow, el SDK de Kotlin Multiplatform gestiona automáticamente las compras, la restauración, el cierre del flow y la apertura de enlaces.

Sin embargo, otros botones tienen IDs personalizados o predefinidos y requieren gestionar las acciones en tu código. O bien, 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 es 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`.

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

```kotlin showLineNumbers
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 \{#next-steps\}

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](kmp-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 en tu app.

```kotlin showLineNumbers
// 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
    }
```