Mostrar paywalls de Paywall Builder en modo Observer en el SDK de Android

Si has creado un flow o paywall con el Flow Builder o el Paywall Builder, no tienes que preocuparte por renderizarlo en el código de tu app móvil para mostrárselo al usuario. Ese flow o paywall ya contiene tanto lo que debe mostrarse como la forma en que debe mostrarse.

Esta sección hace referencia únicamente al modo Observer. Si no trabajas en modo Observer, consulta el tema Android - Presentar flows y paywalls en su lugar.

Antes de empezar a presentar flows (Haz clic para expandir)

Configura la integración inicial de Adapty con Google Play. 2. Instala y configura el SDK de Adapty. Asegúrate de establecer el parámetro observerMode en true. Consulta nuestras instrucciones por framework para Android. 3. Crea productos en el Adapty Dashboard. 4. Configura flows o paywalls en los builders y asígnales productos. 5. Crea placements y asígna tus flows o paywalls en el Adapty Dashboard. 6. Obtén los flows y su configuración en el código de tu app.

Implementa el AdaptyUiObserverModeHandler.

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

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

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

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

val observerModeHandler = object : AdaptyUiObserverModeHandler {
    // onPurchaseInitiated implementation (see 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() {
    // onPurchaseInitiated implementation (see 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 el correcto funcionamiento del flow, como mostrar el indicador de carga:

Callback	Descripción
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 que la vista se haya creado correctamente, 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	requerido	Proporciona un objeto `AdaptyUI.FlowConfiguration` que contiene 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. Ver Change flow insets.
customAssets	opcional	Pasa un objeto `AdaptyCustomAssets` para reemplazar imágenes y vídeos en tu flow o paywall 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 convierte en la cadena de texto correspondiente. Consulta el tema Custom tags in Paywall Builder para más detalles.
observerModeHandler	requerido para el modo Observer	El `AdaptyUiObserverModeHandler` que implementaste en el paso anterior.

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

Configura la integración inicial de Adapty con Google Play y con 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 usando 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 flujo de compra personalizado en respuesta a este callback:

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
        }
    );
};

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

val observerModeHandler = object : AdaptyUiObserverModeHandler {
    // onPurchaseInitiated implementation (see 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() {
    // onPurchaseInitiated implementation (see 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	Descripción
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 ello, 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" />

Una vez creada la vista correctamente, puedes añadirla a la jerarquía de vistas y mostrarla.

Para hacerlo, usa 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 mayor comodidad. Consulta el tema Gestionar eventos del paywall para más detalles.
PersonalizedOfferResolver	opcional	Para indicar precios personalizados (más información), implementa `AdaptyUiPersonalizedOfferResolver` y añade tu propia lógica que mapee `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 ampliar)

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 aplicación móvil.

Implementa el AdaptyUiObserverModeHandler. El callback de AdaptyUiObserverModeHandler (onPurchaseInitiated) te avisa cuando el usuario inicia una compra. Puedes activar tu flujo de compra personalizado en respuesta a este callback así:

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 loader, 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, que ha fallado, o que 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" />

Tras crear la vista correctamente, 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 momento en que se muestran 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.
Insets	obligatorio	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 de navegación se superponen al `AdaptyPaywallView`, pasa `AdaptyPaywallInsets.NONE`. En modo pantalla completa, donde las barras del sistema solapan parte de tu UI, obtén los insets como se indica 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 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 mapee `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 de 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: objeto Transaction. Para Android: 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, donde 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.

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