---
title: "Afficher les flows en mode Observer dans le SDK Capacitor"
description: "Affichez les flows et les paywalls Paywall Builder en mode Observer dans votre application Capacitor tout en gérant les achats avec votre propre code."
---

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 l'afficher.

:::warning
Cette section concerne uniquement le [mode Observer](observer-vs-full-mode). Si vous ne travaillez pas en mode Observer, consultez la rubrique [Afficher les flows et paywalls](capacitor-present-paywalls).
:::

:::info
Cette fonctionnalité nécessite Adapty Capacitor SDK 4.0 ou une version ultérieure — elle n'était auparavant disponible que dans les SDK iOS et Android natifs. Consultez le [guide de migration](migration-to-capacitor-sdk-v4) pour effectuer la mise à niveau.
:::

<details>
   <summary>Avant de commencer à afficher des flows (Cliquer pour développer)</summary>

   1. Configurez l'intégration initiale d'Adapty [avec l'App Store](initial_ios) et [avec Google Play](initial-android).
   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 Capacitor](sdk-installation-capacitor#activate-adapty-module-of-adapty-sdk).
   3. [Créez des produits](create-product) dans l'Adapty Dashboard.
   4. [Configurez les flows ou paywalls dans les builders](create-paywall) et assignez-leur des produits.
   5. [Créez des placements et assignez-leur vos flows ou paywalls](create-placement).
   6. [Récupérez les flows et leur configuration](capacitor-get-pb-paywalls) dans le code de votre application mobile.

</details>

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 paywall rendu par Adapty, le SDK invoque 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 à d'autres plateformes, il n'existe pas d'objet resolver séparé — les gestionnaires font partie des [gestionnaires d'événements](capacitor-handling-events) habituels, définissez-les donc sur chaque vue que vous créez :

   ```typescript showLineNumbers title="Capacitor"
   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 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.

   Pensez également à invoquer les callbacks suivants pour notifier AdaptyUI de l'avancement de l'achat ou de la restauration. C'est nécessaire pour un comportement correct du flow, notamment l'affichage du loader :

   | Callback           | Description                                                                                      |
   | :----------------- | :----------------------------------------------------------------------------------------------- |
   | onStartPurchase()  | Ce callback doit être invoqué pour notifier AdaptyUI que l'achat a commencé.                    |
   | 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 commencé.             |
   | onFinishRestore()  | Ce callback doit être invoqué pour notifier AdaptyUI que la restauration est terminée.           |

2. Affichez la vue du flow comme d'habitude : [récupérez le flow et créez sa vue](capacitor-get-pb-paywalls), puis [affichez-la](capacitor-present-paywalls). Aucun paramètre supplémentaire n'est nécessaire — les gestionnaires se déclenchent uniquement lorsque le SDK a été activé avec `observerMode: true`.

:::warning
N'oubliez pas de [signaler la transaction et de l'associer au paywall](report-transactions-observer-mode-capacitor). Sans cela, Adapty ne reconnaîtra pas la transaction et ne pourra pas identifier le paywall source de l'achat.
:::