在 Capacitor SDK 中使用 Flow 与付费墙编辑工具启用购买功能

要启用应用内购买，你需要了解三个核心概念：

产品 – 用户可购买的任何内容（订阅、消耗型商品、永久授权）
流程 – 向用户展示产品的页面序列，通过无代码 Flow & Paywall Builder 构建。SDK 通过 getFlow 获取流程。如果您希望用自己的代码构建 UI，请改用付费墙——参见手动实现付费墙。
版位 – 在应用中何时何处展示流程（如 main、onboarding、settings）。您在看板中将流程关联到版位，然后在代码中通过版位 ID 请求流程。这样可以轻松运行 A/B 测试，并向不同用户展示不同的流程。

Adapty 为您提供三种在应用中启用购买的方式。请根据您的应用需求选择其中一种：

实现方式	复杂度	适用场景
Adapty Flow 与付费墙编辑工具	✅ 简单	您在无代码编辑工具中创建完整的、可立即购买的流程。Adapty 自动渲染付费墙，并在后台处理所有复杂的购买流程、收据验证和订阅管理。
手动创建付费墙	🟡 中等	您在应用代码中自行实现付费墙 UI，但仍从 Adapty 获取流程对象，以保持产品方案的灵活性。请参阅指南。
观察者模式	🔴 复杂	您已有自己的购买处理基础设施并希望继续使用它。请注意，观察者模式在 Adapty 中存在一定限制。请参阅文章。

Important

以下步骤介绍如何在应用中实现通过 Adapty 流程与付费墙编辑工具创建的流程。

如果你希望自行构建付费墙 UI，请参阅手动实现付费墙。

要展示在 Adapty 流程与付费墙编辑工具中创建的流程，你只需在应用代码中完成以下操作：

获取流程：从 Adapty 获取流程。
展示流程，由 Adapty 处理购买事务：在应用中显示该视图。
处理按钮操作：将用户交互与应用的响应关联起来。例如，当用户点击按钮时，打开链接或关闭流程。

开始之前

在开始之前，请先完成以下步骤：

在 Adapty 看板中将您的应用连接到 App Store 和/或 Google Play。
在 Adapty 中创建产品。
创建流程并向其中添加产品。
创建版位并将您的流程添加到其中。
在应用代码中安装并激活 Adapty SDK。本指南使用 Adapty Capacitor SDK v4 API。

1. 获取流程

你的流程与在看板中配置的版位相关联。通过版位，你可以为不同的目标受众展示不同的流程，或运行 A/B 测试。

要获取在 Adapty Flow & Paywall Builder 中创建的流程，请使用 getFlow 方法，通过版位 ID 获取 flow 对象。该流程包含展示所需的 UI 元素和样式信息。


try {
  const flow = await adapty.getFlow({
    placementId: 'YOUR_PLACEMENT_ID',
  });
  // the requested flow
} catch (error) {
  // handle the error
}

2. 展示流程

准备好流程后，只需添加几行代码即可展示它。

使用 createFlowView 方法创建一个 view，设置其事件处理器，然后调用 view.present()。每个 view 只能使用一次。如果需要再次展示流程，请再次调用 createFlowView 创建一个新的 view 实例。


try {
  const view = await createFlowView(flow);

  await view.setEventHandlers({
    onPurchaseCompleted(purchaseResult, product) {
      return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
    },
  });

  await view.present();
} catch (error) {
  // handle the error
}

Tip

有关如何展示流程的更多详情，请参阅我们的指南。

3. 处理按钮操作

当用户点击流程中的按钮时，Capacitor SDK 会自动处理购买、恢复、关闭流程以及打开 URL 等操作。

不过，其他按钮拥有自定义或预定义的 ID，需要在代码中处理相应操作。你也可以根据需要覆盖其默认行为。

例如，以下是关闭按钮的默认行为。你无需在代码中添加这段逻辑，但可以参考它了解具体实现方式。

const unsubscribe = await view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});

Tip

阅读我们的指南，了解如何处理按钮操作和事件。

后续步骤

Tip

有疑问或遇到问题？欢迎访问我们的支持论坛，在那里你可以找到常见问题的解答，也可以提出自己的问题。我们的团队和社区随时为你提供帮助！

你的流程已准备好在应用中展示。测试购买，确保你能从流程中完成测试购买。

接下来，你需要检查用户的访问等级，以确保向合适的用户展示流程或开放付费功能。

完整示例

以下是本指南中所有步骤在应用中的完整集成示例。


export async function showFlow() {
  try {
    const flow = await adapty.getFlow({
      placementId: 'YOUR_PLACEMENT_ID',
    });

    const view = await createFlowView(flow);

    await view.setEventHandlers({
      onCloseButtonPress() {
        return true;
      },
      onPurchaseCompleted(purchaseResult, product) {
        return purchaseResult.type === 'success'; // close the flow on a successful purchase, keep it open for cancelled or pending purchases
      },
    });

    await view.present();
  } catch (error) {
    // handle any error that may occur during the process
    console.warn('Error showing flow:', error);
  }
}