Presentar flows en modo Observer en el SDK de Android

Si usas el modo Observer, eres responsable de tu propia lógica de compras. Pero puedes delegar la interfaz del paywall al Flow & Paywall Builder.

Diseña la pantalla en el builder, y el SDK de Adapty la renderiza de forma nativa. Actualiza su texto, diseño y precios cuando quieras, sin publicar una nueva versión de la app. Cuando el usuario pulsa el botón de compra, el SDK llama a tu código para completar la compra.

Esta guía muestra cómo presentar esa pantalla y gestionar la llamada de compra. Si Adapty completa las compras por ti, consulta Mostrar flows y paywalls.

Antes de empezar

Necesitas:

Adapty Android SDK v4 o posterior: Las versiones anteriores no pueden renderizar flows. Para migrar una app existente desde v3, consulta la guía de migración.
observerMode establecido en true: Consulta la guía de instalación del SDK de Android.
Integración inicial con la store: Configura Adapty con Google Play.
Un flow publicado con productos: Créalo en el Flow & Paywall Builder y asígnale productos.
Un placement de flow: Crea un placement y asígnale tu flow.
El flow obtenido en tu app: Obtén el flow y su configuración antes de mostrarlo.

Implementación

Implementa el AdaptyUiObserverModeHandler.

El evento onPurchaseInitiated te informará de que el usuario ha iniciado una compra. Puedes activar tu flow de compra personalizado en respuesta a este callback:

val observerModeHandler =
 AdaptyUiObserverModeHandler { product, onStartPurchase, onFinishPurchase ->
    onStartPurchase()
    yourBillingClient.makePurchase(
        product,
        onSuccess = { purchase ->
            onFinishPurchase()
            //handle success
        },
        onError = {
            onFinishPurchase()
            //handle error
        },
        onCancel = {
            onFinishPurchase()
            //handle cancel
        }
    )
}

AdaptyUiObserverModeHandler observerModeHandler = (product, onStartPurchase, onFinishPurchase) -> {
    onStartPurchase.invoke();
    yourBillingClient.makePurchase(
        product,
        purchase -> {
            onFinishPurchase.invoke();
            //handle success
        },
        error -> {
            onFinishPurchase.invoke();
            //handle error
        },
        () -> { //cancellation
            onFinishPurchase.invoke();
            //handle cancel
        }
    );
};

Para gestionar las restauraciones en modo Observer, sobreescribe getRestoreHandler(). Por defecto devuelve null, lo que utiliza el flow integrado de Adapty Adapty.restorePurchases(). Para proporcionar tu propia implementación de restauración:

val observerModeHandler = object : AdaptyUiObserverModeHandler {
    override fun onPurchaseInitiated(
        product: AdaptyPaywallProduct,
        onStartPurchase: AdaptyUiObserverModeHandler.PurchaseStartCallback,
        onFinishPurchase: AdaptyUiObserverModeHandler.PurchaseFinishCallback,
    ) {
        // the same body as the purchase example above
    }

    override fun getRestoreHandler() =
        AdaptyUiObserverModeHandler.RestoreHandler { onStartRestore, onFinishRestore ->
            onStartRestore()
            yourBillingClient.restorePurchases(
                onSuccess = { restoredPurchases ->
                    onFinishRestore()
                    //handle successful restore
                },
                onError = {
                    onFinishRestore()
                    //handle error
                }
            )
        }
}

AdaptyUiObserverModeHandler observerModeHandler = new AdaptyUiObserverModeHandler() {
    @Override
    public void onPurchaseInitiated(
        AdaptyPaywallProduct product,
        PurchaseStartCallback onStartPurchase,
        PurchaseFinishCallback onFinishPurchase
    ) {
        // the same body as the purchase example above
    }

    @Override
    public RestoreHandler getRestoreHandler() {
        return (onStartRestore, onFinishRestore) -> {
            onStartRestore.invoke();
            yourBillingClient.restorePurchases(
                restoredPurchases -> {
                    onFinishRestore.invoke();
                    //handle successful restore
                },
                error -> {
                    onFinishRestore.invoke();
                    //handle error
                }
            );
        };
    }
};

