---
title: "在 Capacitor SDK 中渲染通过远程配置设计的付费墙"
description: "了解如何在 Adapty Capacitor SDK 中展示远程配置付费墙，以个性化用户体验。"
---

如果您已使用远程配置自定义了付费墙，则需要在您的移动应用代码中实现渲染逻辑，以便向用户展示付费墙。由于远程配置提供了灵活性以满足您的需求，您可以自主决定包含哪些内容以及付费墙视图的呈现方式。我们提供了一种获取远程配置的方法，让您能够自主展示通过远程配置设置的自定义付费墙。

## 获取付费墙远程配置并展示 \{#get-paywall-remote-config-and-present-it\}

要获取付费墙的远程配置，请访问 `remoteConfig` 属性并提取所需的值。

```typescript showLineNumbers

try {
  const paywall = await adapty.getPaywall({ 
    placementId: 'YOUR_PLACEMENT_ID',
    params: {
      fetchPolicy: 'reload_revalidating_cache_data', // Load from server, fallback to cache
      loadTimeoutMs: 5000 // 5 second timeout
    }
  });
  const headerText = paywall.remoteConfig?.['header_text'];
} catch (error) {
  console.error('Failed to fetch paywall:', error);
}
```

此时，一旦您获取到所有必要的值，就可以对其进行渲染并组合成一个视觉上吸引人的页面。请确保设计能够适配各种手机屏幕尺寸和方向，在不同设备上提供流畅且友好的用户体验。

:::warning
请务必按照下文所述[记录付费墙查看事件](present-remote-config-paywalls-capacitor#track-paywall-view-events)，以便 Adapty 分析系统能够采集漏斗和 A/B 测试所需的数据。
:::

展示付费墙完成后，请继续设置购买流程。当用户发起购买时，只需使用付费墙中的产品调用 `.makePurchase()`。有关 `.makePurchase()` 方法的详细信息，请参阅[发起购买](capacitor-making-purchases)。

我们建议[创建一个名为备用付费墙的备份付费墙](capacitor-use-fallback-paywalls)。当用户没有网络连接或没有可用缓存时，将向其展示该备份付费墙，确保即使在这些情况下也能提供流畅的体验。

## 记录付费墙查看事件 \{#track-paywall-view-events\}

Adapty 可帮助您衡量付费墙的表现。虽然我们会自动收集购买数据，但记录付费墙查看事件需要您的配合，因为只有您才知道用户何时查看了付费墙。

要记录付费墙查看事件，只需调用 `.logShowPaywall(paywall)`，该事件将反映在漏斗和 A/B 测试的付费墙数据图表中。

:::important
如果您展示的是在[付费墙编辑工具](adapty-paywall-builder)中创建的付费墙，则无需调用 `.logShowPaywall(paywall)`。
:::

```typescript showLineNumbers

try {
  await adapty.logShowPaywall({ paywall });
} catch (error) {
  console.error('Failed to log paywall view:', error);
}
```

请求参数：

| 参数        | 是否必填 | 描述                                                       |
| :---------- | :------- | :--------------------------------------------------------- |
| **paywall** | 必填     | 一个 [`AdaptyPaywall`](https://capacitor.adapty.io/interfaces/adaptypaywall) 对象。 |