在 Capacitor SDK 中以 Observer 模式展示流程

如果你使用 Observer 模式，则需要自行负责购买逻辑。但你可以将付费墙 UI 交由 Flow & Paywall Builder 管理。

在编辑工具中设计页面，Adapty SDK 原生渲染。随时更新文案、布局和价格，无需发布新版本应用。

本指南介绍如何展示流程并处理购买回调。如果由 Adapty 代为完成购买，请参阅展示流程与付费墙。

开始之前

你需要：

• Adapty Capacitor SDK 4.1 或更高版本：更早的版本无法渲染流程。如需迁移现有应用，请参阅迁移指南。
• observerMode 设置为 true：请参阅 Capacitor SDK 安装指南。
• 初始商店集成：完成 Adapty 与 App Store 的集成以及与 Google Play 的集成。
• 已发布且包含产品的流程：在流程与付费墙编辑工具中构建，并为其分配产品。
• 流程版位：创建版位并将您的流程分配给它。
• 在应用中获取流程：在展示流程之前，先获取流程及其配置。

实现

在 Observer 模式下，SDK 不会自动为你发起购买。当用户在 Adapty 渲染的流程中点击购买或恢复按钮时，SDK 会调用你的 onObserverPurchaseInitiated 或 onObserverRestoreInitiated 事件处理程序，而不是直接执行购买或恢复操作。请在其中使用你自己的代码完成购买或恢复逻辑。

1. 在视图上设置 Observer 模式的事件处理程序。与其他平台不同，这里没有单独的 resolver 对象——处理程序是常规事件处理程序的一部分，因此需要在每个创建的视图上进行设置：

   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 处理器会通知你用户已发起购买，onObserverRestoreInitiated 则通知你用户已发起恢复购买。收到通知后，请触发你自己的自定义购买或恢复流程。

另外，记得调用以下回调，将购买或恢复的处理进度告知 AdaptyUI。这对于正确的流程行为（例如显示加载状态等）是必要的：

2. 像平常一样展示流程视图：获取流程并创建其视图，然后展示它。无需额外参数——只有在使用 observerMode: true 激活 SDK 时，处理程序才会触发。