Hiển thị flow trong chế độ Observer trong Capacitor SDK

Nếu bạn đã tùy chỉnh flow hoặc paywall bằng builder, bạn không cần lo về việc render nó trong code ứng dụng di động để hiển thị cho người dùng. Flow hoặc 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 Observer mode. Nếu bạn không làm việc trong Observer mode, hãy xem chủ đề Hiển thị flows & paywalls.

Tính năng này yêu cầu Adapty Capacitor SDK 4.0 trở lên — trước đây chỉ có trong các SDK gốc iOS và Android. Xem hướng dẫn migration để nâng cấp.

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 và với Google Play. 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 Capacitor 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 cho 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.

Trong chế độ Observer, SDK không thực hiện giao dịch mua hàng thay bạn. Khi người dùng nhấn nút mua hoặc khôi phục trong một flow hoặc paywall do Adapty hiển thị, SDK sẽ gọi event handler onObserverPurchaseInitiated hoặc onObserverRestoreInitiated của bạn thay vào đó — hãy thực hiện giao dịch mua hoặc khôi phục bằng code của riêng bạn ở đó.

Thiết lập các event handler chế độ observer trên view. Không giống các nền tảng khác, không có đối tượng resolver riêng biệt — các handler là một phần của event handlers thông thường, vì vậy hãy thiết lập chúng trên mỗi view bạn tạo:

import { adapty, createFlowView } from '@adapty/capacitor';

const view = await createFlowView(flow);

const unsubscribe = await view.setEventHandlers({
  onObserverPurchaseInitiated(product, onStartPurchase, onFinishPurchase) {
    onStartPurchase(); // the view shows its loading indicator
    myPurchaseApi(product.vendorProductId)
      .then((transactionId) =>
        adapty.reportTransaction({ transactionId, variationId: flow.variationId }),
      )
      .finally(() => onFinishPurchase()); // the view hides the loading indicator
    return false; // keep the flow open; dismiss it yourself after success
  },
  onObserverRestoreInitiated(onStartRestore, onFinishRestore) {
    onStartRestore();
    myRestoreApi().finally(() => onFinishRestore());
    return false;
  },
});

onObserverPurchaseInitiated thông báo cho bạn rằng người dùng đã bắt đầu thực hiện mua hàng, còn onObserverRestoreInitiated — rằng người dùng đã bắt đầu 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 cách, 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 đã 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.

Trình bày flow như thường lệ: lấy flow và tạo view của nó, sau đó hiển thị nó. Không cần thêm tham số nào — các handler chỉ được kích hoạt khi SDK được khởi động với observerMode: true.

Đừng quên báo cáo giao dịch và liên kết nó với paywall. 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.