Hiển thị paywall Paywall Builder trong Observer mode trên iOS SDK

Nếu bạn đã tùy chỉnh paywall bằng Paywall Builder, bạn không cần phải lo lắng về việc render nó trong code ứng dụng để hiển thị cho người dùng. Paywall đó đã bao gồm cả nội dung lẫn cách thức hiển thị.

Phần này chỉ áp dụng cho Observer mode. Nếu bạn không làm việc trong Observer mode, hãy tham khảo iOS - Hiển thị paywall Paywall Builder.

Trước khi bắt đầu hiển thị flow (Click để mở rộng)

Thiết lập tích hợp ban đầu của Adapty với App Store.
Cài đặt và cấu hình Adapty SDK. Đảm bảo đặt tham số observerMode thành true. Tham khảo hướng dẫn cài đặt iOS SDK.
Tạo sản phẩm trong Adapty Dashboard.
Cấu hình flow hoặc paywall trong các builder và gán sản phẩm cho chúng.
Tạo placement và gán flow hoặc paywall vào đó.
Lấy flow và cấu hình của chúng trong code ứng dụng.

Implement đối tượng AdaptyObserverModeResolver. Protocol này giống như trong SDK v3 — observer mode không thay đổi giữa việc render flow và paywall:

func observerMode(didInitiatePurchase product: AdaptyPaywallProduct,
                  onStartPurchase: @escaping () -> Void,
                  onFinishPurchase: @escaping () -> Void) {
       // use the product object to handle the purchase
       // call onStartPurchase / onFinishPurchase to notify AdaptyUI about the purchase progress
}

func observerModeDidInitiateRestorePurchases(onStartRestore: @escaping () -> Void,
                                             onFinishRestore: @escaping () -> Void) {
       // call onStartRestore / onFinishRestore to notify AdaptyUI about the restore progress
}

Tạo đối tượng cấu hình flow, truyền resolver của bạn vào tham số observerModeResolver::

do {
    let flowConfiguration = try await AdaptyUI.getFlowConfiguration(
        forFlow: flow,
        observerModeResolver: <AdaptyObserverModeResolver>
    )
} catch {
    // handle the error
}

Tham số yêu cầu:

Tham số	Bắt buộc	Mô tả
forFlow	bắt buộc	Đối tượng `AdaptyFlow` lấy qua `Adapty.getFlow(placementId:)`. Xem Lấy flow và paywall.
observerModeResolver	bắt buộc	`AdaptyObserverModeResolver` bạn đã implement ở trên.

Khởi tạo flow controller bằng AdaptyUI.flowController(with:delegate:):

import AdaptyUI

let visualFlow = try AdaptyUI.flowController(
    with: flowConfiguration,
    delegate: <AdaptyFlowControllerDelegate>
)

Tham số yêu cầu:

Tham số	Bắt buộc	Mô tả
flowConfiguration	bắt buộc	Đối tượng `AdaptyUI.FlowConfiguration` chứa thông tin hiển thị của flow. Xem Lấy flow và paywall.
delegate	bắt buộc	`AdaptyFlowControllerDelegate` để lắng nghe các sự kiện của flow. Xem Xử lý sự kiện flow & paywall.

Giá trị trả về:

Đối tượng	Mô tả
AdaptyFlowController	Đối tượng đại diện cho màn hình flow được yêu cầu.

Hiển thị controller:
```
present(visualFlow, animated: true)
```

Đừng quên liên kết paywall với giao dịch mua. Nếu không, Adapty sẽ không xác định được paywall nguồn của giao dịch mua.

Trong SwiftUI, lấy cấu hình flow cùng với resolver và truyền vào modifier .flow:

@State var flowPresented = false
@State var flowConfiguration: AdaptyUI.FlowConfiguration?

var body: some View {
    Text("Hello, AdaptyUI!")
        .flow(
            isPresented: $flowPresented,
            flowConfiguration: flowConfiguration,
            didPerformAction: { action in
                switch action {
                    case .close:
                        flowPresented = false
                    default:
                        break
                }
            },
            didFailPurchase: { product, error in /* handle the error */ },
            didFinishRestore: { profile in /* check access level and dismiss */ },
            didFailRestore: { error in /* handle the error */ },
            didReceiveError: { error in flowPresented = false }
        )
        .task {
            flowConfiguration = try? await AdaptyUI.getFlowConfiguration(
                forFlow: flow,
                observerModeResolver: <AdaptyObserverModeResolver>
            )
        }
}

Tham số observerModeResolver: trong getFlowConfiguration là thứ giúp flow được render tôn trọng logic mua hàng tùy chỉnh của bạn — bản thân modifier sử dụng các callback giống như full mode.