Recuerda invocar los siguientes callbacks para notificar a AdaptyUI sobre el proceso de compra o restauración. Esto es necesario para que el flow funcione correctamente, por ejemplo, para mostrar el indicador de carga:

Callback	Description
onStartPurchase()	El callback debe invocarse para notificar a AdaptyUI que la compra ha comenzado.
onFinishPurchase()	El callback debe invocarse para notificar a AdaptyUI que la compra ha finalizado.
onStartRestore()	Opcional. El callback puede invocarse para notificar a AdaptyUI que la restauración ha comenzado.
onFinishRestore()	Opcional. El callback puede invocarse para notificar a AdaptyUI que la restauración ha finalizado.

Para mostrar el flow visual en la pantalla del dispositivo, primero debes configurarlo.

Para ello, llama al método AdaptyUI.getFlowView() o crea el AdaptyFlowView directamente:

   val flowView = AdaptyUI.getFlowView(
       activity,
       flowConfiguration,
       products,
       eventListener,
       insets,
       customAssets,
       tagResolver,
       timerResolver,
       observerModeHandler, 
   )

   val flowView =
        AdaptyFlowView(activity) // or retrieve it from xml
   ...
   with(flowView) {
       showFlow(
           flowConfiguration,
           products,
					 eventListener,
           insets,
           customAssets,
           tagResolver,
           timerResolver,
					 observerModeHandler,
       )
   }

AdaptyFlowView flowView = AdaptyUI.getFlowView(
        activity,
        flowConfiguration,
        products,
        eventListener,
        insets,
        customAssets,
        tagResolver,
        timerResolver,
        observerModeHandler
);

AdaptyFlowView flowView =
  new AdaptyFlowView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
flowView.showFlow(flowConfiguration, products, eventListener, insets, customAssets, tagResolver, timerResolver, observerModeHandler);

<com.adapty.ui.AdaptyFlowView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Después de crear la vista con éxito, puedes añadirla a la jerarquía de vistas y mostrarla.

Para hacerlo, usa esta función composable:

AdaptyFlowScreen(
    flowConfiguration,
    products,
    eventListener,
    insets,
    customAssets,
    tagResolver,
    timerResolver,
    observerModeHandler,
)

Parámetros de la solicitud:

Parámetro	Presencia	Descripción
flowConfiguration	obligatorio	Proporciona un objeto `AdaptyUI.FlowConfiguration` con los detalles visuales del flow. Usa el método `AdaptyUI.getFlowConfiguration(flow)` para cargarlo. Consulta el tema Fetch the view configuration para más detalles.
products	opcional	Proporciona un array de `AdaptyPaywallProduct` para optimizar el tiempo de visualización de los productos en pantalla. Si se pasa `null`, AdaptyUI obtendrá automáticamente los productos necesarios.
eventListener	opcional	Proporciona un `AdaptyFlowEventListener` para observar los eventos del flow. Se recomienda extender `AdaptyFlowDefaultEventListener` para facilitar su uso. Consulta el tema Handle flow & paywall events para más detalles.
insets	opcional	Los insets son los espacios alrededor del flow que evitan que los elementos interactivos queden ocultos detrás de las barras del sistema. Por defecto: `Unspecified`, lo que permite que Adapty ajuste los insets automáticamente. Consulta Change flow insets.
customAssets	opcional	Pasa un objeto `AdaptyCustomAssets` para reemplazar imágenes y vídeos de tu flow en tiempo de ejecución. Consulta Customize assets para más detalles.
tagResolver	opcional	Usa `AdaptyUiTagResolver` para resolver etiquetas personalizadas dentro del texto del flow. Este resolver toma un parámetro de etiqueta y lo resuelve en la cadena de texto correspondiente.
observerModeHandler	obligatorio para el modo Observer	El `AdaptyUiObserverModeHandler` que implementaste en el paso anterior.

Warning

No olvides asociar los paywalls a las transacciones de compra. De lo contrario, Adapty no podrá determinar el flow de origen de la compra.

