---
title: "在 Capacitor SDK 中使用付费墙编辑工具启用购买功能"
description: "使用 Adapty 付费墙编辑工具启用应用内购买的快速入门指南。"
---

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

如果您希望自行构建付费墙界面，请参阅[手动实现付费墙](capacitor-quickstart-manual)。
:::

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

1. **获取流程**：从 Adapty 获取流程数据。
2. **展示流程，Adapty 将自动处理购买逻辑**：在应用中显示对应视图。
3. **处理按钮操作**：将用户的交互行为与应用的响应逻辑关联起来，例如打开链接或在用户点击按钮时关闭流程。
## 开始之前 \{#before-you-start\}

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

1. 在 Adapty 看板中将您的应用连接到 [App Store](initial_ios) 和/或 [Google Play](initial-android)。
2. 在 Adapty 中[创建您的产品](create-product)。
3. [创建流程并向其添加产品](create-paywall)。
4. [创建版位并将您的流程添加到其中](create-placement)。
5. 在您的应用代码中[安装并激活 Adapty SDK](sdk-installation-capacitor)。本指南使用 Adapty Capacitor SDK v4 API。
## 1. 获取流程 \{#1-get-the-flow\}

你的流程与在看板中配置的版位相关联。通过版位，你可以针对不同的目标受众展示不同的流程，或运行 [A/B 测试](ab-tests)。

要获取在 Adapty 付费墙编辑工具中创建的流程，请通过 `getFlow` 方法，使用[版位](placements) ID 来获取 `flow` 对象。该流程对象包含展示所需的 UI 元素和样式信息。
```typescript showLineNumbers title="Capacitor"

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

## 2. 展示流程 \{#2-display-the-flow\}

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

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

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
有关如何展示流程的更多详情，请参阅我们的[指南](capacitor-present-paywalls)。
:::
## 3. 处理按钮操作 \{#3-handle-button-actions\}

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

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

例如，以下是关闭按钮的默认行为。你无需在代码中添加这段逻辑，但可以参考它了解具体实现方式。
```typescript showLineNumbers title="Capacitor"
const unsubscribe = await view.setEventHandlers({
  onCloseButtonPress() {
    return true; // allow the flow to close
  },
});
```

:::tip
阅读我们的指南，了解如何处理按钮[操作](capacitor-handle-paywall-actions)和[事件](capacitor-handling-events)。
:::
## 后续步骤 \{#next-steps\}

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

你的流程已准备好在应用中展示。[测试购买](capacitor-test)，确保你能从流程中完成测试购买。

接下来，你需要[检查用户的访问等级](capacitor-check-subscription-status)，以确保向合适的用户展示流程或开放付费功能。
## 完整示例 \{#full-example\}

以下是本指南中所有步骤在应用中的完整集成示例。
```typescript showLineNumbers title="Capacitor"

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