Đừng quên liên kết paywall với giao dịch mua. Nếu không, Adapty sẽ không xác định được paywall nguồn của giao dịch mua.

Trước khi bắt đầu hiển thị paywall (Click để mở rộng)

Thiết lập tích hợp ban đầu của Adapty với Google Play và với App Store.
Cài đặt và cấu hình Adapty SDK. Đảm bảo đặt tham số observerMode thành true. Tham khảo hướng dẫn theo framework cho iOS.
Tạo sản phẩm trong Adapty Dashboard.
Cấu hình paywall, gán sản phẩm cho chúng và tùy chỉnh bằng Paywall Builder trong Adapty Dashboard.
Tạo placement và gán paywall vào đó trong Adapty Dashboard.
Lấy paywall Paywall Builder và cấu hình của chúng trong code ứng dụng.

Implement đối tượng AdaptyObserverModeResolver:

func observerMode(didInitiatePurchase product: AdaptyPaywallProduct,
                  onStartPurchase: @escaping () -> Void,
                  onFinishPurchase: @escaping () -> Void) {
       // use the product object to handle the purchase
       // use the onStartPurchase and onFinishPurchase callbacks to notify AdaptyUI about the process of the purchase
}

func observerModeDidInitiateRestorePurchases(onStartRestore: @escaping () -> Void,
                                             onFinishRestore: @escaping () -> Void) {
       // use the onStartRestore and onFinishRestore callbacks to notify AdaptyUI about the process of the restore
}

Sự kiện observerMode(didInitiatePurchase:onStartPurchase:onFinishPurchase:) sẽ thông báo cho bạn rằng người dùng đã bắt đầu một giao dịch mua. Bạn có thể kích hoạt flow mua hàng tùy chỉnh của mình khi nhận được callback này.

Sự kiện observerModeDidInitiateRestorePurchases(onStartRestore:onFinishRestore:) sẽ thông báo cho bạn rằng người dùng đã bắt đầu khôi phục. Bạn có thể kích hoạt flow khôi phục tùy chỉnh của mình khi nhận được callback này.

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

Callback	Mô tả
onStartPurchase()	Gọi callback này để thông báo cho AdaptyUI rằng việc mua hàng đã bắt đầu.
onFinishPurchase()	Gọi callback này để thông báo cho AdaptyUI rằng việc mua hàng đã hoàn tất.
onStartRestore()	Gọi callback này để thông báo cho AdaptyUI rằng việc khôi phục đã bắt đầu.
onFinishRestore()	Gọi callback này để thông báo cho AdaptyUI rằng việc khôi phục đã hoàn tất.

Tạo đối tượng cấu hình paywall:

do {
    let paywallConfiguration = try AdaptyUI.getPaywallConfiguration(
     forPaywall: <paywall object>, 
     observerModeResolver: <AdaptyObserverModeResolver>
     )
} catch {
    // handle the error
}

Tham số yêu cầu:

Tham số	Bắt buộc	Mô tả
Paywall	bắt buộc	Đối tượng `AdaptyPaywall` để lấy controller cho paywall mong muốn.
ObserverModeResolver	bắt buộc	Đối tượng `AdaptyObserverModeResolver` bạn đã implement ở bước trước.

Khởi tạo paywall trực quan muốn hiển thị bằng phương thức .paywallController(for:products:viewConfiguration:delegate:):

import AdaptyUI

let visualPaywall = AdaptyUI.paywallController(
    with: <paywall configuration object>,
    delegate: <AdaptyPaywallControllerDelegate>
)

Tham số yêu cầu:

Tham số	Bắt buộc	Mô tả
Paywall Configuration	bắt buộc	Đối tượng `AdaptyUI.PaywallConfiguration` chứa thông tin hiển thị của paywall. Sử dụng phương thức `AdaptyUI.getPaywallConfiguration(forPaywall:locale:)`. Tham khảo chủ đề Lấy paywall Paywall Builder và cấu hình của chúng để biết thêm chi tiết.
Delegate	bắt buộc	`AdaptyPaywallControllerDelegate` để lắng nghe các sự kiện paywall. Tham khảo chủ đề Xử lý sự kiện paywall để biết thêm chi tiết.

Giá trị trả về:

Đối tượng	Mô tả
AdaptyPaywallController	Đối tượng đại diện cho màn hình paywall được yêu cầu.

Sau khi đối tượng được tạo thành công, bạn có thể hiển thị nó như sau:

present(visualPaywall, animated: true)

Đừng quên liên kết paywall với giao dịch mua. Nếu không, Adapty sẽ không xác định được paywall nguồn của giao dịch mua.

Để hiển thị paywall trực quan trên màn hình thiết bị, hãy sử dụng modifier .paywall trong SwiftUI:

