在 React Native SDK 中获取远程配置付费墙的付费墙和产品

在展示远程配置和自定义付费墙之前,您需要先获取相关信息。请注意,本主题涉及远程配置和自定义付费墙。如需了解如何获取在 Flow BuilderPaywall Builder 中自定义的流程或付费墙,请参阅获取 Flow Builder 流程和 Paywall Builder 付费墙及其配置

想了解 Adapty SDK 如何集成到移动应用中的真实示例?请查看我们的示例应用,其中展示了完整的配置过程,包括显示付费墙、完成购买以及其他基本功能。

在移动应用中获取流程和产品之前(点击展开)
  1. 在 Adapty 看板中创建产品

  2. 在 Adapty 看板中创建流程或付费墙并将产品添加到其中

  3. 在 Adapty 看板中创建版位并将流程或付费墙添加到版位中

  4. 在移动应用中安装 Adapty SDK

获取流程信息

在 Adapty 中,产品 是 App Store 和 Google Play 产品的组合体。这些跨平台产品被整合到流程和付费墙中,使你能够在移动应用的特定版位中展示它们。

要展示产品,你需要使用 getFlow 方法从某个版位获取 AdaptyFlow

不要硬编码产品 ID。 唯一需要硬编码的是版位 ID。流程是远程配置的,因此产品数量和可用优惠随时可能发生变化。你的应用必须动态处理这些变化——如果今天流程返回两个产品,明天返回三个,应在不修改代码的情况下全部展示。

try {
    const id = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlow(id);
    // the requested flow
} catch (error) {
    // handle the error
}
参数是否必填描述
placementId必填版位 的标识符。该值是您在 Adapty 看板中创建版位时指定的。
fetchPolicy默认值:.reloadRevalidatingCacheData

默认情况下,SDK 会尝试从服务器加载数据,若加载失败则返回缓存数据。我们推荐使用此方式,因为它能确保用户始终获取最新数据。

但如果您认为用户的网络环境不稳定,可以考虑使用 .returnCacheDataElseLoad,在缓存存在时优先返回缓存数据。这种情况下,用户获取的数据可能不是最新的,但无论网络状况如何,都能享受更快的加载速度。缓存会定期更新,因此在会话期间使用缓存来避免网络请求是安全的。

请注意,重启应用后缓存仍会保留,只有在重新安装应用或手动清理时才会被清除。

Adapty SDK 通过两层机制存储 flow 和付费墙:上述定期更新的缓存,以及备用付费墙。我们还使用 CDN 来加快 flow 和付费墙的加载速度,并在 CDN 不可用时提供独立的备用服务器。该系统旨在确保您始终获取最新版本的 flow,同时在网络条件较差的情况下也能保持可靠性。

loadTimeoutMs默认值:5 秒

该值限制此方法的超时时间。若超时,将返回缓存数据或本地备用数据。

请注意,在极少数情况下,此方法的实际超时时间可能略晚于 loadTimeout 中指定的值,因为该操作在底层可能由多个请求组成。

在 v4 中,getFlow 不再接受 locale 参数。对于自定义付费墙,所有可用的语言环境都会在流程的远程配置(flow.remoteConfigs)中返回——选择与用户设备或应用设置相匹配的那个即可。

不要硬编码产品 ID!由于流程是远程配置的,可用产品的数量以及特殊优惠(如免费试用)都可能随时变化。请确保你的代码能够处理这些情况。

例如,如果你最初获取到 2 个产品,应用应显示这 2 个产品;但如果后来获取到 3 个产品,应用无需修改任何代码即可显示全部 3 个。唯一需要硬编码的是版位 ID。

响应参数:

参数描述
Flow一个 AdaptyFlow 对象,包含版位、标识符(idvariationId)、名称、付费墙变体(paywalls)以及 remoteConfigs 数组(每个已配置的语言区域对应一个条目)。如需获取该流程的产品,请调用 getPaywallProducts(flow)

获取产品

获取流程后,你可以查询与之对应的产品数组:

try {
    // ...flow
    const products = await adapty.getPaywallProducts(flow);
  // the requested products list
} catch (error) {
    // handle the error
}

响应参数:

