---
title: "通过付费墙启用 Capacitor SDK 内购"
description: "了解如何在 Capacitor 应用中使用 Adapty SDK 展示付费墙。"
---

要启用应用内购，您需要了解三个关键概念：

- **产品** – 用户可购买的任何内容（订阅、消耗型商品、永久授权）
- **付费墙** 是定义向用户提供哪些产品的配置。在 Adapty 中，付费墙是获取产品的唯一方式，但这种设计使您可以在不修改应用代码的情况下更改产品组合、定价和产品搭配。
- **版位** – 在应用中展示付费墙的位置和时机（如 `main`、`onboarding`、`settings`）。您在看板中为版位配置付费墙，然后在代码中通过版位 ID 请求它们。这使得运行 A/B 测试以及向不同用户展示不同付费墙变得非常简单。

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

| 实现方式                   | 复杂度     | 适用场景                                                                                                                                                                                                                                   |
|----------------------------|------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| **Adapty Paywall Builder** | ✅ 简单     | 您[在无代码编辑工具中创建完整的、可直接购买的付费墙](quickstart-paywalls)。Adapty 自动渲染付费墙并在后台处理所有复杂的购买流程、收据验证和订阅管理。 |
| `makePurchase`             | 🟡 中等    | 您在应用代码中自行实现付费墙 UI，但仍从 Adapty 获取付费墙对象以保持产品组合的灵活性。请参阅[指南](capacitor-quickstart-manual)。                                                   |
| Observer mode              | 🔴 困难    | 您完全自行实现购买流程。请参阅[指南](implement-observer-mode-capacitor)。                                                                                                                                   |

:::important
**以下步骤展示了如何实现在 Adapty 付费墙编辑工具中创建的付费墙。**

如果您不想使用付费墙编辑工具，请参阅[手动创建付费墙的购买处理指南](capacitor-making-purchases)。
:::

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

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)。

:::tip
完成这些步骤的最快方式是遵循[快速入门指南](quickstart)，或使用 [Developer CLI](developer-cli-quickstart) 创建付费墙和版位。
:::

## 1. 获取付费墙 \{#1-get-the-paywall\}

您的付费墙与在看板中配置的版位相关联。版位允许您为不同的目标受众运行不同的付费墙，或运行 [A/B 测试](ab-tests)。

要获取在 Adapty 付费墙编辑工具中创建的付费墙，您需要：

1. 使用 `getPaywall` 方法通过[版位](placements) ID 获取 `paywall` 对象，并通过 `hasViewConfiguration` 属性检查其是否为在编辑工具中创建的付费墙。

2. 使用 `createPaywallView` 方法创建付费墙视图。该视图包含展示付费墙所需的 UI 元素和样式。

:::important
要获取视图配置，您必须在付费墙编辑工具中打开 **Show on device** 开关。否则，您将获得空的视图配置，付费墙将无法显示。
:::

```typescript showLineNumbers title="Capacitor"

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

if (paywall.hasViewConfiguration) {
  try {
    const view = await createPaywallView(paywall);
  } catch (error) {
    // handle the error
  }
} else {
  // use your custom logic
}
```

## 2. 展示付费墙 \{#2-display-the-paywall\}

现在，当您拥有付费墙配置后，只需添加几行代码即可展示付费墙。

要展示付费墙，请对 `createPaywallView` 方法创建的 `view` 调用 `view.present()` 方法。每个 `view` 只能使用一次。如果需要再次展示付费墙，请再次调用 `createPaywallView` 创建新的 `view` 实例。

```typescript showLineNumbers title="Capacitor"
try {
  await view.present();
} catch (error) {
  // handle the error
}
```

:::tip
有关如何展示付费墙的更多详情，请参阅我们的[指南](capacitor-present-paywalls)。
:::

## 3. 处理按钮操作 \{#3-handle-button-actions\}

当用户点击付费墙中的按钮时，Capacitor SDK 会自动处理购买、恢复购买和关闭付费墙。

然而，其他按钮具有自定义或预定义的 ID，需要在您的代码中处理操作。或者，您可能希望覆盖其默认行为。

例如，您可能希望在应用用户打开网页链接后保持付费墙处于打开状态。让我们看看如何在您的实现中处理这种情况。

:::tip
阅读我们关于如何处理按钮[操作](capacitor-handle-paywall-actions)和[事件](capacitor-handling-events)的指南。
:::

```typescript showLineNumbers title="Capacitor"
const unsubscribe = view.setEventHandlers({
  onUrlPress(url) {
    window.open(url, '_blank');
    return false;
  },
});
```

## 后续步骤 \{#next-steps\}

---
no_index: true
---
import Callout from '../../../components/Callout.astro';

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

您的付费墙已准备好在应用中展示。在 [App Store 沙盒](test-purchases-in-sandbox)或 [Google Play Store](testing-on-android) 中测试您的内购，以确保您可以从付费墙完成测试购买。

接下来，您需要[检查用户的访问等级](capacitor-check-subscription-status)，以确保您向正确的用户展示付费墙或提供付费功能的访问权限。

## 完整示例 \{#full-example\}

以下是如何将所有步骤整合到您的应用中的完整示例。

```typescript showLineNumbers title="Capacitor"

export default function PaywallScreen() {
  const showPaywall = async () => {
    try {
      const paywall = await adapty.getPaywall({
        placementId: 'YOUR_PLACEMENT_ID',
      });

      if (!paywall.hasViewConfiguration) {
        // use your custom logic
        return;
      }

      const view = await createPaywallView(paywall);

      view.setEventHandlers({
        onUrlPress(url) {
          window.open(url, '_blank');
          return false;
        },
      });

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

  return (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
      <button onClick={showPaywall}>Show Paywall</button>
    </div>
  );
}
```