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 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 cần hiển thị lẫn cách thức hiển thị.

Phần này chỉ áp dụng cho chế độ Observer. Nếu bạn không làm việc ở chế độ Observer, hãy xem iOS - Hiển thị paywall từ Paywall Builder.

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

Thiết lập tích hợp ban đầu của Adapty với App Store. 2. 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. 3. Tạo sản phẩm trong Adapty Dashboard. 4. Cấu hình flow hoặc paywall trong các builder và gán sản phẩm vào chúng. 5. Tạo placement và gán flow hoặc paywall vào chúng. 6. Lấy flow và cấu hình của chúng trong code ứng dụng di động của bạn.

Triển khai đối tượng AdaptyObserverModeResolver. Giao thức này giống như trong SDK v3 — bản thân observer mode không thay đổi giữa flow và paywall rendering:

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ố của request:

Tham số	Bắt buộc	Mô tả
forFlow	bắt buộc	Một đối tượng `AdaptyFlow` lấy được qua `Adapty.getFlow(placementId:)`. Xem Lấy flow và paywall.
observerModeResolver	bắt buộc	`AdaptyObserverModeResolver` mà bạn đã triển khai ở 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:

Parameter	Presence	Description
flowConfiguration	bắt buộc	Một đối tượng `AdaptyUI.FlowConfiguration` chứa các chi tiết hiển thị của flow. Xem Lấy flows và paywalls.
delegate	bắt buộc	Một `AdaptyFlowControllerDelegate` để lắng nghe các sự kiện của flow. Xem Xử lý sự kiện flow & paywall.

Trả về:

Đối tượng	Mô tả
AdaptyFlowController	Một đố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 bằng 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
                }
            },
            didFinishPurchase: { product, purchaseResult in /* dismiss, or do nothing to let the flow continue */ },
            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: trên getFlowConfiguration là thứ giúp flow được render tôn trọng logic mua hàng tùy chỉnh của bạn — modifier này sử dụng cùng các callback như chế độ đầy đủ.

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

Trước khi bắt đầu hiển thị paywall (Nhấn để 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. 2. 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 từng framework cho iOS. 3. Tạo sản phẩm trong Adapty Dashboard. 4. Cấu hình paywall, gán sản phẩm vào đó và tùy chỉnh bằng Paywall Builder trong Adapty Dashboard. 5. Tạo placement và gán paywall vào đó trong Adapty Dashboard. 6. Lấy paywall từ Paywall Builder cùng cấu hình của chúng trong code ứng dụng di động của bạn.

Triển khai đố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 đã khởi tạo 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 để phản hồi callback này.

Sự kiện observerModeDidInitiateRestorePurchases(onStartRestore:onFinishRestore:) sẽ thông báo cho bạn rằng người dùng đã khởi tạo một yêu cầ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 để phản hồi callback này. 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 để paywall hoạt động đúng, chẳng hạn như hiển thị loader và các 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.

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:

Parameter	Presence	Description
Paywall	required	Đối tượng `AdaptyPaywall` để lấy controller cho paywall mong muốn.
ObserverModeResolver	required	Đối tượng `AdaptyObserverModeResolver` bạn đã triển khai ở bước trước

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

import AdaptyUI

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

Các tham số yêu cầu:

Tham số	Bắt buộc	Mô tả
Paywall Configuration	bắt buộc	Một đố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ủ đề Tải paywall Paywall Builder và cấu hình của chúng để biết thêm chi tiết.
Delegate	bắt buộc	Một `AdaptyPaywallControllerDelegate` để lắng nghe các sự kiện của paywall. Tham khảo chủ đề Xử lý sự kiện paywall để biết thêm chi tiết.
Kết quả 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 hàng. Nếu không, Adapty sẽ không thể xác định được paywall nguồn của giao dịch mua hàng.

Để 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 }
      )
}

(empty input — nothing to translate)