Antes de empezar a mostrar paywalls (haz clic para expandir)

Configura la integración inicial de Adapty con Google Play y con el App Store. 2. Instala y configura el SDK de Adapty. Asegúrate de establecer el parámetro observerMode en true. Consulta nuestras instrucciones específicas por framework para Android. 3. Crea productos en el Adapty Dashboard. 4. Configura los paywalls, asígnales productos y personalízalos con el Paywall Builder en el Adapty Dashboard. 5. Crea placements y asígnales tus paywalls en el Adapty Dashboard. 6. Obtén los paywalls del Paywall Builder y su configuración en el código de tu aplicación móvil.

Implementa el AdaptyUiObserverModeHandler.

El evento onPurchaseInitiated te informará de que el usuario ha iniciado una compra. Puedes activar tu flow de compra personalizado en respuesta a este callback:

Note

Las versiones del SDK de Adapty para Android anteriores a la 3.15.0 también pasaban el paywall y la vista del paywall a este callback. Elimina esos dos parámetros cuando actualices a la versión 3.15.0 o posterior.

val observerModeHandler =
 AdaptyUiObserverModeHandler { product, onStartPurchase, onFinishPurchase ->
    onStartPurchase()
    yourBillingClient.makePurchase(
        product,
        onSuccess = { purchase ->
            onFinishPurchase()
            //handle success
        },
        onError = {
            onFinishPurchase()
            //handle error
        },
        onCancel = {
            onFinishPurchase()
            //handle cancel
        }
    )
}

AdaptyUiObserverModeHandler observerModeHandler = (product, onStartPurchase, onFinishPurchase) -> {
    onStartPurchase.invoke();
    yourBillingClient.makePurchase(
        product,
        purchase -> {
            onFinishPurchase.invoke();
            //handle success
        },
        error -> {
            onFinishPurchase.invoke();
            //handle error
        },
        () -> { //cancellation
            onFinishPurchase.invoke();
            //handle cancel
        }
    );
};

Para gestionar las restauraciones en el modo Observer, sobreescribe getRestoreHandler(). Por defecto devuelve null, lo que utiliza el flow integrado de Adapty Adapty.restorePurchases(). Para proporcionar tu propia implementación de restauración:

val observerModeHandler = object : AdaptyUiObserverModeHandler {
    override fun onPurchaseInitiated(
        product: AdaptyPaywallProduct,
        onStartPurchase: AdaptyUiObserverModeHandler.PurchaseStartCallback,
        onFinishPurchase: AdaptyUiObserverModeHandler.PurchaseFinishCallback,
    ) {
        // the same body as the purchase example above
    }

    override fun getRestoreHandler() =
        AdaptyUiObserverModeHandler.RestoreHandler { onStartRestore, onFinishRestore ->
            onStartRestore()
            yourBillingClient.restorePurchases(
                onSuccess = { restoredPurchases ->
                    onFinishRestore()
                    //handle successful restore
                },
                onError = {
                    onFinishRestore()
                    //handle error
                }
            )
        }
}

AdaptyUiObserverModeHandler observerModeHandler = new AdaptyUiObserverModeHandler() {
    @Override
    public void onPurchaseInitiated(
        AdaptyPaywallProduct product,
        PurchaseStartCallback onStartPurchase,
        PurchaseFinishCallback onFinishPurchase
    ) {
        // the same body as the purchase example above
    }

    @Override
    public RestoreHandler getRestoreHandler() {
        return (onStartRestore, onFinishRestore) -> {
            onStartRestore.invoke();
            yourBillingClient.restorePurchases(
                restoredPurchases -> {
                    onFinishRestore.invoke();
                    //handle successful restore
                },
                error -> {
                    onFinishRestore.invoke();
                    //handle error
                }
            );
        };
    }
};

Recuerda invocar los siguientes callbacks para notificar a AdaptyUI sobre el proceso de compra o restauración. Esto es necesario para que el paywall funcione correctamente, por ejemplo, para mostrar el loader:

