Hiển thị flow trong Observer mode với Capacitor SDK

Nếu bạn sử dụng Observer mode, bạn tự chịu trách nhiệm xử lý logic mua hàng của mình. Nhưng bạn có thể ủy quyền giao diện paywall cho Flow & Paywall Builder.

Thiết kế màn hình trong builder, và SDK Adapty sẽ hiển thị nó theo dạng native. Cập nhật nội dung, bố cục và giá bất cứ lúc nào bạn muốn mà không cần phát hành lại ứng dụng.

Hướng dẫn này hướng dẫn cách hiển thị một flow và xử lý các callback mua hàng. Nếu Adapty thực hiện việc mua hàng thay cho bạn, hãy xem Hiển thị flow & paywall.

Trước khi bắt đầu

Bạn cần:

• Adapty Capacitor SDK 4.1 trở lên: Các phiên bản cũ hơn không thể render flow. Để chuyển đổi ứng dụng hiện có, xem hướng dẫn migration.
• observerMode đặt thành true: Xem hướng dẫn cài đặt Capacitor SDK.
• Tích hợp cửa hàng ban đầu: Thiết lập Adapty với App Store và với Google Play.
• Một flow đã xuất bản có sản phẩm: Xây dựng trong Flow & Paywall Builder và gán sản phẩm vào đó.
• Một placement cho flow: Tạo placement và gán flow của bạn vào đó.
• Flow đã được tải trong ứng dụng: Lấy flow và cấu hình của nó trước khi hiển thị.

Triển khai

Trong chế độ Observer, SDK không thực hiện giao dịch mua thay cho bạn. Khi người dùng nhấn nút mua hoặc khôi phục trong một flow 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 việc mua hoặc khôi phục bằng code của chính bạn trong đó.

1. Thiết lập các event handler cho 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 — các handler là một phần của event handler 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 biết người dùng đã bắt đầu quá trình mua, 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 khi nhận được thông báo 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 để đảm bảo flow hoạt động đúng, chẳng hạn như hiển thị trạng thái tải, và nhiều thứ khác:

2. Trình bày flow view như thường lệ: tải 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ỉ kích hoạt khi SDK được khởi động với observerMode: true.