IOS APP赚钱全过程(四):开启APP订阅的5个步骤.附上全部踩坑记录.

Hi，我是蓝莓，门槛，订阅，消耗，广告作为4种赚钱模式。APP想要开发订阅模式，不容易。

今天梳理，步骤大概如下：

一、在 Appstoreconnect页面：配置订阅组，产品。

二、在RevenueCat 页面：配置付费模式，付费产品，付费权限，付费墙。

三、设计和开发代码。

四、配置测试环境。

五、提交到生产环境。

今天我们最后会，实现这样订阅配置。

一、Appstore 配置

我们要认识5个页面：

第一个页面。管理所有的订阅组

第二个页面：配置管理组名字和本地化语言。

第三个页面：配置产品页面

对应的产品名称、价格

第四个页面：设置app内购买的Issuer ID、密钥id，.p8 文件。用于链接。

第五个页面：设置测试账户

正式操作；

1.进入网站：

https://appstoreconnect.apple.com/apps/

1.1点击订阅，点击创建群组

2.1输入订阅群组名称

2.2点击创建，本地化语言：

2.3 点击创建订阅：

3.1 输入名字，id，月份：（这个id非常重要）

3.2最重要的编辑价格：

3.3 最重要的本地化语言：

3.4图像可以不上传：

3.5 截图VIP页面的截图：620*920的画面。

首个自动续期订阅必须随新 App 版本提交。

3.6 删除的话，点击下架：

4.1 点击生成购买密钥

4.2 点击购买id

5.1 生成测试账号

二、在RevenueCat 配置

如果不使用RevenueCat框架。react-native-iap 是社区官方封装苹果 StoreKit 原生接口，需要前后端自己开发!

推荐使用RevenueCat框架。RevenueCat 会帮你搞定所有后端服务器验证、Webhook 监听、订阅状态管理，你完全不需要写一行后端代码。

App Store Connect 和 RevenueCat关系。

App Store Connect：相当于你的“苹果官方银行金库”。

RevenueCat：相当于你请的“外聘财务管家”。

怎么关联？：你不能把你的 Apple 账号密码直接给 RevenueCat。所以，你需要在 App Store Connect 的 “用户和访问 ➔ 集成” 页面里，专门给 RevenueCat 制作一把“专属钥匙（API 密钥）”。

RevenueCat 拿到这把钥匙后，就能随时代表你去向 Apple 查询：“某个用户到底付没付钱？这个月的包月扣成功了没有？”

使用RevenueCat 就是3步骤：

1.注册RevenueCat。

2.绑定到我们的AppStore。

3.设置产品。

1、注册RevenueCat

1.1点击注册。银行卡先不选择。

https://app.revenuecat.com/welcome

1.2 选择继续之后配置：

1.3 选择第一个：

1.4 选择安装, 需要第三方包：

npx expo install  react-native-purchases react-native-purchases-ui expo-dev-client

2.绑定到我们的Apptore 。
2. 1.点击app 输入bundleid
2.2. 我们需要在在“集成”页面具体要做什么。获取3个东西。填写到上面。
Key ID（密钥 ID）：一串短字符（如 2X9R49A3U8）。
Issuer ID（发行商 ID）：在页面顶部的一串长字符（如 69a6de70-xxxx-xxxx-xxxx）。
下载 .p8 私钥文件：点击“下载密钥”，会得到一个以 .p8 结尾的文件（⚠️ 注意：这个文件苹果只允许下载一次，下载后保存在电脑里）。
3. 设置权限，产品，套餐，还有支付墙。我们要认识4个产品。
3.1.1 设置产品，新建产品
3.1.2 标识符必须和apple一样！！！
1. Identifier（产品 ID / 标识符）：填入你在苹果 App Store Connect 后台建好的那个产品 ID

2.Display name（显示名称）你自己看的产品备注名。万事安包月 VIP。这个名字只有你自己在 RevenueCat 后台看得到，用户手机上看不到

3.Product type（产品类型）单选

Subscription（自动续期订阅） ➔ 【做包月 VIP 选这个！】含义：到期自动扣钱的包月/包年会员（比如爱奇艺、网易云包月）。

Consumable（消耗型）含义：游戏金币、代币、直播鲜花。买完用掉就没有了，可以重复充值。

Non-consumable（一次性买断）
Non-renewing subscription（非自动续期订阅）
Monthly with 12 months commitment（按月扣款但必须签一年）千万不要勾选
，保持为空即可。

3.1.3 附上权限：
点击Attach

创建成功：

3.2 进入offering输入：

或者进行修改：

3.3设置权限：

创建权限

3.4 设置支付墙。

3.4.1 设置页面名称：

3.4.2 绑定offer

3.5 相关代码：

初始化：

Purchases.configure({ apiKey:"xxx"})

offering展示：

const result: PAYWALL_RESULT = await RevenueCatUI.presentPaywall();

判断用户权限

const customerInfo = await Purchases.getCustomerInfo();if(customerInfo.entitlements.active['wanshian_pro']){显示VIP功能}

