---
title: "实现网页付费墙"
description: "了解如何使用 Adapty SDK 在 Capacitor 应用中实现网页付费墙。"
---

:::important
开始之前，请确保您已[在看板中配置了网页付费墙](web-paywall)，并安装了 Adapty SDK 3.6.1 或更高版本。
:::

## 打开网页付费墙 \{#open-web-paywalls\}

如果你使用的是自行开发的付费墙，需要通过 SDK 方法来处理网页付费墙。`.openWebPaywall` 方法：
1. 生成一个唯一 URL，让 Adapty 能够将展示给特定用户的付费墙与其被跳转到的网页关联起来。
2. 追踪用户何时返回应用，并以短时间间隔调用 `.getProfile`，以判断用户画像的访问权限是否已更新。
这样，如果付款成功且访问权限已更新，订阅几乎会立即在应用中激活。

```typescript showLineNumbers

try {
  await adapty.openWebPaywall({ paywallOrProduct: product });
} catch (error) {
  console.error('Failed to open web paywall:', error);
}
```
:::note
`openWebPaywall` 方法有两个版本：
1. `openWebPaywall({ paywallOrProduct: product })` — 根据付费墙生成 URL，并将产品数据附加到 URL 中。
2. `openWebPaywall({ paywallOrProduct: paywall })` — 根据付费墙生成 URL，但不附加产品数据。当 Adapty 付费墙中的产品与网页付费墙中的产品不同时，请使用此版本。
在 SDK v4 中，`paywallOrProduct` 的付费墙部分接收一个 `AdaptyFlowPaywall`——即已获取流程的付费墙变体。在索引访问之前，请检查 `flow.paywalls` 不为空，例如 `flow.paywalls[0]`。
:::

#### 处理错误 \{#handle-errors\}
| 错误 | 描述 | 建议操作 |
|------|------|----------|
| AdaptyError.paywallWithoutPurchaseUrl | 该付费墙未配置网页购买链接 | 检查付费墙是否已在 Adapty 看板中正确配置 |
| AdaptyError.productWithoutPurchaseUrl | 该产品没有网页购买链接 | 在 Adapty 看板中验证产品配置 |
| AdaptyError.failedOpeningWebPaywallUrl | 无法在浏览器中打开该链接 | 检查设备设置，或提供其他购买方式 |
| AdaptyError.failedDecodingWebPaywallUrl | 无法正确编码链接中的参数 | 验证链接参数是否有效且格式正确 |
## 获取 Web 付费墙 URL 而不直接打开它 \{#get-the-web-paywall-url-without-opening-it\}

如果你想自己展示 Web 购买页面，而不是让 SDK 来打开它，可以使用 `createWebPaywallUrl`。它返回与 `openWebPaywall` 相同的唯一 URL，你可以在自己的 Web 视图中渲染，或按需处理跳转逻辑。该方法接受与 `openWebPaywall` 相同的 `paywallOrProduct` 参数——可以是已获取流程的付费墙变体（`AdaptyFlowPaywall`），也可以是 `AdaptyPaywallProduct`。
```typescript showLineNumbers

try {
  const url = await adapty.createWebPaywallUrl({ paywallOrProduct: product });
  // open `url` in your own web view, or handle the redirect yourself
} catch (error) {
  console.error('Failed to create web paywall URL:', error);
}
```

:::note
如需通过原生浏览器打开任意 URL（而非网页付费墙）——例如从流程的按钮触发——请改用 [`adapty.openWebUrl`](capacitor-handle-paywall-actions#open-urls-from-flows-and-paywalls)。
:::
## 在应用内浏览器中打开网页付费墙 \{#open-web-paywalls-in-an-in-app-browser\}

:::important
从 Adapty SDK v3.15 起支持在应用内浏览器中打开网页付费墙。
:::

默认情况下，网页付费墙会在外部浏览器中打开。

为了提供更流畅的用户体验，你可以在应用内浏览器中打开网页付费墙。这样用户无需切换应用，即可在应用内直接完成购买。

要启用此功能，请在 `openWebPaywall` 中将 `openIn` 设置为 `WebPresentation.BrowserInApp`：
```typescript showLineNumbers

try {
    await adapty.openWebPaywall({
        paywallOrProduct: product,
        openIn: WebPresentation.BrowserInApp, // default – WebPresentation.BrowserOutApp
    });
} catch (error) {
    console.error('Failed to open web paywall:', error);
}
```