Présenter des flows en mode Observateur - React Native

Si vous utilisez le mode Observateur, vous êtes responsable de votre propre logique d’achat. Mais vous pouvez déléguer l’interface utilisateur du paywall au Flow & Paywall Builder.

Concevez l’écran dans le builder, et le SDK Adapty le rend nativement. Modifiez son contenu, sa mise en page et ses tarifs à tout moment, sans publier de nouvelle version.

Ce guide explique comment présenter un flow et gérer les callbacks d’achat. Si Adapty gère les achats à votre place, consultez plutôt Afficher des flows & paywalls.

Avant de commencer

Vous aurez besoin de :

• Adapty React Native SDK 4.0 ou version ultérieure : Les versions antérieures ne peuvent pas afficher les flows. Pour migrer une application existante, consultez le guide de migration.
• observerMode défini sur true : Consultez le guide d’installation du SDK React Native.
• Intégration initiale avec le store : Configurez Adapty avec l’App Store et avec Google Play.
• Un flow publié avec des produits : Créez-le dans le Flow & Paywall Builder et assignez-lui des produits.
• Un placement pour le flow : Créez un placement et assignez-y votre flow.
• Le flow récupéré dans votre application : Obtenez le flow et sa configuration avant de l’afficher.

En mode Observer, le SDK n’effectue pas les achats à votre place. Lorsqu’un utilisateur appuie sur le bouton d’achat ou de restauration dans un flow rendu par Adapty, le SDK appelle votre gestionnaire d’événements onObserverPurchaseInitiated ou onObserverRestoreInitiated — effectuez l’achat ou la restauration avec votre propre code à cet endroit.

Définir les gestionnaires d’événements en mode observateur

Contrairement aux autres plateformes, il n’existe pas d’objet resolver séparé — les gestionnaires font partie des gestionnaires d’événements habituels, donc configurez-les sur chaque flow que vous présentez.

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

Le handler onObserverPurchaseInitiated vous informe que l’utilisateur a initié un achat, et onObserverRestoreInitiated — que l’utilisateur a initié une restauration. Déclenchez votre flow d’achat ou de restauration personnalisé en réponse.

N’oubliez pas non plus d’appeler les callbacks suivants pour notifier AdaptyUI de l’avancement de l’achat ou de la restauration. C’est nécessaire pour le bon comportement du flow, notamment pour afficher le loader :

Présenter le flow

Présentez le flow comme d’habitude : récupérez le flow et créez sa vue, puis présentez-le. Aucun paramètre supplémentaire n’est nécessaire — les handlers se déclenchent uniquement lorsque le SDK a été activé avec observerMode: true.