React Native IAP 应用内功能全流程解析与最佳实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00218/article/details/148755526

React Native IAP 应用内功能全流程解析与最佳实践

react-native-iap react-native native module for In App Purchase. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-iap

前言

在移动应用开发中，应用内功能(IAP)是变现的重要方式之一。react-native-iap 作为 React Native 生态中最成熟的 IAP 解决方案，为开发者提供了跨平台的功能支持。本文将深入解析该库的功能流程设计原理，并给出完整的实现方案。

功能流程设计原理

传统流程的问题

在早期版本中，react-native-iap 采用基于 Promise 的回调模式，但在实际使用中发现了几个关键问题：

多响应问题：一次功能请求可能会产生多个响应
跨会话异步性：功能请求可能持续数小时，即使应用关闭后仍会继续
挂起状态难追踪：某些功能可能处于待处理状态
事件模式更合适：原生计费流程本质上是事件驱动而非回调驱动

新流程设计

基于这些发现，react-native-iap 重构了功能流程，采用事件监听模式：

通过 purchaseUpdatedListener 监听成功功能
通过 purchaseErrorListener 监听功能错误
移除基于 Promise 的 buyProduct 方法，改用 requestPurchase

实现完整功能流程

1. 初始化与监听设置

建议在应用启动时立即设置监听器，因为可能有之前未完成的功能：

import {
  initConnection,
  purchaseUpdatedListener,
  purchaseErrorListener,
  finishTransaction,
  flushFailedPurchasesCachedAsPendingAndroid
} from 'react-native-iap';

class App extends Component {
  componentDidMount() {
    initConnection().then(() => {
      // 清理Android上失败的待处理功能
      flushFailedPurchasesCachedAsPendingAndroid()
        .then(() => {
          // 设置成功功能监听
          this.purchaseUpdateSubscription = purchaseUpdatedListener(
            async (purchase) => {
              if (purchase.transactionReceipt) {
                // 向服务器验证功能
                const deliveryResult = await verifyPurchaseOnServer(
                  purchase.transactionReceipt
                );
                
                if (deliveryResult.success) {
                  // 完成交易
                  await finishTransaction({
                    purchase,
                    isConsumable: true // 根据商品类型设置
                  });
                }
              }
            }
          );
          
          // 设置功能错误监听
          this.purchaseErrorSubscription = purchaseErrorListener(
            (error) => console.warn('功能错误', error)
          );
        });
    });
  }
  
  componentWillUnmount() {
    // 清理监听器
    this.purchaseUpdateSubscription?.remove();
    this.purchaseErrorSubscription?.remove();
  }
}

2. 发起功能请求

根据商品类型(一次性商品或订阅)发起不同的请求：

import { Platform, Pressable } from 'react-native';
import { requestPurchase, requestSubscription } from 'react-native-iap';

class App extends Component {
  // 功能一次性商品
  handlePurchase = async (productId) => {
    try {
      const params = Platform.OS === 'android' 
        ? { skus: [productId] }
        : { 
            sku: productId,
            andDangerouslyFinishTransactionAutomaticallyIOS: false
          };
      
      await requestPurchase(params);
    } catch (error) {
      console.error('功能失败', error);
    }
  };

  // 订阅商品(处理Android的优惠方案)
  handleSubscribe = async (productId, offerToken) => {
    try {
      await requestSubscription({
        sku: productId,
        ...(offerToken && { subscriptionOffers: [{ sku: productId, offerToken }] })
      });
    } catch (error) {
      console.error('订阅失败', error);
    }
  };

  render() {
    return (
      <>
        {/* 一次性商品 */}
        <Pressable onPress={() => this.handlePurchase(product.productId)}>
          <Text>获取商品</Text>
        </Pressable>

        {/* 订阅商品 */}
        {Platform.OS === 'android' ? (
          product.subscriptionOfferDetails?.map(offer => (
            <Pressable 
              key={offer.offerToken}
              onPress={() => this.handleSubscribe(product.productId, offer.offerToken)}
            >
              <Text>订阅方案: {offer.pricingPhases[0].price}</Text>
            </Pressable>
          ))
        ) : (
          <Pressable onPress={() => this.handleSubscribe(product.productId)}>
            <Text>订阅</Text>
          </Pressable>
        )}
      </>
    );
  }
}