Callback	Description
onStartPurchase()	El callback debe invocarse para notificar a AdaptyUI que la compra ha comenzado.
onFinishPurchase()	El callback debe invocarse para notificar a AdaptyUI que la compra ha finalizado.
onStartRestore()	Opcional. El callback puede invocarse para notificar a AdaptyUI que la restauración ha comenzado.
onFinishRestore()	Opcional. El callback puede invocarse para notificar a AdaptyUI que la restauración ha finalizado.

Para mostrar el paywall visual en la pantalla del dispositivo, primero debes configurarlo.

Para hacerlo, llama al método AdaptyUI.getPaywallView() o crea el AdaptyPaywallView directamente:

   val paywallView = AdaptyUI.getPaywallView(
       activity,
       viewConfiguration,
       products,
       eventListener,
       personalizedOfferResolver,
       tagResolver,
       timerResolver,
       observerModeHandler, 
   )

   val paywallView =
        AdaptyPaywallView(activity) // or retrieve it from xml
   ...
   with(paywallView) {
       showPaywall(
           viewConfiguration,
           products,
					 eventListener,
           personalizedOfferResolver,
           tagResolver,
           timerResolver,
					 observerModeHandler,
       )
   }

AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
        activity,
        viewConfiguration,
        products,
        eventListener,
        personalizedOfferResolver,
        tagResolver,
        timerResolver,
        observerModeHandler
);

AdaptyPaywallView paywallView =
  new AdaptyPaywallView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
paywallView.showPaywall(viewConfiguration, products, eventListener, personalizedOfferResolver, tagResolver, timerResolver, observerModeHandler);

<com.adapty.ui.AdaptyPaywallView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Después de crear la vista correctamente, puedes añadirla a la jerarquía de vistas y mostrarla.

Para ello, utiliza esta función composable:

AdaptyPaywallScreen(
    viewConfiguration,
    products,
    eventListener,
    personalizedOfferResolver,
    tagResolver,
    timerResolver,
)

Parámetros de la solicitud:

Parámetro	Presencia	Descripción
Products	opcional	Proporciona un array de `AdaptyPaywallProduct` para optimizar el tiempo de visualización de los productos en pantalla. Si se pasa `null`, AdaptyUI obtendrá automáticamente los productos necesarios.
ViewConfiguration	obligatorio	Proporciona un objeto `AdaptyViewConfiguration` con los detalles visuales del paywall. Usa el método `Adapty.getViewConfiguration(paywall)` para cargarlo. Consulta el tema Obtener la configuración visual del paywall para más detalles.
EventListener	opcional	Proporciona un `AdaptyUiEventListener` para observar los eventos del paywall. Se recomienda extender `AdaptyUiDefaultEventListener` para facilitar su uso. Consulta el tema Gestionar eventos del paywall para más detalles.
PersonalizedOfferResolver	opcional	Para indicar precios personalizados (más información), implementa `AdaptyUiPersonalizedOfferResolver` y pasa tu propia lógica que mapea `AdaptyPaywallProduct` a `true` si el precio del producto es personalizado, o `false` en caso contrario.
TagResolver	opcional	Usa `AdaptyUiTagResolver` para resolver etiquetas personalizadas dentro del texto del paywall. Este resolver recibe un parámetro de etiqueta y lo resuelve en la cadena correspondiente. Consulta el tema Etiquetas personalizadas en Paywall Builder para más detalles.
ObserverModeHandler	obligatorio para el modo Observer	El `AdaptyUiObserverModeHandler` que implementaste en el paso anterior.
variationId	obligatorio	El identificador de cadena de la variante. Puedes obtenerlo usando la propiedad `variationId` del objeto `AdaptyPaywall`.
transaction	obligatorio	Para iOS, StoreKit 1: un objeto `SKPaymentTransaction`. Para iOS, StoreKit 2: un objeto Transaction. Para Android: el identificador de cadena (`purchase.getOrderId()`) de la compra, donde la compra es una instancia de la clase Purchase de la biblioteca de facturación.

Antes de empezar a mostrar paywalls (Haz clic para expandir)