参数描述
ProductsAdaptyPaywallProduct 对象列表,包含:产品标识符、产品名称、价格、货币、订阅时长及其他多个属性。
在实现自定义付费墙设计时,你可能需要访问 AdaptyPaywallProduct 对象中的以下属性。下面列出了最常用的属性,完整属性列表请参阅链接文档。
属性描述
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Title要显示产品标题,请使用 product.localizedTitle。请注意,本地化基于用户在商店中选择的国家/地区,而非设备本身的语言环境。
Price要显示本地化价格,请使用 product.price?.localizedString。该本地化基于设备的语言环境信息。您也可以通过 product.price?.amount 以数字形式获取价格,值将以当地货币表示。要获取对应的货币符号,请使用 product.price?.currencySymbol
Subscription Period要显示订阅周期(如周、月、年等),请使用 product.subscription?.localizedSubscriptionPeriod,该本地化基于设备语言环境。若需以编程方式获取订阅周期,请使用 product.subscription?.subscriptionPeriod,通过其 unit 属性可获取周期单位(即 'day''week''month''year''unknown'),numberOfUnits 则表示周期单位的数量。例如,对于按季度订阅,unit 属性值为 'month'numberOfUnits 值为 3
Introductory Offer要显示订阅包含新用户优惠的标识或其他提示,请查看 product.subscription?.offer?.phases 属性。这是一个列表,最多包含两个折扣阶段:免费试用阶段和新用户优惠价格阶段。每个阶段对象包含以下实用属性:
paymentMode:字符串类型,可选值为 'free_trial''pay_as_you_go''pay_up_front''unknown'。免费试用对应 'free_trial' 类型。
price:折扣价格(数字)。免费试用时此值为 0
localizedNumberOfPeriods:根据设备语言环境本地化的字符串,描述优惠时长。例如,三天试用优惠在此字段中显示为 '3 days'
subscriptionPeriod:您也可以通过此属性获取优惠周期的详细信息,其使用方式与上一节中描述的订阅周期相同。
localizedSubscriptionPeriod:按用户语言环境格式化的折扣订阅周期。

使用默认目标受众流程加速流程获取

通常情况下,流程的获取几乎是即时完成的,因此无需担心速度问题。但如果你设置了大量目标受众和版位,且用户的网络连接较弱,流程获取可能会比预期花费更长时间。在这种情况下,你可能希望展示一个默认流程,以确保用户体验流畅,而不是什么都不显示。 为了解决这个问题,您可以使用 getFlowForDefaultAudience 方法,该方法会获取指定版位中针对 All Users 目标受众的流程。但请务必了解,推荐的做法是使用 getFlow 方法获取流程,详情请参阅上方的获取流程信息章节。

为什么我们推荐使用 getFlow

getFlowForDefaultAudience 方法存在以下几个明显的缺陷:

  • 潜在的向后兼容性问题:如果需要针对不同应用版本(当前版本和未来版本)展示不同的流程,可能会面临挑战。你要么设计出同时兼容当前(旧版)的流程,要么接受使用当前(旧版)的用户可能遇到流程无法渲染的问题。
  • 目标定向缺失:所有用户都将看到为 All Users 目标受众设计的同一套流程,这意味着你将失去个性化定向能力(包括基于国家、营销归因或自定义属性的定向)。 如果你愿意接受这些限制以换取更快的 flow 获取速度,可按如下方式使用 getFlowForDefaultAudience 方法。否则,请继续使用上文介绍的 getFlow
try {
    const id = 'YOUR_PLACEMENT_ID';

    const flow = await adapty.getFlowForDefaultAudience(id);
  // the requested flow
} catch (error) {
    // handle the error
}
参数是否必填描述
placementId必填版位的标识符。这是你在 Adapty 看板中创建版位时指定的值。
fetchPolicy默认值:.reloadRevalidatingCacheData

默认情况下,SDK 会尝试从服务器加载数据,若加载失败则返回缓存数据。我们推荐使用此方式,因为它能确保用户始终获取最新数据。

但如果你认为用户的网络环境不稳定,可以考虑使用 .returnCacheDataElseLoad——有缓存时直接返回缓存数据。这样用户获取的数据可能不是最新的,但加载速度更快,无论网络状况如何都能流畅体验。缓存会定期更新,因此在会话期间使用缓存来减少网络请求是安全的。

请注意,缓存在应用重启后仍会保留,只有在重新安装应用或手动清除时才会被清空。

在展示远程配置和自定义付费墙之前,您需要获取相关信息。请注意,本主题涉及远程配置和自定义付费墙。有关获取付费墙编辑工具自定义付费墙的指南,请参阅获取付费墙编辑工具付费墙及其配置

