Presentar flows en modo Observer - React Native

Si has personalizado un flow o paywall con el builder, no necesitas preocuparte por renderizarlo en el código de tu app móvil para mostrárselo al usuario. Dicho 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 el modo Observer, consulta el tema Mostrar flows y paywalls.

Esta funcionalidad requiere el SDK de Adapty para React Native 4.0 o posterior — anteriormente solo estaba disponible en los SDK nativos de iOS y Android. Consulta la guía de migración para actualizar.

Antes de empezar a presentar flows (haz clic para ampliar)

Configura la integración inicial de Adapty con App Store y con Google Play. 2. Instala y configura el SDK de Adapty. Asegúrate de establecer el parámetro observerMode en true. Consulta la guía de instalación del SDK de React Native. 3. Crea productos en el Adapty Dashboard. 4. Configura flows o paywalls en los builders y asígnales productos. 5. Crea placements y asígnales tus flows o paywalls. 6. Obtén los flows y su configuración en el código de tu aplicación móvil.

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 o paywall 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í.

Configura los controladores de eventos en modo observador

A diferencia de otras plataformas, no existe un objeto resolver independiente — los controladores son parte de los controladores de eventos habituales, así que configúralos en cada flow que presentes.

Para el componente React, pasa los controladores como props a AdaptyFlowView:


function MyFlow({ flow }) {
  const onObserverPurchaseInitiated = useCallback<
    FlowEventHandlers['onObserverPurchaseInitiated']
  >((product, onStartPurchase, onFinishPurchase) => {
    onStartPurchase(); // the flow shows its loading indicator
    myPurchaseApi(product.vendorProductId)
      .then((transactionId) => adapty.reportTransaction(transactionId, flow.variationId))
      .finally(() => onFinishPurchase()); // the flow hides the loading indicator
  }, [flow]);

  const onObserverRestoreInitiated = useCallback<
    FlowEventHandlers['onObserverRestoreInitiated']
  >((onStartRestore, onFinishRestore) => {
    onStartRestore();
    myRestoreApi().finally(() => onFinishRestore());
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      onObserverPurchaseInitiated={onObserverPurchaseInitiated}
      onObserverRestoreInitiated={onObserverRestoreInitiated}
      // ... your other event handlers
    />
  );
}

En el componente embebido, el valor que devuelve un handler no cierra el flow — desmonta el componente tú mismo tras una compra o restauración exitosa.

Para la presentación modal, establece los handlers en la vista que creaste:


const view = await createFlowView(flow);

const unsubscribe = view.setEventHandlers({
  onObserverPurchaseInitiated(product, onStartPurchase, onFinishPurchase) {
    onStartPurchase(); // the flow shows its loading indicator
    myPurchaseApi(product.vendorProductId)
      .then((transactionId) => adapty.reportTransaction(transactionId, flow.variationId))
      .finally(() => onFinishPurchase()); // the flow 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.

Recuerda también 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:

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()	El callback debe invocarse para notificar a AdaptyUI que la restauración ha comenzado.
onFinishRestore()	El callback debe invocarse para notificar a AdaptyUI que la restauración ha finalizado.

Presenta el flow

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

No olvides reportar la transacción y asociarla con el paywall. De lo contrario, Adapty no reconocerá la transacción y no podrá determinar el paywall de origen de la compra.