customerInfo: entitlements:权益包active: 激活的活跃包。

测试购买：退出真实Apple ID。

三、在开发代码

这里拿到api key：

启动代码_layout.tsx 里面：

import { View, Text, ScrollView, TouchableOpacity, Modal, Alert, Platform, } from 'react-native';import Purchases, { LOG_LEVEL } from 'react-native-purchases';  // 初始化 SDK（启动时的准备工作）  useEffect(() => {    Purchases.setLogLevel(LOG_LEVEL.VERBOSE);    const iosApiKey = 'appl_iyjNfPytmmnPBFpYwPEAcmnuIDw';    const androidApiKey = 'test_ZNbftornPWKtPHqlNkLnxypJrPs';    const customerInfo = await Purchases.getCustomerInfo();      console.log("customerInfocustomerInfocustomerInfocustomerInfocustomerInfocustomerInfocustomerInfo",JSON.stringify(customerInfo));    if (Platform.OS === 'ios') {       Purchases.configure({apiKey: iosApiKey});    } else if (Platform.OS === 'android') {       Purchases.configure({apiKey: androidApiKey});    }  }, []);

页面调用：

import Paywall from '@/src/components/Paywall';        <Paywall/>

Paywall.tsx:

export const handleOpenPaywall = async () => {  try {    const result: PAYWALL_RESULT = await RevenueCatUI.presentPaywall();    switch (result) {      case PAYWALL_RESULT.PURCHASED:        Alert.alert('恭喜', '购买成功！已解锁高级功能');        break;      case PAYWALL_RESULT.RESTORED:        Alert.alert('提示', '已成功恢复您的 VIP 身份');        break;      case PAYWALL_RESULT.CANCELLED:        console.log('用户取消了购买');        break;      case PAYWALL_RESULT.ERROR:        Alert.alert('错误', '拉起支付失败，请稍后重试');        break;    }  } catch (error) {    console.error('拉起付费弹窗失败 (Error):', error);    Alert.alert(      '错误',      `拉起支付弹窗失败: ${error instanceofError ? error.message : String(error)}`    );  }};

查看权限封装成为zustand里面。：

interface SubscriptionState {  // --- 状态变量 ---  // 是否是 VIP 会员  isVip: boolean;  // 是否正在加载/请求中  isLoading: boolean;  // 当前 VIP 过期时间 (ISO 8601 字符串)  expirationDate: string | null;  // 当前生效的 Product ID (例如 'vip_monthly')  activeProductId: string | null;  // 原始 CustomerInfo 对象数据  customerInfo: CustomerInfo | null;  // --- Setter / 修改器 ---  setIsVip: (isVip: boolean) => void;  setIsLoading: (isLoading: boolean) => void;  // --- 核心业务 Actions ---  // 解析 RevenueCat CustomerInfo 数据并更新状态  updateFromCustomerInfo: (info: CustomerInfo) => boolean;  // 从 RevenueCat 拉取最新订阅状态  fetchSubscriptionStatus: () => Promise<boolean>;  // 恢复购买  restorePurchases: () => Promise<boolean>;  // 初始化全局监听器（购买成功/续订时自动更新）  initSubscriptionListener: () => () => void;}

恢复购买

Purchases.restorePurchases()

支付前：

未获得vip。

请开启vip权限。

支付后：

已经获取vip权限。

点击按钮成功。

身份: 已经开通vip。到期时间。下次自动续费。

按钮：展示已经订阅。

四、配置测试环境:

做一个开发环境的包：.

eas build --profile development --platform ios

开始绑定：

设置开发环境：

手机上点一下通过后：

直接按键盘上的【回车键 (Enter)】即可！

你只需要把终端放在那里让它自己编译，大约 10~15 分钟后，控制台就会生成最终的 App 安装二维码。

启动命令：npx expo start--dev-client

像真机一样启动命令。

这两区别是啥？沙盒测试账户（第二张图）

这个是：

专门测试 App 内购买(IAP)付款的假 Apple 用户

这个是测试版本：

APP端点击沙盒账户：

自动续费服务说明：

1.订阅服务：连续包月高级会员（1个月）

2.订阅价格： ¥XX/月

3. 付款：用户确认购买并付款后，记入账户。

4.扣款/续订：苹果 iTunes 账户会在到期前 24 小时内扣费，扣费成功后订阅周期顺延一个订阅周期。

5. 取消订阅：如需取消续费，请在当前订阅周期到期前至少 24 小时，手动在 iOS“设置” -> “Apple ID” -> “订阅”中关闭自动续订功能。

(底部必须附上两个可点击的链接：)

[隐私政策] | [用户协议 / 使用条款 (EULA)]

五、正式上线。

点击三个一起提交上线，等待审核。

2.Display name（显示名称）你自己看的产品备注名。万事安包月 VIP。这个名字只有你自己在 RevenueCat 后台看得到，用户手机上看不到

3.Product type（产品类型） 单选

3.1.3 附上权限：点击Attach

3.Product type（产品类型）单选

3.1.3 附上权限：
点击Attach