Hiển thị flow ở chế độ Observer - React Native

Nếu bạn sử dụng chế độ Observer, bạn sẽ chịu trách nhiệm tự xử lý logic mua hàng. 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à Adapty SDK sẽ render nó theo cách native. Cập nhật nội dung, layout và giá bất cứ lúc nào mà không cần phát hành lại ứng dụng.

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

Trước khi bắt đầu

Bạn cần:

• Adapty React Native SDK 4.0 trở lên: Các phiên bản cũ hơn không thể hiển thị 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 React Native 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 một placement và gán flow của bạn vào đó.
• Flow được tải trong ứng dụng của bạn: Lấy flow và cấu hình của nó trước khi hiển thị.

Trong Observer mode, SDK không thực hiện thanh toán thay 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 — hãy thực hiện việc mua hoặc khôi phục bằng code của chính bạn ở đó.

Đặt trình xử lý sự kiện cho observer mode

Không giống các nền tảng khác, ở đây không có resolver object riêng — các trình xử lý là một phần của trình xử lý sự kiện thông thường, vì vậy hãy đặt chúng trên mọi flow bạn hiển thị.

function MyFlow({ flow }) {
  const onObserverPurchaseInitiated = useCallback<
    FlowEventHandlers['onObserverPurchaseInitiated']
  >((product, onStartPurchase, onFinishPurchase) => {
    onStartPurchase(); // the flow shows its loading indicator
    myPurchaseApi(product.vendorProductId)
      .then((transactionId) => adapty.reportTransaction(transactionId, flow.variationId))
      .finally(() => onFinishPurchase()); // the flow hides the loading indicator
  }, [flow]);

  const onObserverRestoreInitiated = useCallback<
    FlowEventHandlers['onObserverRestoreInitiated']
  >((onStartRestore, onFinishRestore) => {
    onStartRestore();
    myRestoreApi().finally(() => onFinishRestore());
  }, []);

  return (
    <AdaptyFlowView
      flow={flow}
      onObserverPurchaseInitiated={onObserverPurchaseInitiated}
      onObserverRestoreInitiated={onObserverRestoreInitiated}
      // ... your other event handlers
    />
  );
}

const view = await createFlowView(flow);

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

Handler onObserverPurchaseInitiated thông báo cho bạn biết người dùng đã bắt đầu 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, chẳng hạn như hiển thị loader, v.v.:

Hiển thị flow

Hiển thị flow như bình thường: tải flow và tạo view, 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.