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

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

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

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

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

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

开始前准备

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

1. 在 Adapty 看板中将您的应用连接到 App Store 和/或 Google Play。
2. 在 Adapty 中创建产品。
3. 创建付费墙并向其添加产品。
4. 创建版位并将付费墙添加到其中。
5. 在应用代码中安装并激活 Adapty SDK。

1. 获取付费墙

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

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

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

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

import { adapty, createPaywallView } from '@adapty/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. 展示付费墙

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

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

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

3. 处理按钮操作

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

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

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

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

后续步骤

您的付费墙已准备好在应用中展示。在 App Store 沙盒或 Google Play Store 中测试您的内购，以确保您可以从付费墙完成测试购买。

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

完整示例

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

import React from 'react';
import { adapty, createPaywallView } from '@adapty/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>
  );
}