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

Si vous utilisez le mode Observer, vous gérez votre propre logique d’achat. Mais vous pouvez déléguer l’interface du paywall au Flow & Paywall Builder.

Concevez l’écran dans le builder, et le SDK Adapty le rend nativement. Modifiez les textes, la mise en page et les tarifs quand vous le souhaitez, sans passer par une mise à jour de l’app.

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

Avant de commencer

Vous avez besoin de :

• Adapty Capacitor SDK 4.1 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 Capacitor.
• 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 associez-y des produits.
• Un placement de flow : Créez un placement et assignez-y votre flow.
• Le flow récupéré dans votre application : Récupérez le flow et sa configuration avant de l’afficher.

Implémentation

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 à la place. 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 à d’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 gestionnaire onObserverPurchaseInitiated vous informe que l’utilisateur a lancé un achat, et onObserverRestoreInitiated — que l’utilisateur a lancé 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 un comportement correct du flow, notamment pour afficher le chargement, entre autres :

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