想了解 Adapty SDK 如何集成到移动应用中的真实示例?请查看我们的示例应用,其中展示了完整的配置过程,包括显示付费墙、完成购买以及其他基本功能。

在您开始获取移动应用中的付费墙和产品之前(点击展开)
  1. 在 Adapty 看板中创建您的产品

  2. 在 Adapty 看板中创建付费墙并将产品添加到付费墙

  3. 在 Adapty 看板中创建版位并将付费墙添加到版位

  4. 在您的移动应用中安装 Adapty SDK

获取付费墙信息

在 Adapty 中,产品是 App Store 和 Google Play 产品的统一组合。这些跨平台产品被集成到付费墙中,使你能够在移动应用的特定版位中展示它们。

要展示产品,你需要使用 getPaywall 方法从某个版位获取付费墙

不要硬编码产品 ID。 唯一需要硬编码的是版位 ID。付费墙是远程配置的,因此产品数量和可用优惠随时可能发生变化。你的应用必须动态处理这些变化——如果今天付费墙返回两个产品,明天返回三个,应在不修改代码的情况下全部展示。

try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywall(id, locale);
    // the requested paywall
} catch (error) {
    // handle the error
}
参数是否必填描述
placementId必填版位的标识符。这是您在 Adapty 看板中创建版位时指定的值。
locale

可选

默认值:en

付费墙本地化的标识符。该参数应为语言代码,由一个或多个子标签组成,各子标签之间用连字符(-)分隔。第一个子标签表示语言,第二个子标签表示地区。

示例:en 表示英语,pt-br 表示巴西葡萄牙语。

有关语言区域代码及其推荐用法的更多信息,请参阅本地化与语言区域代码

fetchPolicy默认值:.reloadRevalidatingCacheData

默认情况下,SDK 会尝试从服务器加载数据,若加载失败则返回缓存数据。我们推荐此方式,因为它能确保用户始终获取最新数据。

但如果您认为用户网络状况不稳定,可以考虑使用 .returnCacheDataElseLoad——当缓存数据存在时直接返回缓存。这种情况下,用户获取的数据可能不是最新的,但无论网络状况如何,加载速度都会更快。缓存会定期更新,因此在会话期间使用缓存以减少网络请求是安全的。

请注意,缓存在应用重启后仍然保留,只有在卸载应用或手动清理时才会被清除。

Adapty SDK 通过两层机制存储付费墙:上述定期更新的缓存,以及备用付费墙。我们还使用 CDN 加速付费墙的拉取,并在 CDN 不可达时启用独立的备用服务器。该机制旨在确保您始终获取最新版本的付费墙,同时在网络条件较差的情况下也能保持可靠性。

loadTimeoutMs默认值:5 秒

该值用于限制此方法的超时时间。若超时,将返回缓存数据或本地备用数据。

请注意,在极少数情况下,该方法的实际超时时间可能略晚于 loadTimeout 中指定的值,因为底层操作可能由多个请求组成。

不要硬编码产品 ID!由于付费墙是远程配置的,可用产品的数量以及特别优惠(如免费试用)随时可能发生变化。请确保你的代码能够处理这些情况。

例如,如果你最初获取到 2 个产品,应用应显示这 2 个产品;但如果之后获取到 3 个产品,应用无需任何代码改动就应显示全部 3 个。唯一需要硬编码的是版位 ID。

响应参数:

参数描述
Paywall一个 AdaptyPaywall 对象,包含:产品 ID 列表、付费墙标识符、远程配置及其他若干属性。

获取产品

获取付费墙后,你可以查询与之对应的产品数组:

try {
    // ...paywall
    const products = await adapty.getPaywallProducts(paywall);
  // the requested products list
} catch (error) {
    // handle the error
}

响应参数:

