Présenter des flows en mode Observer dans le SDK Capacitor

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 il doit l’être.

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

1. Définissez les gestionnaires d’événements du mode Observer sur la vue. Contrairement aux autres plateformes, il n’existe pas d’objet resolver séparé — les gestionnaires font partie des gestionnaires d’événements habituels, donc définissez-les sur chaque vue que vous créez :

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

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’invoquer les callbacks suivants pour notifier AdaptyUI de l’avancement de l’achat ou de la restauration. Cela est nécessaire pour le bon fonctionnement du flow, notamment pour afficher le loader, entre autres :

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