Tham số	Bắt buộc	Mô tả
Paywall Configuration	bắt buộc	Một đố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ủ đề Fetch Paywall Builder paywalls and their configuration để 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 hóa thời điểm hiển thị sản phẩm trên màn hình. Nếu truyền vào `nil`, AdaptyUI sẽ tự động tải các sản phẩm cần thiết.
TagResolver	tùy chọn	Định nghĩa một dictionary chứa các custom tag và giá trị tương ứng. Custom tag đóng vai trò là 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ủ đề Custom tags in Paywall Builder để biết thêm chi tiết.
ObserverModeResolver	tùy chọn	Đối tượng `AdaptyObserverModeResolver` mà bạn đã triển khai ở bước trước
Các tham số closure:

Tham số closure	Mô tả
didFinishRestore	Nếu Adapty.restorePurchases() thành công, callback này sẽ được gọi.
didFailRestore	Nếu Adapty.restorePurchases() thất bại, callback này sẽ được gọi.
didFailRendering	Nếu xảy ra lỗi trong quá trình render giao diện, callback này sẽ được gọi.
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.

Trước khi bắt đầu hiển thị paywall (Nhấn để 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 từng framework: 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 vào paywall và tùy chỉnh chúng bằng Paywall Builder trong Adapty Dashboard.
Tạo placement và gán paywall vào đó trong Adapty Dashboard.
Lấy paywall từ Paywall Builder và cấu hình của chúng trong code ứng dụng di động.

Triển khai đố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
}

paywallController(_:didInitiatePurchase:onStartPurchase:onFinishPurchase:) sẽ thông báo cho bạn biết khi 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 để phản hồi sự kiện này.

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. Điều này cần thiết để paywall hoạt động đúng, chẳng hạn như hiển thị trạng thái tải, v.v.:

Callback	Mô tả
onStartPurchase	Callback cần được gọi để thông báo cho AdaptyUI rằng quá trình mua đã bắt đầu.
onFinishPurchase	Callback cần được gọi để thông báo cho AdaptyUI rằng quá trình mua đã hoàn thành.

Khởi tạo paywall 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 hóa thời điểm hiển thị sản phẩm trên màn hình. Nếu truyền vào `nil`, AdaptyUI sẽ tự động tải 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ủ đề Tải paywall từ Paywall Builder và cấu hình của chúng để biết thêm chi tiết.
Delegate	bắt buộc	Đối tượng `AdaptyPaywallControllerDelegate` để lắng nghe các sự kiện của 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 đã triển khai ở bước trước.
TagResolver	tùy chọn	Định nghĩa một dictionary gồm các thẻ tùy chỉnh và giá trị tương ứng. Các thẻ tùy chỉnh đóng vai trò là 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ủ đề Custom tags in Paywall Builder để biết thêm chi tiết.
Trả về:

Đối tượng	Mô tả
AdaptyPaywallController	Một đố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 hàng. 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ị, 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
          }, 
      )
}

(empty input — no translatable prose or code to output)

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 hóa thời điểm hiển thị sản phẩm trên màn hình. Nếu truyền vào `nil`, AdaptyUI sẽ tự động tải 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 chi tiết về giao diện của paywall. Sử dụng phương thức `AdaptyUI.getViewConfiguration(paywall:locale:)`. Tham khảo chủ đề Lấy paywall từ Paywall Builder và cấu hình của chúng để biết thêm chi tiết.
TagResolver	tùy chọn	Định nghĩa một dictionary các thẻ tùy chỉnh và giá trị tương ứng của chúng. Các thẻ tùy chỉnh đóng vai trò là 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ủ đề Custom tags in paywall builder để biết thêm chi tiết.
Closure parameters:
Tham số closure	Mô tả
:----------------------------------	:---------------------------------------------------------------------------------------------
didFinishRestore	Nếu Adapty.restorePurchases() thành công, callback này sẽ được gọi.
didFailRestore	Nếu Adapty.restorePurchases() thất bại, callback này sẽ được gọi.
didFailRendering	Nếu xảy ra lỗi trong quá trình render giao diện, callback này sẽ được gọi.
observerModeDidInitiatePurchase	Callback này được gọi khi người dùng bắt đầu thực hiện 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 hàng. Nếu không, Adapty sẽ không xác định được paywall nguồn của giao dịch mua hàng.