参数描述
ProductsAdaptyPaywallProduct 对象列表,包含:产品标识符、产品名称、价格、货币、订阅时长及其他多个属性。
在实现自定义付费墙设计时,你可能需要访问 AdaptyPaywallProduct 对象中的以下属性。下面列出了最常用的属性,完整的属性说明请参阅链接文档。
属性描述
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Title要显示产品标题,请使用 product.localizedTitle。请注意,本地化基于用户所选的商店国家/地区,而非设备本身的语言区域设置。
Price要显示本地化价格,请使用 product.price?.localizedString。本地化基于设备的语言区域信息。您也可以通过 product.price?.amount 以数字形式获取价格,该值将以本地货币为单位。要获取对应的货币符号,请使用 product.price?.currencySymbol
Subscription Period要显示订阅周期(如周、月、年等),请使用 product.subscription?.localizedSubscriptionPeriod,本地化基于设备的语言区域。如需以编程方式获取订阅周期,请使用 product.subscription?.subscriptionPeriod,通过其 unit 属性可获取周期单位(即 'day''week''month''year''unknown'),numberOfUnits 则表示周期单位数量。例如,对于按季度订阅,unit 属性显示 'month'numberOfUnits 显示 3
Introductory Offer要显示徽章或其他指示器以表明订阅包含新用户优惠,请查看 product.subscription?.offer?.phases 属性。这是一个最多包含两个折扣阶段的列表:免费试用阶段和新用户优惠价格阶段。每个阶段对象包含以下实用属性:
paymentMode:字符串类型,可选值为 'free_trial''pay_as_you_go''pay_up_front''unknown'。免费试用类型为 'free_trial'
price:折扣价格(数字类型)。免费试用时该值为 0
localizedNumberOfPeriods:根据设备语言区域本地化的字符串,描述优惠时长。例如,三天试用优惠在此字段显示 '3 days'
subscriptionPeriod:您也可以通过此属性获取优惠周期的详细信息,用法与上一节中描述的订阅周期相同。
localizedSubscriptionPeriod:针对用户语言区域格式化后的折扣订阅周期字符串。

利用默认目标受众付费墙加快付费墙加载速度

通常情况下,付费墙的加载几乎是瞬间完成的,无需为此担心。但当你配置了大量目标受众和付费墙,且用户网络连接较差时,加载付费墙可能会比预期花费更长的时间。在这种情况下,你可能希望先展示一个默认付费墙,以确保良好的用户体验,而不是让用户看到空白。 为了解决这个问题,你可以使用 getPaywallForDefaultAudience 方法,该方法会为 All Users 目标受众获取指定版位的付费墙。但请务必注意,推荐的做法是使用 getPaywall 方法获取付费墙,详情请参阅上方的获取付费墙信息章节。

为什么我们推荐使用 getPaywall

getPaywallForDefaultAudience 方法存在以下几个明显的缺点:

  • 潜在的向后兼容性问题:如果需要为不同的应用版本(当前版本和未来版本)展示不同的付费墙,可能会遇到挑战。你要么必须设计兼容当前(旧版)的付费墙,要么接受使用当前(旧版)的用户可能遇到付费墙无法渲染的问题。
  • 丢失定向能力:所有用户都将看到为 All Users 目标受众设计的同一个付费墙,这意味着你将失去个性化定向能力(包括基于国家、营销归因或自定义属性的定向)。 如果你愿意接受这些不足之处以换取更快的付费墙获取速度,请按如下方式使用 getPaywallForDefaultAudience 方法。否则,请继续使用上文介绍的 getPaywall
try {
    const id = 'YOUR_PLACEMENT_ID';
    const locale = 'en';

    const paywall = await adapty.getPaywallForDefaultAudience(id, locale);
  // the requested paywall
} catch (error) {
    // handle the error
}

getPaywallForDefaultAudience 方法从 React Native SDK 2.11.2 版本开始支持。

参数是否必填描述
placementId必填版位的标识符。这是您在 Adapty 看板中创建版位时指定的值。
locale

可选

默认值:en

付费墙本地化的标识符。该参数应为由一个或多个子标签组成的语言代码,子标签之间用减号(-)分隔。第一个子标签表示语言,第二个子标签表示地区。

示例:en 表示英语,pt-br 表示巴西葡萄牙语。

有关语言代码及推荐使用方式的更多信息,请参阅本地化与语言代码

fetchPolicy默认值:.reloadRevalidatingCacheData

默认情况下,SDK 会尝试从服务器加载数据,若请求失败则返回缓存数据。我们推荐使用此方式,因为它能确保用户始终获取最新数据。

但如果您认为用户的网络连接不稳定,可以考虑使用 .returnCacheDataElseLoad——在缓存存在时直接返回缓存数据。这样用户获取的数据可能不是最新的,但无论网络状况如何,都能体验到更快的加载速度。缓存会定期更新,因此在会话期间使用缓存来减少网络请求是安全的。

请注意,缓存在应用重启后仍会保留,只有在重新安装应用或手动清除时才会被清空。