Presentar flows en modo Observer en el SDK de Capacitor

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 los textos, el diseño y los precios cuando quieras, sin publicar una nueva versión de la app.

Esta guía muestra cómo presentar un flow y gestionar los callbacks de compra. Si Adapty gestiona las compras por ti, consulta Mostrar flows y paywalls en su lugar.

Antes de empezar

Necesitas:

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

Implementación

En el modo Observer, el SDK no realiza compras por ti. Cuando un usuario pulsa el botón de compra o restauración en un flow renderizado por Adapty, el SDK invoca tu manejador de eventos onObserverPurchaseInitiated o onObserverRestoreInitiated en su lugar. Realiza la compra o restauración con tu propio código allí.

1. Establece los manejadores de eventos del modo observer en la vista. A diferencia de otras plataformas, no existe un objeto resolver separado — los manejadores forman parte de los manejadores de eventos habituales, así que configúralos en cada vista que crees:

   import { adapty, createFlowView } from '@adapty/capacitor';
   
   const view = await createFlowView(flow);
   
   const unsubscribe = await view.setEventHandlers({
     onObserverPurchaseInitiated(product, onStartPurchase, onFinishPurchase) {
       onStartPurchase(); // the view shows its loading indicator
       myPurchaseApi(product.vendorProductId)
         .then((transactionId) =>
           adapty.reportTransaction({ transactionId, variationId: flow.variationId }),
         )
         .finally(() => onFinishPurchase()); // the view hides the loading indicator
       return false; // keep the flow open; dismiss it yourself after success
     },
     onObserverRestoreInitiated(onStartRestore, onFinishRestore) {
       onStartRestore();
       myRestoreApi().finally(() => onFinishRestore());
       return false;
     },
   });

El handler onObserverPurchaseInitiated te informa de que el usuario ha iniciado una compra, y onObserverRestoreInitiated — de que el usuario ha iniciado una restauración. Activa tu flow de compra o restauración personalizado en respuesta.

Además, recuerda invocar los siguientes callbacks para notificar a AdaptyUI sobre el proceso de compra o restauración. Esto es necesario para el comportamiento correcto del flow, como mostrar el loader, entre otras cosas:

2. Presenta el flow como de costumbre: obtén el flow y crea su vista, luego preséntala. No se necesitan parámetros adicionales — los handlers se activan solo cuando el SDK se activó con observerMode: true.