Configura la integración inicial de Adapty con Google Play y con App Store.
Instala y configura el SDK de Adapty. Asegúrate de establecer el parámetro observerMode en true. Consulta las instrucciones específicas para cada framework: Android, React Native, Flutter y Unity.
Crea productos en el Adapty Dashboard.
Configura los paywalls, asígnales productos y personalízalos con el Paywall Builder en el Adapty Dashboard.
Crea placements y asígnales tus paywalls en el Adapty Dashboard.
Obtén los paywalls del Paywall Builder y su configuración en el código de tu app.

Implementa el AdaptyUiObserverModeHandler. El callback de AdaptyUiObserverModeHandler (onPurchaseInitiated) te notifica cuando el usuario inicia una compra. Puedes activar tu flow de compra personalizado en respuesta a este callback de la siguiente manera:

val observerModeHandler =
AdaptyUiObserverModeHandler { product, paywall, paywallView, onStartPurchase, onFinishPurchase ->
    onStartPurchase()
    yourBillingClient.makePurchase(
        product,
        onSuccess = { purchase ->
            onFinishPurchase()
            //handle success
        },
        onError = {
            onFinishPurchase()
            //handle error
        },
        onCancel = {
            onFinishPurchase()
            //handle cancel
        }
    )
}

AdaptyUiObserverModeHandler observerModeHandler = (product, paywall, paywallView, onStartPurchase, onFinishPurchase) -> {
    onStartPurchase.invoke();
    yourBillingClient.makePurchase(
        product,
        purchase -> {
            onFinishPurchase.invoke();
            //handle success
        },
        error -> {
            onFinishPurchase.invoke();
            //handle error
        },
        () -> { //cancellation
            onFinishPurchase.invoke();
            //handle cancel
        }
    );
};

También recuerda invocar estos callbacks en AdaptyUI. Esto es necesario para el correcto funcionamiento del paywall, como mostrar el indicador de carga, entre otras cosas:

Callback en Kotlin	Callback en Java	Descripción
onStartPurchase()	onStartPurchase.invoke()	Este callback debe invocarse para notificar a AdaptyUI que la compra ha comenzado.
onFinishPurchase()	onFinishPurchase.invoke()	Este callback debe invocarse para notificar a AdaptyUI que la compra ha finalizado correctamente, ha fallado o ha sido cancelada.

Para mostrar el paywall visual, primero debes inicializarlo. Para ello, llama al método AdaptyUI.getPaywallView() o crea el AdaptyPaywallView directamente:

val paywallView = AdaptyUI.getPaywallView(
    activity,
    viewConfiguration,
    products,
    AdaptyPaywallInsets.of(topInset, bottomInset),
    eventListener,
    personalizedOfferResolver,
    tagResolver,
    observerModeHandler,
)

//======= OR =======

val paywallView =
     AdaptyPaywallView(activity) // or retrieve it from xml
...
with(paywallView) {
    setEventListener(eventListener)
    setObserverModeHandler(observerModeHandler)
    showPaywall(
        viewConfiguration,
        products,
        AdaptyPaywallInsets.of(topInset, bottomInset),
        personalizedOfferResolver,
        tagResolver,
    )
}

AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
        activity,
        viewConfiguration,
        products,
        AdaptyPaywallInsets.of(topInset, bottomInset),
        eventListener,
        personalizedOfferResolver,
        tagResolver,
        observerModeHandler
);

//======= OR =======

AdaptyPaywallView paywallView =
  new AdaptyPaywallView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
paywallView.setEventListener(eventListener);
paywallView.setObserverModeHandler(observerModeHandler);
paywallView.showPaywall(viewConfiguration, products, AdaptyPaywallInsets.of(topInset, bottomInset), personalizedOfferResolver);

<com.adapty.ui.AdaptyPaywallView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Después de que la vista se haya creado con éxito, puedes añadirla a la jerarquía de vistas y mostrarla.

Parámetros de la solicitud:

