Present flows in Observer mode - Kotlin Multiplatform

If you use Observer mode, you are responsible for your own purchase logic. But you can delegate the paywall UI to the Flow & Paywall Builder.

Design the screen in the builder, and the Adapty SDK renders it natively. Update its copy, layout, and pricing whenever you want, without an app release.

This guide shows how to present a flow and handle the purchase callbacks. If Adapty completes purchases for you, see Display flows & paywalls instead.

Before you start

You need:

• Adapty Kotlin Multiplatform SDK 4.0 (beta) or later: Earlier versions can’t render flows. To move an existing app, see the migration guide.
• withObserverMode(true) called in the configuration builder: See the Kotlin Multiplatform SDK installation guide.
• Initial store integration: Set up Adapty with the App Store and with Google Play.
• A published flow with products: Build it in the Flow & Paywall Builder and assign products to it.
• A flow placement: Create a placement and assign your flow to it.
• The flow fetched in your app: Get the flow and its configuration before you present it.

Implementation

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, the SDK calls your AdaptyUIObserverModeResolver instead — perform the purchase or restore with your own code there.

1. Implement the AdaptyUIObserverModeResolver interface:

   import com.adapty.kmp.AdaptyUIObserverModeResolver
   import com.adapty.kmp.models.AdaptyPaywallProduct
   import com.adapty.kmp.models.AdaptyUIFlowView
   
   class MyObserverModeResolver : AdaptyUIObserverModeResolver {
       override fun observerModeDidInitiatePurchase(
           view: AdaptyUIFlowView,
           product: AdaptyPaywallProduct,
           onStartPurchase: () -> Unit,
           onFinishPurchase: () -> Unit
       ) {
           onStartPurchase() // the view shows its loading indicator
           // make the purchase with your own code,
           // then report the transaction to Adapty and call:
           onFinishPurchase() // the view hides the loading indicator
       }
   
       override fun observerModeDidInitiateRestore(
           view: AdaptyUIFlowView,
           onStartRestore: () -> Unit,
           onFinishRestore: () -> Unit
       ) {
           onStartRestore()
           // restore purchases with your own code, then:
           onFinishRestore()
       }
   }

   The observerModeDidInitiatePurchase method informs you that the user has initiated a purchase, and observerModeDidInitiateRestore — 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.

   The flow stays open while your code runs — dismiss it yourself after a successful purchase or restore.

2. Register the resolver before presenting any screen:

   import com.adapty.kmp.AdaptyUI
   
   AdaptyUI.setObserverModeResolver(MyObserverModeResolver())

   Without a registered resolver, the flow view has no way to hand the purchase over to your code, and nothing happens when the user taps the purchase button.

3. Create and present the flow view as usual: fetch the flow and create its view, then present it. No extra parameters are needed — once the resolver is registered, every Adapty-rendered flow routes purchases and restores through it.