Présenter des flows en mode Observateur - React Native

Si vous avez personnalisé un flow ou un paywall avec le builder, vous n’avez pas à vous soucier de son rendu dans le code de votre application mobile pour l’afficher à l’utilisateur. Un tel flow ou paywall contient à la fois ce qui doit être affiché et comment cela doit l’être.

Cette section concerne uniquement le mode Observer. Si vous ne travaillez pas en mode Observer, consultez la rubrique Afficher les flows et paywalls.

Cette fonctionnalité nécessite le SDK Adapty React Native 4.0 ou version ultérieure — auparavant, elle n’était disponible que dans les SDK natifs iOS et Android. Consultez le guide de migration pour mettre à niveau.

Avant de commencer à afficher des flows (Cliquez pour développer)

Configurez l’intégration initiale d’Adapty avec l’App Store et avec Google Play. 2. Installez et configurez le SDK Adapty. Assurez-vous de définir le paramètre observerMode sur true. Consultez le guide d’installation du SDK React Native. 3. Créez des produits dans l’Adapty Dashboard. 4. Configurez des flows ou des paywalls dans les builders et assignez-leur des produits. 5. Créez des placements et assignez-leur vos flows ou paywalls. 6. Récupérez les flows et leur configuration dans le code de votre application mobile.

En mode Observateur, le SDK n’effectue pas les achats à votre place. Lorsqu’un utilisateur appuie sur le bouton d’achat ou de restauration dans un flow ou un paywall 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.

Pour le composant React, passez les gestionnaires en tant que props à 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
    />
  );
}

Dans le composant intégré, la valeur retournée par un handler ne ferme pas le flow — démontez vous-même le composant après un achat ou une restauration réussis.

Pour une présentation modale, définissez les handlers sur la vue que vous avez créée :


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 :

Callback	Description
onStartPurchase()	Ce callback doit être invoqué pour notifier AdaptyUI que l’achat a démarré.
onFinishPurchase()	Ce callback doit être invoqué pour notifier AdaptyUI que l’achat est terminé.
onStartRestore()	Ce callback doit être invoqué pour notifier AdaptyUI que la restauration a démarré.
onFinishRestore()	Ce callback doit être invoqué pour notifier AdaptyUI que la restauration est terminée.

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.

N’oubliez pas de signaler la transaction et de l’associer au paywall. Sinon, Adapty ne reconnaîtra pas la transaction et ne pourra pas déterminer le paywall source de l’achat.