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

• 产品 – 用户可以购买的任何内容（订阅、消耗型商品、永久授权）
• 流程 – 在无代码的 Flow Builder 中构建的屏幕序列，用于向用户展示产品，SDK 通过 getFlow 获取它们。如果你更倾向于用自己的代码构建 UI，请使用付费墙代替 — 参见手动实现付费墙。
• 版位 – 在应用中展示流程的位置和时机（如 main、onboarding、settings）。你在看板中将流程绑定到版位，然后在代码中通过版位 ID 请求它们。这样可以轻松运行 A/B 测试，并向不同用户展示不同的流程。 Adapty 为您提供三种在应用中启用购买的方式。请根据您的应用需求选择其中一种： | 实现方式 | 复杂度 | 适用场景 | |---|---|---| | Adapty Flow Builder | ✅ 简单 | 您在无代码编辑工具中创建完整的、可直接购买的流程。Adapty 自动渲染并在幕后处理所有复杂的购买流程、收据验证和订阅管理。 | | 手动创建付费墙 | 🟡 中等 | 您在应用代码中自行实现付费墙 UI，但仍从 Adapty 获取流程对象，以保持产品方案的灵活性。请参阅指南。 | | 观察者模式 | 🔴 复杂 | 您已有自己的购买处理基础设施并希望继续使用。请注意，观察者模式在 Adapty 中存在一定限制。请参阅文章。 |

要在应用中展示通过 Adapty Flow Builder 创建的流程，您只需在代码中完成以下几步：

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 付费墙编辑工具中创建的流程，请通过 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);
  }
}