@State var paywallPresented = false

var body: some View {
	Text("Hello, AdaptyUI!")
			.paywall(
          isPresented: $paywallPresented,
          paywallConfiguration: <paywall configuration object>,
          didPerformAction: { action in
              switch action {
                  case .close:
                      paywallPresented = false
                  default:
                      // Handle other actions
                      break
              }
          },
          didFinishRestore: { profile in /* check access level and dismiss */  },
          didFailRestore: { error in /* handle the error */ },
          didFailRendering: { error in paywallPresented = false }
      )
}

Tham số yêu cầu:

Tham số	Bắt buộc	Mô tả
Paywall Configuration	bắt buộc	Đối tượng `AdaptyUI.PaywallConfiguration` chứa thông tin hiển thị của paywall. Sử dụng phương thức `AdaptyUI.getPaywallConfiguration(forPaywall:locale:)`. Tham khảo chủ đề Lấy paywall Paywall Builder và cấu hình của chúng để biết thêm chi tiết.
Products	tùy chọn	Cung cấp một mảng các đối tượng `AdaptyPaywallProduct` để tối ưu thời gian hiển thị sản phẩm trên màn hình. Nếu truyền `nil`, AdaptyUI sẽ tự động lấy các sản phẩm cần thiết.
TagResolver	tùy chọn	Xác định một dictionary các tag tùy chỉnh và giá trị tương ứng. Tag tùy chỉnh đóng vai trò placeholder trong nội dung paywall, được thay thế động bằng các chuỗi cụ thể để cá nhân hóa nội dung trong paywall. Tham khảo chủ đề Tag tùy chỉnh trong Paywall Builder để biết thêm chi tiết.
ObserverModeResolver	tùy chọn	Đối tượng `AdaptyObserverModeResolver` bạn đã implement ở bước trước.

Tham số closure:

Tham số closure	Mô tả
didFinishRestore	Được gọi nếu Adapty.restorePurchases() thành công.
didFailRestore	Được gọi nếu Adapty.restorePurchases() thất bại.
didFailRendering	Được gọi nếu xảy ra lỗi trong quá trình render giao diện.

Tham khảo chủ đề iOS - Xử lý sự kiện để biết các tham số closure khác.

Đừng quên liên kết paywall với giao dịch mua. Nếu không, Adapty sẽ không xác định được paywall nguồn của giao dịch mua.

Trước khi bắt đầu hiển thị paywall (Click để mở rộng)

Thiết lập tích hợp ban đầu của Adapty với Google Play và với App Store.
Cài đặt và cấu hình Adapty SDK. Đảm bảo đặt tham số observerMode thành true. Tham khảo hướng dẫn theo framework cho iOS, React Native, Flutter và Unity.
Tạo sản phẩm trong Adapty Dashboard.
Cấu hình paywall, gán sản phẩm cho chúng và tùy chỉnh bằng Paywall Builder trong Adapty Dashboard.
Tạo placement và gán paywall vào đó trong Adapty Dashboard.
Lấy paywall Paywall Builder và cấu hình của chúng trong code ứng dụng.

Implement đối tượng AdaptyObserverModeDelegate:

func paywallController(_ controller: AdaptyPaywallController,
                       didInitiatePurchase product: AdaptyPaywallProduct,
                       onStartPurchase: @escaping () -> Void,
                       onFinishPurchase: @escaping () -> Void) {
       // use the product object to handle the purchase
       // use the onStartPurchase and onFinishPurchase callbacks to notify AdaptyUI about the process of the purchase
}

Sự kiện paywallController(_:didInitiatePurchase:onStartPurchase:onFinishPurchase:) sẽ thông báo cho bạn rằng người dùng đã bắt đầu một giao dịch mua. Bạn có thể kích hoạt flow mua hàng tùy chỉnh của mình khi nhận được sự kiện này.

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

Callback	Mô tả
onStartPurchase	Gọi callback này để thông báo cho AdaptyUI rằng việc mua hàng đã bắt đầu.
onFinishPurchase	Gọi callback này để thông báo cho AdaptyUI rằng việc mua hàng đã hoàn tất.

Khởi tạo paywall trực quan muốn hiển thị bằng phương thức .paywallController(for:products:viewConfiguration:delegate:observerModeDelegate:):

import AdaptyUI

let visualPaywall = AdaptyUI.paywallController(
    for: <paywall object>,
    products: <paywall products array>,
    viewConfiguration: <LocalizedViewConfiguration>,
    delegate: <AdaptyPaywallControllerDelegate>
    observerModeDelegate: <AdaptyObserverModeDelegate>
)

Tham số yêu cầu:

