---
title: "Hiển thị flow trong Observer mode - Kotlin Multiplatform"
description: "Hiển thị flow và paywall Paywall Builder trong Observer mode trong ứng dụng Kotlin Multiplatform của bạn trong khi xử lý giao dịch mua bằng code của riêng bạn."
---

Nếu bạn đã tùy chỉnh một flow hoặc paywall bằng builder, bạn không cần lo lắng về việc render nó trong code ứng dụng di động để hiển thị cho người dùng. Flow hoặc paywall đó đã chứa cả nội dung cần hiển thị lẫn cách hiển thị.

:::warning
Phần này chỉ áp dụng cho [Observer mode](observer-vs-full-mode). Nếu bạn không làm việc ở Observer mode, hãy tham khảo chủ đề [Hiển thị flows & paywalls](kmp-present-paywalls).
:::

:::info
Tính năng này yêu cầu Adapty Kotlin Multiplatform SDK 4.0 (beta) trở lên — trước đây chỉ có trong SDK native iOS và Android. Xem [hướng dẫn migration](migration-to-kmp-sdk-v4) để nâng cấp.
:::

<details>
   <summary>Trước khi bắt đầu hiển thị flow (Click to Expand)</summary>

1. Thiết lập tích hợp ban đầu của Adapty [với App Store](initial_ios) và [với Google Play](initial-android).
   2. Cài đặt và cấu hình Adapty SDK. Đảm bảo gọi `withObserverMode(true)` trong configuration builder. Tham khảo [hướng dẫn cài đặt Kotlin Multiplatform SDK](sdk-installation-kotlin-multiplatform#activate-adapty-sdk).
   3. [Tạo sản phẩm](create-product) trong Adapty Dashboard.
   4. [Cấu hình flow hoặc paywall trong các builder](create-paywall) và gán sản phẩm cho chúng.
   5. [Tạo placement và gán flow hoặc paywall vào chúng](create-placement).
   6. [Lấy flow và cấu hình của chúng](kmp-get-pb-paywalls) trong code ứng dụng di động của bạn.

</details>

Trong chế độ Observer, SDK không thực hiện mua hàng thay cho bạn. Khi người dùng nhấn nút mua hoặc khôi phục trong flow hay paywall do Adapty hiển thị, SDK sẽ gọi `AdaptyUIObserverModeResolver` của bạn — hãy thực hiện việc mua hoặc khôi phục bằng code của chính bạn ở đó.

1. Triển khai interface `AdaptyUIObserverModeResolver`:

   ```kotlin showLineNumbers
   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()
       }
   }
   ```

`observerModeDidInitiatePurchase` thông báo cho bạn biết người dùng đã khởi tạo một giao dịch mua, còn `observerModeDidInitiateRestore` — rằng người dùng đã khởi tạo một lần khôi phục. Hãy kích hoạt flow mua hàng hoặc khôi phục tùy chỉnh của bạn để phản hồi.

   Ngoài ra, hãy nhớ gọi các callback sau để thông báo cho AdaptyUI về quá trình mua hàng hoặc khôi phục. Điều này cần thiết để flow hoạt động đúng, chẳng hạn như hiển thị loader và nhiều thứ khác:

| Callback           | Mô tả                                                                                          |
   | :----------------- | :--------------------------------------------------------------------------------------------- |
   | onStartPurchase()  | Callback cần được gọi để thông báo cho AdaptyUI rằng quá trình mua hàng đã bắt đầu.           |
   | onFinishPurchase() | Callback cần được gọi để thông báo cho AdaptyUI rằng quá trình mua hàng đã hoàn tất.          |
   | onStartRestore()   | Callback cần được gọi để thông báo cho AdaptyUI rằng quá trình khôi phục đã bắt đầu.          |
   | onFinishRestore()  | Callback cần được gọi để thông báo cho AdaptyUI rằng quá trình khôi phục đã hoàn tất.         |

Flow sẽ vẫn mở trong khi code của bạn chạy — hãy tự đóng nó sau khi mua hàng thành công hoặc khôi phục thành công.

2. Đăng ký resolver trước khi hiển thị bất kỳ màn hình nào:

   ```kotlin showLineNumbers
   import com.adapty.kmp.AdaptyUI

   AdaptyUI.setObserverModeResolver(MyObserverModeResolver())
   ```

   Nếu không có resolver được đăng ký, flow view không có cách nào chuyển giao việc mua hàng sang code của bạn, và sẽ không có gì xảy ra khi người dùng nhấn nút mua hàng.

3. Tạo và hiển thị flow view như bình thường: [lấy flow và tạo view của nó](kmp-get-pb-paywalls), sau đó [hiển thị nó](kmp-present-paywalls). Không cần thêm tham số nào — một khi resolver đã được đăng ký, mọi flow hoặc paywall do Adapty render đều định tuyến các giao dịch mua và khôi phục qua nó.

:::warning
Đừng quên [báo cáo giao dịch và liên kết nó với paywall](report-transactions-observer-mode-kmp). Nếu không, Adapty sẽ không nhận ra giao dịch và sẽ không xác định được paywall nguồn của giao dịch mua.
:::