---
title: "网页付费墙"
description: "设置网页付费墙，无需支付 App Store 费用和审核即可收款。"
---

:::important
开始之前，请确保已安装所需版本的 Adapty SDK：
- **付费墙编辑工具或自定义付费墙**：iOS 需 3.6.1 或更高版本，Android 及跨平台需 3.15 或更高版本
- **Flow Builder**：所有平台需 4.0 或更高版本
:::
使用 Adapty，你可以创建一个付费墙或[流程](adapty-paywall-builder)，其中包含一个按钮，可将应用用户重定向到浏览器完成支付。用户成功购买后返回应用时，订阅即会激活。
这样一来，你既能绕过应用商店的手续费，又能追踪用户的支付情况。

:::tip
App Store 仅在美国和日本允许使用外部支付方式。
要仅在这些市场中使用付费墙，请复制当前的付费墙并设置一个 Web 付费墙。这样，您将同时使用两个几乎相同的付费墙：一个面向美国和日本，另一个面向其他所有人。
:::
## 工作原理 \{#how-it-works\}

网页付费墙是为每个应用内付费墙生成的唯一 URL。它在浏览器中打开，用于完成支付，支持多种支付服务商（Stripe、Paddle 等），既可以是带有 Apple Pay 按钮的简单页面，也可以是包含更多优惠选项的复杂流程。

网页付费墙的工作方式如下：
1. 在网页付费墙编辑器中**配置网页付费墙页面的外观**和功能。
2. 在付费墙设置中**关联网页付费墙**。
3. 在应用的付费墙中**添加按钮**，将用户引导至浏览器。
4. 用户点击按钮后，Adapty SDK **生成唯一 URL**。
5. 用户**进入网页付费墙页面**，使用外部支付方式**完成订阅付款**。
6. 用户返回应用时，Adapty SDK **轮询用户画像更新**，确认订阅是否已激活。
7. Adapty 记录购买信息，并持续监控订阅状态变化，例如续订或取消。
## 步骤 1：创建网页付费墙 \{#step-1-create-a-web-paywall\}
1. 准备要使用的付费墙：
   - 若要为已有的付费墙启用外部支付，请先[复制](duplicate-paywalls)它。这样你就可以将 Web 付费墙展示给目标受众，同时将原版展示给其他用户。
   - 若要从头开始，请[创建](create-paywall)一个新付费墙。
2. 在付费墙页面中，切换到 **Web paywall** 标签页，然后点击 **Create web paywall**。系统会将你重定向到一个新页面。

3. 配置 Web 付费墙并连接支付方式。
:::tip
如需了解如何设置外部编辑器及连接支付提供商，请参阅[快速入门指南](web-paywall-configuration)。
:::
4. 返回 **Web paywall** 页面并粘贴付费墙链接。
:::important
将付费墙上线到生产环境时，请确保使用发布 Web 付费墙后生成的正确链接。链接格式为 `paywalls-....fnlfx.com`。
:::
5. 点击 **Save**。

## 步骤 2：触发付费墙 \{#step-2-trigger-the-paywall\}

要使用你的网页付费墙，需要先触发它，具体方式取决于你的配置：

- 如果你使用的是 Flow 构建器，只需[添加一个新按钮](#step-2a-add-a-web-purchase-button)，该按钮将使用你提供的链接来追踪购买并将数据回传至 Adapty。
- 如果你使用的是 SDK，则必须设置 [`openWebPaywall`](#step-2b-set-up-the-sdk-method) 方法来处理网页付费墙。
### 步骤 2a：添加网页购买按钮 \{#step-2a-add-a-web-purchase-button\}

如果你使用的是 **Flow Builder**，需要添加一个网页付费墙按钮。该按钮将使用你提供的链接来追踪购买行为，并将数据回传给 Adapty。

1. 打开流程并添加一个按钮。

   如果你使用的是模板或已有的付费墙，请在现有购买按钮旁边添加一个网页付费墙按钮。配置方式与现有按钮相同。
2. 在右侧的 **Interactions** 面板中，点击 **Add trigger**，然后为该触发器指定 **Purchase** 动作。
   
3. 在动作设置中，切换到 **Web payment** 标签页。在此处选择一个产品，以及可选的优惠，将其与网页购买按钮关联。

4. 将网页付费墙链接粘贴到 **Web paywall URL** 字段中。

5. 默认情况下，网页付费墙会在应用内浏览器中打开，用户无需离开您的应用。如果您希望在外部浏览器中打开，请选择 **Open in external browser**。

### 步骤 2b：调用 SDK 方法 \{#step-2b-call-the-sdk-method\}

如果你使用的是自己开发的付费墙，需要通过 SDK 方法来处理网页付费墙。请参阅对应框架的指南：

- [iOS](ios-web-paywall)
- [Android](android-web-paywall)
- [React Native](react-native-web-paywall)
- [Flutter](flutter-web-paywall)
- [Unity](unity-web-paywalls)
- [Kotlin Multiplatform](kmp-web-paywalls)
- [Capacitor](capacitor-web-paywall)
## 第三步：配置版位 \{#step-3-set-up-a-placement\}

由于 App Store 仅在美国和日本允许使用外部支付方式，请为这些市场的 iOS 用户创建独立的市场细分，并配置版位，以便向不同市场细分展示不同的付费墙。对于 Android 用户，无地区限制——创建一个不含国家筛选条件的独立 Android 市场细分即可。
1. [创建一个新的市场细分](segments)，设置以下属性：
   - **Country from store account**：United States、Japan
   - **Platform**：iOS and iPadOS
   - **App version**：使用 Adapty SDK 的最新版本。

2. [创建](create-placement)一个版位或[编辑](edit-placement)已有版位。[添加一个新的目标受众](add-audience-paywall-ab-test)，将 Web 付费墙与已创建的市场细分关联起来。