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

• 产品 – 用户可购买的任何内容（订阅、消耗型商品、永久授权）
• 流程与付费墙 – 向用户展示产品的页面，使用无代码流程与付费墙编辑工具构建，SDK 通过 getFlow 获取。如果你更倾向于在自己的代码中构建 UI，请参阅实现自定义付费墙。
• 版位 – 在应用中展示流程与付费墙的位置和时机（如 main、onboarding、settings）。在看板中将其绑定到版位，然后在代码中通过版位 ID 请求。这样可以轻松进行 A/B 测试，并向不同用户展示不同内容。

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

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

要在应用代码中展示在 Adapty 流程与付费墙编辑工具中创建的流程或付费墙，您只需：

1. 获取流程或付费墙：从 Adapty 获取。
2. 展示它，Adapty 将为你处理购买流程：在你的应用中显示视图。
3. 处理按钮操作：将用户交互与应用的响应关联起来。例如，当用户点击按钮时打开链接或关闭付费墙。

开始之前

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

1. 在 Adapty 看板中将您的应用连接到 App Store 和/或 Google Play。
2. 在 Adapty 中创建产品。
3. 创建流程或付费墙并向其添加产品。
4. 创建版位并将您的流程或付费墙添加到其中。
5. 在您的应用代码中安装并激活 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
}

3. 处理按钮操作

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

但是，其他按钮具有自定义或预定义的 ID，需要在代码中处理相应操作。或者，你也可以覆盖这些按钮的默认行为。

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

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

后续步骤

您的流程或付费墙已准备好在应用中展示。测试您的购买，确保您可以从流程中完成测试购买。

接下来，您需要检查用户的访问等级，以确保向正确的用户展示付费墙或开放付费功能。

完整示例

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

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);
  }
}