推荐开源项目：React Native In-app Purchases（react-native-iap）

'# 推荐开源项目：React Native In-app Purchases（react-native-iap）

一、背景与问题

在移动应用开发中，内购功能是常见需求。React Native作为跨平台开发框架，需要处理iOS和Android平台不同的内购机制。react-native-iap 是一个广泛使用的开源库，它封装了iOS的StoreKit和Android的BillingClient，提供统一的API接口。

然而，开发者在使用时常遇到以下问题：

不同平台的购买流程差异
测试环境配置复杂
购买状态同步机制不明确
安全性隐患（如客户端验证不足）
退款和订阅管理的复杂性

二、基本原理

1. 平台差异处理

iOS：通过StoreKit的SKPayment接口，需要处理SKPaymentTransaction生命周期
Android：通过Google Play的BillingClient，需要处理Purchase和SkuDetails对象
通用接口：react-native-iap通过原生模块（NativeModules）封装差异逻辑，提供统一的purchase和getPurchases方法

2. 购买流程

调用purchase方法发起购买
平台返回purchaseResult包含：
- purchaseId：购买凭证
- receipt：平台签名校验数据
- originalTransactionId：原始交易ID
需要服务器端校验（尤其对高价值商品）

3. 状态同步机制

平台返回的purchaseResult包含purchaseState（如Purchased/Restored/Cancelled）
需要本地持久化存储购买状态
通过getPurchases方法获取历史购买记录

三、环境准备

1. 安装依赖

npm install react-native-iap

2. 平台配置

iOS（App Store Connect）

在App Store Connect配置内购商品

在Info.plist添加：

<key>com.apple.developer.in-app-purchases</key>
<array>
 <string>com.yourapp.product1</string>
</array>

Android（Google Play Console）

在Google Play Console配置测试账户

在AndroidManifest.xml添加：

<queries>
 <intent action="android.intent.action.VIEW"
         data="http://example.com"/>
</queries>

四、核心实现

1. 基础使用示例

import { NativeModules } from 'react-native';
import IAP from 'react-native-iap';

// 初始化
IAP.init().then(() => {
  console.log('初始化成功');
}).catch(err => {
  console.error('初始化失败:', err);
});

// 购买商品
const purchaseProduct = async (productID) => {
  try {
    const purchaseResult = await IAP.purchase(productID);
    console.log('购买结果:', purchaseResult);
    // 需要服务器端校验
    await validatePurchase(purchaseResult);
  } catch (err) {
    console.error('购买失败:', err);
  }
};

2. 完整购买流程示例

// 检查购买状态
const checkPurchases = async () => {
  const purchases = await IAP.getPurchases();
  if (purchases.length > 0) {
    console.log('已有购买记录:', purchases);
    // 可以选择展示已购商品
  }
};

// 购买商品并校验
const purchaseAndValidate = async (productID) => {
  try {
    const purchaseResult = await IAP.purchase(productID);
    
    // 服务器端校验（建议）
    const serverResponse = await validateWithServer(purchaseResult);
    
    if (serverResponse.success) {
      // 处理购买成功逻辑
      console.log('购买成功，商品:', productID);
    } else {
      // 处理验证失败
      console.warn('购买验证失败');
    }
  } catch (err) {
    console.error('购买流程异常:', err);
  }
};

3. 状态处理示例

// 处理购买状态变化
IAP.onPurchaseStatusChange((purchase) => {
  console.log('购买状态变化:', purchase);
  // 可以在这里更新UI状态
});

// 处理购买完成事件
IAP.onPurchaseComplete((purchase) => {
  console.log('购买完成:', purchase);
  // 可以在这里触发支付成功动画
});

五、完整案例：虚拟商品购买系统

1. 项目结构

.
├── App.js
├── components
│   └── PurchaseButton.js
├── utils
│   └── iap.js
└── App.json

2. 核心代码

App.js

import React, { useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import { purchaseAndValidate } from './utils/iap';

const App = () => {
  useEffect(() => {
    // 初始化IAP
    IAP.init()
      .then(() => console.log('IAP初始化成功'))
      .catch(err => console.error('初始化失败:', err));
  }, []);

  const handlePurchase = () => {
    purchaseAndValidate('com.yourapp.product1')
      .then(() => {
        alert('购买成功');
      })
      .catch(err => {
        alert(`购买失败: ${err.message}`);
      });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>React Native In-app Purchases 示例</Text>
      <Button title="购买虚拟商品" onPress={handlePurchase} />
    </View>
  );
};

export default App;

utils/iap.js

import IAP from 'react-native-iap';

// 服务器端校验（需替换为实际接口）
async function validateWithServer(purchase) {
  // 实际开发中应通过HTTPS接口校验
  const response = await fetch('https://your-server.com/validate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(purchase)
  });
  
  const data = await response.json();
  return data;
}

export async function purchaseAndValidate(productID) {
  try {
    const purchaseResult = await IAP.purchase(productID);
    
    // 服务器端校验
    const serverResponse = await validateWithServer(purchaseResult);
    
    if (serverResponse.success) {
      // 处理购买成功逻辑
      console.log('购买成功，商品:', productID);
      return Promise.resolve();
    } else {
      // 处理验证失败
      console.warn('购买验证失败');
      return Promise.reject(new Error('验证失败'));
    }
  } catch (err) {
    console.error('购买流程异常:', err);
    return Promise.reject(err);
  }
}

六、源码解析

1. 核心模块结构

react-native-iap的源码中包含两个核心模块：

iOS模块（RCTIAPManager.m）

- (void)purchase:(NSString *)productID {
    // 调用StoreKit的SKPayment接口
    SKPayment *payment = [SKPayment paymentWithProductID:productID];
    [SKPaymentQueue defaultQueue].addPayment:payment
    // 处理支付完成回调
}