Tham số	Bắt buộc	Mô tả
Paywall	bắt buộc	Đối tượng `AdaptyPaywall` để lấy controller cho paywall mong muốn.
Products	tùy chọn	Cung cấp một mảng các đối tượng `AdaptyPaywallProduct` để tối ưu thời gian hiển thị sản phẩm trên màn hình. Nếu truyền `nil`, AdaptyUI sẽ tự động lấy các sản phẩm cần thiết.
ViewConfiguration	bắt buộc	Đối tượng `AdaptyUI.LocalizedViewConfiguration` chứa thông tin hiển thị của paywall. Sử dụng phương thức `AdaptyUI.getViewConfiguration(paywall:locale:)`. Tham khảo chủ đề Lấy paywall Paywall Builder và cấu hình của chúng để biết thêm chi tiết.
Delegate	bắt buộc	`AdaptyPaywallControllerDelegate` để lắng nghe các sự kiện paywall. Tham khảo chủ đề Xử lý sự kiện paywall để biết thêm chi tiết.
ObserverModeDelegate	bắt buộc	Đối tượng `AdaptyObserverModeDelegate` bạn đã implement ở bước trước.
TagResolver	tùy chọn	Xác định một dictionary các tag tùy chỉnh và giá trị tương ứng. Tag tùy chỉnh đóng vai trò placeholder trong nội dung paywall, được thay thế động bằng các chuỗi cụ thể để cá nhân hóa nội dung trong paywall. Tham khảo chủ đề Tag tùy chỉnh trong Paywall Builder để biết thêm chi tiết.

Giá trị trả về:

Đối tượng	Mô tả
AdaptyPaywallController	Đối tượng đại diện cho màn hình paywall được yêu cầu.

Sau khi đối tượng được tạo thành công, bạn có thể hiển thị nó như sau:

present(visualPaywall, animated: true)

Đừng quên liên kết paywall với giao dịch mua. Nếu không, Adapty sẽ không xác định được paywall nguồn của giao dịch mua.

Để hiển thị paywall trực quan trên màn hình thiết bị, hãy sử dụng modifier .paywall trong SwiftUI:

@State var paywallPresented = false

var body: some View {
	Text("Hello, AdaptyUI!")
			.paywall(
          isPresented: $paywallPresented,
          paywall: <paywall object>,
          configuration: <LocalizedViewConfiguration>,
          didPerformAction: { action in
              switch action {
                  case .close:
                      paywallPresented = false
                  default:
                      // Handle other actions
                      break
              }
          },
          didFinishRestore: { profile in /* check access level and dismiss */  },
          didFailRestore: { error in /* handle the error */ },
          didFailRendering: { error in paywallPresented = false },
          observerModeDidInitiatePurchase: { product, onStartPurchase, onFinishPurchase in
              // use the product object to handle the purchase
              // use the onStartPurchase and onFinishPurchase callbacks to notify AdaptyUI about the process of the purchase
          }, 
      )
}

Tham số yêu cầu:

Tham số	Bắt buộc	Mô tả
Paywall	bắt buộc	Đối tượng `AdaptyPaywall` để lấy controller cho paywall mong muốn.
Product	tùy chọn	Cung cấp một mảng các đối tượng `AdaptyPaywallProduct` để tối ưu thời gian hiển thị sản phẩm trên màn hình. Nếu truyền `nil`, AdaptyUI sẽ tự động lấy các sản phẩm cần thiết.
Configuration	bắt buộc	Đối tượng `AdaptyUI.LocalizedViewConfiguration` chứa thông tin hiển thị của paywall. Sử dụng phương thức `AdaptyUI.getViewConfiguration(paywall:locale:)`. Tham khảo chủ đề Lấy paywall Paywall Builder và cấu hình của chúng để biết thêm chi tiết.
TagResolver	tùy chọn	Xác định một dictionary các tag tùy chỉnh và giá trị tương ứng. Tag tùy chỉnh đóng vai trò placeholder trong nội dung paywall, được thay thế động bằng các chuỗi cụ thể để cá nhân hóa nội dung trong paywall. Tham khảo chủ đề Tag tùy chỉnh trong paywall builder để biết thêm chi tiết.

Tham số closure:

Tham số closure	Mô tả
didFinishRestore	Được gọi nếu Adapty.restorePurchases() thành công.
didFailRestore	Được gọi nếu Adapty.restorePurchases() thất bại.
didFailRendering	Được gọi nếu xảy ra lỗi trong quá trình render giao diện.
observerModeDidInitiatePurchase	Được gọi khi người dùng bắt đầu một giao dịch mua.

Tham khảo chủ đề iOS - Xử lý sự kiện để biết các tham số closure khác.

Đừng quên liên kết paywall với giao dịch mua. Nếu không, Adapty sẽ không xác định được paywall nguồn của giao dịch mua.