---
title: "在 React Native SDK 自定义付费墙中启用购买功能"
description: "将 Adapty SDK 集成到您的自定义 React Native 付费墙中，以启用应用内购买功能。"
---

本指南介绍如何将 Adapty 集成到您的自定义付费墙中。您可以完全掌控付费墙的实现方式，同时由 Adapty SDK 负责获取产品、处理新购买以及恢复历史购买。

:::important
**本指南适用于实现自定义付费墙的开发者。** 如果您希望以最简便的方式启用购买功能，请使用 [Adapty 付费墙编辑工具](react-native-quickstart-paywalls)。使用付费墙编辑工具，您可以在无代码可视化编辑器中创建付费墙，Adapty 会自动处理所有购买逻辑，并且无需重新发布应用即可测试不同的设计方案。
:::

## 开始之前 \{#before-you-start\}

### 设置产品 \{#set-up-products\}

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

- [**产品**](product) – 用户可以购买的任何内容（订阅、消耗型商品、永久授权）
- [**付费墙**](paywalls) – 定义向用户提供哪些产品的配置。在 Adapty 中，付费墙是检索产品的唯一方式，但这种设计允许您在无需修改应用代码的情况下调整产品、价格和优惠。
- [**版位**](placements) – 在应用中展示付费墙的位置和时机（例如 `main`、`onboarding`、`settings`）。您在看板中为版位配置付费墙，然后在代码中通过版位 ID 请求它们。这使得运行 A/B 测试以及向不同用户展示不同付费墙变得非常便捷。

即使您使用自定义付费墙，也需要了解这些概念。它们本质上是您管理应用内销售产品的方式。

要实现自定义付费墙，您需要创建一个**付费墙**并将其添加到**版位**中。此设置可让您检索产品。要了解在看板中需要执行的操作，请参阅[此处](quickstart)的快速入门指南。

### 管理用户 \{#manage-users\}

您可以选择使用或不使用后端身份验证。

但是，Adapty SDK 对匿名用户和已识别用户的处理方式不同。请阅读[身份识别快速入门指南](react-native-quickstart-identify)，了解其中的差异，确保正确处理用户数据。

## 步骤 1. 获取产品 \{#step-1-get-products\}

要检索自定义付费墙的产品，您需要：

1. 通过将[版位](placements) ID 传递给 `getPaywall` 方法来获取 `paywall` 对象。
2. 使用 `getPaywallProducts` 方法获取该付费墙的产品数组。

```typescript showLineNumbers

async function loadPaywall() {
  try {
    const paywall: AdaptyPaywall = await adapty.getPaywall('YOUR_PLACEMENT_ID');
    const products: AdaptyPaywallProduct[] = await adapty.getPaywallProducts(paywall);
    
    // Use products to build your custom paywall UI
  } catch (error) {
    // Handle the error
  }
}
```

## 步骤 2. 接受购买 \{#step-2-accept-purchases\}

当用户在自定义付费墙中点击某个产品时，使用所选产品调用 `makePurchase` 方法。该方法将处理购买流程并返回更新后的用户画像。

```typescript showLineNumbers

async function purchaseProduct(product: AdaptyPaywallProduct) {
  try {
    const purchaseResult: AdaptyPurchaseResult = await adapty.makePurchase(product);
    
    switch (purchaseResult.type) {
      case 'success':
        // Purchase successful, profile updated
        break;
      case 'user_cancelled':
        // User canceled the purchase
        break;
      case 'pending':
        // Purchase is pending (e.g., user will pay offline with cash)
        break;
    }
  } catch (error) {
    // Handle the error
  }
}
```

## 步骤 3. 恢复购买 \{#step-3-restore-purchases\}

应用商店要求所有含订阅功能的应用提供用户恢复购买的途径。

当用户点击恢复按钮时，调用 `restorePurchases` 方法。该方法将把用户的购买历史与 Adapty 同步，并返回更新后的用户画像。

```typescript showLineNumbers

async function restorePurchases() {
  try {
    const profile: AdaptyProfile = await adapty.restorePurchases();
    // Restore successful, profile updated
  } catch (error) {
    // Handle the error
  }
}
```

## 后续步骤 \{#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 商店](testing-on-android)中测试您的购买功能，以确保能够从付费墙完成测试购买。要查看生产就绪实现的示例，请参阅我们示例应用中的 [CustomPurchaseScreen.tsx](https://github.com/adaptyteam/AdaptySDK-React-Native/blob/master/examples/ExpoGoWebMock/src/CustomPurchaseScreen.tsx)，该文件展示了包含完善的错误处理、加载状态和 UI 状态管理的购买处理实现。

接下来，[检查用户是否已完成购买](react-native-check-subscription-status)，以决定是否展示付费墙或授予用户访问付费功能的权限。