Android模块（IapModule.java）

public class IapModule extends ReactContextBaseActivity {
    private BillingClient billingClient;
    
    public void purchase(String productID) {
        // 初始化BillingClient
        billingClient = BillingClient.newBuilder(this)
            .setListener(new PurchasesListener())
            .build();
        billingClient.startConnection();
        
        // 查询商品信息
        SkuDetails skuDetails = ...;
        billingClient.launchPurchaseFlow(...);
    }
}

2. 跨平台处理逻辑

// 通用购买方法
async function purchase(productID) {
  if (Platform.OS === 'ios') {
    return await IAP.purchase(productID); // 调用iOS原生方法
  } else {
    return await IAP.purchase(productID); // 调用Android原生方法
  }
}

七、进阶使用

1. 订阅管理

// 获取订阅状态
async function getSubscriptionStatus() {
  const purchases = await IAP.getPurchases();
  const activeSubscriptions = purchases.filter(p => 
    p.purchaseState === 'Purchased' && 
    p.originalTransactionId && 
    p.expiresDate
  );
  
  return activeSubscriptions.length > 0;
}

2. 退款处理

// 处理退款请求
async function requestRefund(productID) {
  try {
    const purchaseResult = await IAP.purchase(productID);
    if (purchaseResult.purchaseState === 'Purchased') {
      // 调用平台退款接口
      const refundResult = await refundWithServer(purchaseResult);
      return refundResult.success;
    }
    return false;
  } catch (err) {
    console.error('退款失败:', err);
    return false;
  }
}

3. 跨平台数据同步

// 保存购买状态到本地存储
async function savePurchaseStatus(productID, status) {
  try {
    await AsyncStorage.setItem(`iap:${productID}`, status);
  } catch (err) {
    console.error('保存购买状态失败:', err);
  }
}

八、性能与工程实践

1. 性能优化策略

异步处理：避免阻塞主线程
缓存机制：缓存常见商品信息
节流控制：限制购买请求频率
资源回收：在组件卸载时清理连接

// 节流控制示例
let isPurchasing = false;
const purchaseWithThrottle = (productID) => {
  if (isPurchasing) return;
  isPurchasing = true;
  
  try {
    purchaseAndValidate(productID)
      .then(() => {
        isPurchasing = false;
      })
      .catch(() => {
        isPurchasing = false;
      });
  } catch (err) {
    isPurchasing = false;
  }
};

2. 异常处理机制

// 完善的错误处理
try {
  await IAP.purchase(productID);
} catch (err) {
  if (err.code === 'NO_NETWORK') {
    console.warn('无网络连接，无法完成购买');
  } else if (err.code === 'INVALID_PRODUCT') {
    console.error('无效的商品ID');
  } else {
    console.error('未知错误:', err.message);
  }
}

3. 安全加固措施

服务器端验证：所有购买请求都需服务器端校验
签名验证：使用平台签名机制（如Apple的receipt校验）
防止刷单：在服务器端记录购买记录

// 服务器端校验示例（Node.js）
const verifyReceipt = async (receiptData) => {
  const response = await fetch('https://buy.itunes.apple.com/verifyReceipt', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      receiptData,
      // 其他参数...
    })
  });
  
  const data = await response.json();
  return data.purchase_state === 'Active';
};

九、常见问题与踩坑

1. 常见错误及解决方案

错误类型	原因	解决方案
`NO_NETWORK`	无网络连接	确保设备有网络，处理网络异常
`INVALID_PRODUCT`	商品ID错误	检查App Store/Google Play配置
`NO_PURCHASE`	未完成购买流程	确保调用`purchase`方法
`INVALID_RECEIPT`	收据校验失败	检查服务器端验证逻辑
`RATE_LIMIT_EXCEEDED`	超过请求频率限制	增加节流控制

2. 平台特定问题

iOS

必须使用沙盒环境测试
需要配置正确的App ID和证书
收据验证需使用Apple的服务器

Android

Google Play测试账户配置
需要启用开发者模式
注意Google Play的限制（如退款限制）

3. 安全风险

客户端伪造：攻击者可能篡改购买数据
签名验证不全：未完全验证平台签名
本地存储泄露：未加密存储购买状态
服务器端漏洞：未正确处理验证逻辑

十、最佳实践

1. 推荐使用场景

多平台支持：需要同时支持iOS和Android
标准化接口：需要统一的购买接口
基础购买功能：不需要复杂订阅管理
测试环境需求：需要快速测试购买流程

2. 不推荐使用场景

高度定制需求：需要完全自定义购买流程
高价值商品：需要严格校验和安全机制
订阅管理：需要处理自动续费和退款
混合支付：需要支持多种支付方式

3. 安全最佳实践

双重验证：客户端校验+服务器端校验
签名验证：使用平台提供的签名机制
加密存储：加密保存购买状态
日志审计：记录所有购买操作日志

十一、总结

react-native-iap 是一个功能完善的内购解决方案，但需要开发者注意以下几点：

理解平台差异：iOS和Android的购买流程有本质区别
完善安全机制：务必进行服务器端验证
处理异常情况：网络、权限、配置等问题需全面考虑
优化用户体验：提供清晰的购买反馈和错误提示
维护购买状态：持久化存储购买记录

在实际项目中，建议根据具体需求选择合适的方案。对于需要高度安全性的场景，建议结合服务器端验证和本地缓存机制。对于需要处理复杂订阅的场景，建议使用专门的订阅管理库。通过合理使用react-native-iap，可以快速实现跨平台的内购功能，同时保证系统的稳定性和安全性。