Parámetro	Presencia	Descripción
Products	opcional	Proporciona un array de `AdaptyPaywallProduct` para optimizar el tiempo de visualización de los productos en pantalla. Si se pasa `null`, AdaptyUI obtendrá automáticamente los productos necesarios.
ViewConfiguration	requerido	Proporciona un objeto `AdaptyViewConfiguration` con los detalles visuales del paywall. Usa el método `Adapty.getViewConfiguration(paywall)` para cargarlo. Consulta el tema Obtener la configuración visual del paywall para más detalles.
Insets	requerido	Define un objeto `AdaptyPaywallInsets` con información sobre el área solapada por las barras del sistema, creando márgenes verticales para el contenido. Si ni la barra de estado ni la barra de navegación solapan el `AdaptyPaywallView`, pasa `AdaptyPaywallInsets.NONE`. Para el modo pantalla completa donde las barras del sistema solapan parte de tu interfaz, obtén los insets como se muestra debajo de la tabla.
EventListener	opcional	Proporciona un `AdaptyUiEventListener` para observar los eventos del paywall. Se recomienda extender `AdaptyUiDefaultEventListener` para facilitar su uso. Consulta el tema Gestión de eventos del paywall para más detalles.
PersonalizedOfferResolver	opcional	Para indicar precios personalizados (leer más), implementa `AdaptyUiPersonalizedOfferResolver` y pasa tu propia lógica que mapea `AdaptyPaywallProduct` a `true` si el precio del producto es personalizado, o `false` en caso contrario.
TagResolver	opcional	Usa `AdaptyUiTagResolver` para resolver etiquetas personalizadas dentro del texto del paywall. Este resolver recibe un parámetro de etiqueta y lo resuelve a la cadena correspondiente. Consulta el tema Etiquetas personalizadas en Paywall Builder para más detalles.
ObserverModeHandler	requerido para el modo Observer	El `AdaptyUiObserverModeHandler` que implementaste en el paso anterior.
variationId	requerido	El identificador de cadena de la variante. Puedes obtenerlo usando la propiedad `variationId` del objeto `AdaptyPaywall`.
transaction	requerido	Para iOS, StoreKit 1: un objeto `SKPaymentTransaction`. Para iOS, StoreKit 2: un objeto Transaction. Para Android: el identificador de cadena (`purchase.getOrderId()`) de la compra, donde la compra es una instancia de la clase Purchase de la biblioteca de facturación.

Para el modo de pantalla completa en el que las barras del sistema se superponen a parte de tu interfaz, obtén los insets de la siguiente manera:

import androidx.core.graphics.Insets
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

//create extension function
fun View.onReceiveSystemBarsInsets(action: (insets: Insets) -> Unit) {
    ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
        val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
        ViewCompat.setOnApplyWindowInsetsListener(this, null)
        action(systemBarInsets)
        insets
    }
}
//and then use it with the view
paywallView.onReceiveSystemBarsInsets { insets ->
    val paywallInsets = AdaptyPaywallInsets.of(insets.top, insets.bottom)
    paywallView.setEventListener(eventListener)
    paywallView.setObserverModeHandler(observerModeHandler)
    paywallView.showPaywall(viewConfig, products, paywallInsets, personalizedOfferResolver, tagResolver)
}

import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

...

ViewCompat.setOnApplyWindowInsetsListener(paywallView, (view, insets) -> {
    Insets systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
    ViewCompat.setOnApplyWindowInsetsListener(paywallView, null);
  
    AdaptyPaywallInsets paywallInsets =
                 AdaptyPaywallInsets.of(systemBarInsets.top, systemBarInsets.bottom);
    paywallView.setEventListener(eventListener);
    paywallView.setObserverModeHandler(observerModeHandler);
    paywallView.showPaywall(viewConfiguration, products, paywallInsets, personalizedOfferResolver, tagResolver);
            
    return insets;
});

Devuelve:

Objeto	Descripción
`AdaptyPaywallView`	objeto que representa la pantalla del paywall solicitado.

Warning

No olvides asociar paywalls a las transacciones de compra. De lo contrario, Adapty no podrá determinar el paywall de origen de la compra.