Hiển thị paywall được tạo bằng Paywall Builder ở chế độ Observer trên Android 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 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 tham khảo chủ đề Android - Hiển thị paywall bằng Paywall Builder.
Trước khi bắt đầu hiển thị paywall (Nhấp để 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ố
observerModethànhtrue. Tham khảo hướng dẫn theo framework cho Android. - 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 chúng trong Adapty Dashboard.
- Lấy paywall Paywall Builder và cấu hình của chúng trong code ứng dụng của bạn.
- Triển khai
AdaptyUiObserverModeHandler.
Sự kiện onPurchaseInitiated sẽ thông báo cho bạn khi người dùng bắt đầu thực hiện mua hàng. Bạn có thể kích hoạt flow mua hàng tùy chỉnh của mình trong callback này:
val observerModeHandler =
AdaptyUiObserverModeHandler { product, paywall, paywallView, onStartPurchase, onFinishPurchase ->
onStartPurchase()
yourBillingClient.makePurchase(
product,
onSuccess = { purchase ->
onFinishPurchase()
//handle success
},
onError = {
onFinishPurchase()
//handle error
},
onCancel = {
onFinishPurchase()
//handle cancel
}
)
} AdaptyUiObserverModeHandler observerModeHandler = (product, paywall, paywallView, onStartPurchase, onFinishPurchase) -> {
onStartPurchase.invoke();
yourBillingClient.makePurchase(
product,
purchase -> {
onFinishPurchase.invoke();
//handle success
},
error -> {
onFinishPurchase.invoke();
//handle error
},
() -> { //cancellation
onFinishPurchase.invoke();
//handle cancel
}
);
}; Để xử lý khôi phục giao dịch ở chế độ Observer, hãy override getRestoreHandler(). Mặc định nó trả về null, tức là sử dụng flow Adapty.restorePurchases() tích hợp sẵn của Adapty. Để cung cấp triển khai khôi phục tùy chỉnh:
val observerModeHandler = object : AdaptyUiObserverModeHandler {
// onPurchaseInitiated implementation (see above)
override fun getRestoreHandler() =
AdaptyUiObserverModeHandler.RestoreHandler { onStartRestore, onFinishRestore ->
onStartRestore()
yourBillingClient.restorePurchases(
onSuccess = { restoredPurchases ->
onFinishRestore()
//handle successful restore
},
onError = {
onFinishRestore()
//handle error
}
)
}
} AdaptyUiObserverModeHandler observerModeHandler = new AdaptyUiObserverModeHandler() {
// onPurchaseInitiated implementation (see above)
@Override
public RestoreHandler getRestoreHandler() {
return (onStartRestore, onFinishRestore) -> {
onStartRestore.invoke();
yourBillingClient.restorePurchases(
restoredPurchases -> {
onFinishRestore.invoke();
//handle successful restore
},
error -> {
onFinishRestore.invoke();
//handle error
}
);
};
}
}; 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:
| 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 đã kết thúc. |
| onStartRestore() | Tùy chọn. Callback có thể được gọi để thông báo cho AdaptyUI rằng quá trình khôi phục đã bắt đầu. |
| onFinishRestore() | Tùy chọn. Callback có thể được gọi để thông báo cho AdaptyUI rằng quá trình khôi phục đã kết thúc. |
- Để hiển thị paywall trực quan trên màn hình thiết bị, bạn cần cấu hình nó trước.
Để làm điều đó, gọi phương thức AdaptyUI.getPaywallView() hoặc tạo AdaptyPaywallView trực tiếp:
val paywallView = AdaptyUI.getPaywallView(
activity,
viewConfiguration,
products,
eventListener,
personalizedOfferResolver,
tagResolver,
timerResolver,
observerModeHandler,
) val paywallView =
AdaptyPaywallView(activity) // or retrieve it from xml
...
with(paywallView) {
showPaywall(
viewConfiguration,
products,
eventListener,
personalizedOfferResolver,
tagResolver,
timerResolver,
observerModeHandler,
)
} AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
activity,
viewConfiguration,
products,
eventListener,
personalizedOfferResolver,
tagResolver,
timerResolver,
observerModeHandler
); AdaptyPaywallView paywallView =
new AdaptyPaywallView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
paywallView.showPaywall(viewConfiguration, products, eventListener, personalizedOfferResolver, tagResolver, timerResolver, observerModeHandler); <com.adapty.ui.AdaptyPaywallView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" /> Sau khi view được tạo thành công, bạn có thể thêm nó vào view hierarchy và hiển thị.
Để làm điều đó, sử dụng hàm composable sau:
AdaptyPaywallScreen(
viewConfiguration,
products,
eventListener,
personalizedOfferResolver,
tagResolver,
timerResolver,
) Các tham số yêu cầu:
| Tham số | Bắt buộc | Mô tả |
|---|---|---|
| Products | tùy chọn | Cung cấp một mả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 null, AdaptyUI sẽ tự động lấy các sản phẩm cần thiết. |
| ViewConfiguration | bắt buộc | Cung cấp đối tượng AdaptyViewConfiguration chứa thông tin trực quan của paywall. Sử dụng phương thức Adapty.getViewConfiguration(paywall) để tải nó. Tham khảo chủ đề Lấy cấu hình trực quan của paywall để biết thêm chi tiết. |
| EventListener | tùy chọn | Cung cấp AdaptyUiEventListener để theo dõi các sự kiện paywall. Khuyến nghị mở rộng AdaptyUiDefaultEventListener để dễ sử dụng. Tham khảo chủ đề Xử lý sự kiện paywall để biết thêm chi tiết. |
| PersonalizedOfferResolver | tùy chọn | Để chỉ định giá cá nhân hóa (đọc thêm), hãy triển khai AdaptyUiPersonalizedOfferResolver và truyền logic của bạn để ánh xạ AdaptyPaywallProduct thành true nếu giá sản phẩm được cá nhân hóa, ngược lại là false. |
| TagResolver | tùy chọn | Sử dụng AdaptyUiTagResolver để phân giải các custom tag trong văn bản paywall. Resolver này nhận tham số tag và phân giải thành chuỗi tương ứng. Tham khảo chủ đề Custom tags in Paywall Builder để biết thêm chi tiết. |
| ObserverModeHandler | bắt buộc cho chế độ Observer | AdaptyUiObserverModeHandler mà bạn đã triển khai ở bước trước. |
| variationId | bắt buộc | Chuỗi định danh của biến thể. Bạn có thể lấy nó bằng thuộc tính variationId của đối tượng AdaptyPaywall. |
| transaction | bắt buộc | Với iOS, StoreKit1: đối tượng Với iOS, StoreKit 2: đối tượng Transaction. Với Android: Chuỗi định danh ( |
Trước khi bắt đầu hiển thị paywall (Nhấp để 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ố
observerModethànhtrue. Tham khảo hướng dẫn theo framework cho Android, 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 chúng trong Adapty Dashboard.
- Lấy paywall Paywall Builder và cấu hình của chúng trong code ứng dụng của bạn.
- Triển khai
AdaptyUiObserverModeHandler. Callback củaAdaptyUiObserverModeHandler(onPurchaseInitiated) thông báo cho bạn khi người dùng bắt đầu thực hiện mua hàng. Bạn có thể kích hoạt flow mua hàng tùy chỉnh của mình trong callback này như sau:
val observerModeHandler =
AdaptyUiObserverModeHandler { product, paywall, paywallView, onStartPurchase, onFinishPurchase ->
onStartPurchase()
yourBillingClient.makePurchase(
product,
onSuccess = { purchase ->
onFinishPurchase()
//handle success
},
onError = {
onFinishPurchase()
//handle error
},
onCancel = {
onFinishPurchase()
//handle cancel
}
)
} AdaptyUiObserverModeHandler observerModeHandler = (product, paywall, paywallView, onStartPurchase, onFinishPurchase) -> {
onStartPurchase.invoke();
yourBillingClient.makePurchase(
product,
purchase -> {
onFinishPurchase.invoke();
//handle success
},
error -> {
onFinishPurchase.invoke();
//handle error
},
() -> { //cancellation
onFinishPurchase.invoke();
//handle cancel
}
);
}; Ngoài ra, hãy nhớ gọi các callback này cho AdaptyUI. Điều này cần thiết để paywall hoạt động đúng, chẳng hạn như hiển thị loader:
| Callback trong Kotlin | Callback trong Java | Mô tả |
|---|---|---|
| onStartPurchase() | onStartPurchase.invoke() | Callback cần được gọi để thông báo cho AdaptyUI rằng quá trình mua hàng đã bắt đầu. |
| onFinishPurchase() | onFinishPurchase.invoke() | Callback cần được gọi để thông báo cho AdaptyUI rằng quá trình mua hàng đã hoàn thành (thành công, thất bại hoặc bị hủy). |
- Để hiển thị paywall trực quan, bạn cần khởi tạo nó trước. Để làm điều đó, gọi phương thức
AdaptyUI.getPaywallView()hoặc tạoAdaptyPaywallViewtrực tiếp:
val paywallView = AdaptyUI.getPaywallView(
activity,
viewConfiguration,
products,
AdaptyPaywallInsets.of(topInset, bottomInset),
eventListener,
personalizedOfferResolver,
tagResolver,
observerModeHandler,
)
//======= OR =======
val paywallView =
AdaptyPaywallView(activity) // or retrieve it from xml
...
with(paywallView) {
setEventListener(eventListener)
setObserverModeHandler(observerModeHandler)
showPaywall(
viewConfiguration,
products,
AdaptyPaywallInsets.of(topInset, bottomInset),
personalizedOfferResolver,
tagResolver,
)
} AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
activity,
viewConfiguration,
products,
AdaptyPaywallInsets.of(topInset, bottomInset),
eventListener,
personalizedOfferResolver,
tagResolver,
observerModeHandler
);
//======= OR =======
AdaptyPaywallView paywallView =
new AdaptyPaywallView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
paywallView.setEventListener(eventListener);
paywallView.setObserverModeHandler(observerModeHandler);
paywallView.showPaywall(viewConfiguration, products, AdaptyPaywallInsets.of(topInset, bottomInset), personalizedOfferResolver); <com.adapty.ui.AdaptyPaywallView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" /> Sau khi view được tạo thành công, bạn có thể thêm nó vào view hierarchy và hiển thị.
Các tham số yêu cầu:
| Tham số | Bắt buộc | Mô tả |
|---|---|---|
| Products | tùy chọn | Cung cấp một mả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 null, AdaptyUI sẽ tự động lấy các sản phẩm cần thiết. |
| ViewConfiguration | bắt buộc | Cung cấp đối tượng AdaptyViewConfiguration chứa thông tin trực quan của paywall. Sử dụng phương thức Adapty.getViewConfiguration(paywall) để tải nó. Tham khảo chủ đề Lấy cấu hình trực quan của paywall để biết thêm chi tiết. |
| Insets | bắt buộc | Định nghĩa đối tượng AdaptyPaywallInsets chứa thông tin về vùng bị system bar che khuất, tạo margin dọc cho nội dung. Nếu cả status bar lẫn navigation bar không che AdaptyPaywallView, truyền AdaptyPaywallInsets.NONE. Đối với chế độ toàn màn hình khi system bar che một phần giao diện, lấy insets theo hướng dẫn bên dưới bảng. |
| EventListener | tùy chọn | Cung cấp AdaptyUiEventListener để theo dõi các sự kiện paywall. Khuyến nghị mở rộng AdaptyUiDefaultEventListener để dễ sử dụng. Tham khảo chủ đề Xử lý sự kiện paywall để biết thêm chi tiết. |
| PersonalizedOfferResolver | tùy chọn | Để chỉ định giá cá nhân hóa (đọc thêm), hãy triển khai AdaptyUiPersonalizedOfferResolver và truyền logic của bạn để ánh xạ AdaptyPaywallProduct thành true nếu giá sản phẩm được cá nhân hóa, ngược lại là false. |
| TagResolver | tùy chọn | Sử dụng AdaptyUiTagResolver để phân giải các custom tag trong văn bản paywall. Resolver này nhận tham số tag và phân giải thành chuỗi tương ứng. Tham khảo chủ đề Custom tags in Paywall Builder để biết thêm chi tiết. |
| ObserverModeHandler | bắt buộc cho chế độ Observer | AdaptyUiObserverModeHandler mà bạn đã triển khai ở bước trước. |
| variationId | bắt buộc | Chuỗi định danh của biến thể. Bạn có thể lấy nó bằng thuộc tính variationId của đối tượng AdaptyPaywall. |
| transaction | bắt buộc | Với iOS, StoreKit1: đối tượng Với iOS, StoreKit 2: đối tượng Transaction. Với Android: Chuỗi định danh ( |
Đối với chế độ toàn màn hình khi system bar che một phần giao diện, lấy insets theo cách sau:
import androidx.core.graphics.Insets
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
//create extension function
fun View.onReceiveSystemBarsInsets(action: (insets: Insets) -> Unit) {
ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
ViewCompat.setOnApplyWindowInsetsListener(this, null)
action(systemBarInsets)
insets
}
}
//and then use it with the view
paywallView.onReceiveSystemBarsInsets { insets ->
val paywallInsets = AdaptyPaywallInsets.of(insets.top, insets.bottom)
paywallView.setEventListener(eventListener)
paywallView.setObserverModeHandler(observerModeHandler)
paywallView.showPaywall(viewConfig, products, paywallInsets, personalizedOfferResolver, tagResolver)
} import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
...
ViewCompat.setOnApplyWindowInsetsListener(paywallView, (view, insets) -> {
Insets systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
ViewCompat.setOnApplyWindowInsetsListener(paywallView, null);
AdaptyPaywallInsets paywallInsets =
AdaptyPaywallInsets.of(systemBarInsets.top, systemBarInsets.bottom);
paywallView.setEventListener(eventListener);
paywallView.setObserverModeHandler(observerModeHandler);
paywallView.showPaywall(viewConfiguration, products, paywallInsets, personalizedOfferResolver, tagResolver);
return insets;
}); Kết quả trả về:
| Đối tượng | Mô tả |
|---|---|
AdaptyPaywallView | Đối tượng đại diện cho màn hình paywall được yêu cầu. |
Đừ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.