在 React Native SDK 自定义付费墙中启用购买功能
本指南介绍如何将 Adapty 集成到您的自定义付费墙中。您可以完全掌控付费墙的实现方式,同时由 Adapty SDK 负责获取产品、处理新购买以及恢复历史购买。
本指南适用于实现自定义付费墙的开发者。 如果您希望以最简便的方式启用购买功能,请使用 Adapty 付费墙编辑工具。使用付费墙编辑工具,您可以在无代码可视化编辑器中创建付费墙,Adapty 会自动处理所有购买逻辑,并且无需重新发布应用即可测试不同的设计方案。
开始之前
设置产品
要启用应用内购买,您需要了解三个核心概念:
- 产品 – 用户可以购买的任何内容(订阅、消耗型商品、永久授权)
- 付费墙 – 定义向用户提供哪些产品的配置。在 Adapty 中,付费墙是检索产品的唯一方式,但这种设计允许您在无需修改应用代码的情况下调整产品、价格和优惠。
- 版位 – 在应用中展示付费墙的位置和时机(例如
main、onboarding、settings)。您在看板中为版位配置付费墙,然后在代码中通过版位 ID 请求它们。这使得运行 A/B 测试以及向不同用户展示不同付费墙变得非常便捷。
即使您使用自定义付费墙,也需要了解这些概念。它们本质上是您管理应用内销售产品的方式。
要实现自定义付费墙,您需要创建一个付费墙并将其添加到版位中。此设置可让您检索产品。要了解在看板中需要执行的操作,请参阅此处的快速入门指南。
管理用户
您可以选择使用或不使用后端身份验证。
但是,Adapty SDK 对匿名用户和已识别用户的处理方式不同。请阅读身份识别快速入门指南,了解其中的差异,确保正确处理用户数据。
步骤 1. 获取产品
要检索自定义付费墙的产品,您需要:
- 通过将版位 ID 传递给
getPaywall方法来获取paywall对象。 - 使用
getPaywallProducts方法获取该付费墙的产品数组。
import { adapty } from 'react-native-adapty';
import type { AdaptyPaywall, AdaptyPaywallProduct } from 'react-native-adapty';
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. 接受购买
当用户在自定义付费墙中点击某个产品时,使用所选产品调用 makePurchase 方法。该方法将处理购买流程并返回更新后的用户画像。
import { adapty } from 'react-native-adapty';
import type { AdaptyPaywallProduct, AdaptyPurchaseResult } from 'react-native-adapty';
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. 恢复购买
应用商店要求所有含订阅功能的应用提供用户恢复购买的途径。
当用户点击恢复按钮时,调用 restorePurchases 方法。该方法将把用户的购买历史与 Adapty 同步,并返回更新后的用户画像。
import { adapty } from 'react-native-adapty';
import type { AdaptyProfile } from 'react-native-adapty';
async function restorePurchases() {
try {
const profile: AdaptyProfile = await adapty.restorePurchases();
// Restore successful, profile updated
} catch (error) {
// Handle the error
}
}
后续步骤
有疑问或遇到问题?请访问我们的支持论坛,您可以在那里找到常见问题的解答,或者提出您自己的问题。我们的团队和社区随时为您提供帮助!
您的付费墙已准备好在应用中展示。请在 App Store 沙盒或 Google Play 商店中测试您的购买功能,以确保能够从付费墙完成测试购买。要查看生产就绪实现的示例,请参阅我们示例应用中的 CustomPurchaseScreen.tsx,该文件展示了包含完善的错误处理、加载状态和 UI 状态管理的购买处理实现。
接下来,检查用户是否已完成购买,以决定是否展示付费墙或授予用户访问付费功能的权限。