Mostrar flows en modo Observer - React Native

Si usas el modo Observer, eres responsable de tu propia lógica de compras. Pero puedes delegar la UI 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 necesidad de 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 React Native SDK 4.0 o posterior: Las versiones anteriores no pueden renderizar flows. Para migrar una app existente, consulta la guía de migración.
• observerMode configurado como true: Consulta la guía de instalación del SDK de React Native.
• Integración inicial con la 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.

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

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.

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

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:

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.