If you’ve customized a flow or paywall using the builder, you don’t need to worry about rendering it in your mobile app code to display it to the user. Such a flow or paywall contains both what should be shown and how it should be shown.

Before you start presenting flows (Click to Expand)

1. Set up initial integration of Adapty with the App Store and with Google Play.
2. Install and configure Adapty SDK. Make sure to set the observerMode parameter to true. Refer to the Capacitor SDK installation guide.
3. Create products in the Adapty Dashboard.
4. Configure flows or paywalls in the builders and assign products to them.
5. Create placements and assign your flows or paywalls to them.
6. Fetch flows and their configuration in your mobile app code.

In Observer mode, the SDK does not make purchases for you. When a user taps the purchase or restore button in an Adapty-rendered flow or paywall, the SDK invokes your onObserverPurchaseInitiated or onObserverRestoreInitiated event handler instead — perform the purchase or restore with your own code there.

1. Set the observer-mode event handlers on the view. Unlike other platforms, there is no separate resolver object — the handlers are part of the regular event handlers, so set them on every view you create:

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

   The onObserverPurchaseInitiated handler informs you that the user has initiated a purchase, and onObserverRestoreInitiated — that the user has initiated a restore. Trigger your custom purchase or restore flow in response.

   Also, remember to invoke the following callbacks to notify AdaptyUI about the process of the purchase or restore. This is necessary for proper flow behavior, such as showing the loader, among other things:

   Callback	Description
   onStartPurchase()	The callback should be invoked to notify AdaptyUI that the purchase is started.
   onFinishPurchase()	The callback should be invoked to notify AdaptyUI that the purchase is finished.
   onStartRestore()	The callback should be invoked to notify AdaptyUI that the restore is started.
   onFinishRestore()	The callback should be invoked to notify AdaptyUI that the restore is finished.

2. Present the flow view as usual: fetch the flow and create its view, then present it. No extra parameters are needed — the handlers fire only when the SDK was activated with observerMode: true.