寻求Capacitor+React JS集成iOS/Android InApp purchase的文档与方案

一、官方推荐插件 #

直接使用Capacitor官方维护的@capacitor/in-app-purchase插件，原生支持iOS和Android内购，无需额外封装。

• 安装命令：

  npm install @capacitor/in-app-purchase
  npx cap sync
  

二、React项目核心代码实现 #

1. 初始化与商品加载 #

先初始化插件，再从平台拉取你在开发者后台配置好的商品信息：

import { InAppPurchase } from '@capacitor/in-app-purchase';
import { useState, useEffect } from 'react';

async function initIAP() {
  try {
    await InAppPurchase.initialize();
    // 传入你在苹果/Google后台创建的商品ID列表
    const { products } = await InAppPurchase.getProducts({
      products: ['com.yourapp.premium', 'com.yourapp.monthly_sub']
    });
    // 将商品信息存入状态，供前端展示
    // setProducts(products);
  } catch (err) {
    console.error('初始化内购失败:', err);
  }
}

// 组件挂载时调用初始化
useEffect(() => {
  initIAP();
}, []);

2. 发起购买流程 #

async function handlePurchase(productId) {
  try {
    const result = await InAppPurchase.purchase({ productId });
    if (result.purchased) {
      // 购买成功，这里建议把交易凭证传到后端做验证
      const isValid = await verifyPurchaseOnBackend(result.transaction.receipt);
      if (isValid) {
        // 解锁对应功能、更新用户状态
        console.log('购买验证通过，解锁功能');
      } else {
        console.error('购买凭证无效');
      }
    } else {
      console.log('用户取消购买');
    }
  } catch (err) {
    console.error('购买出错:', err);
  }
}

3. 恢复已购商品 #

处理用户卸载重装后恢复已购内容的场景：

async function restorePurchases() {
  try {
    const restoredTransactions = await InAppPurchase.restorePurchases();
    restoredTransactions.forEach(transaction => {
      // 恢复对应功能，同样建议先验证凭证
      verifyPurchaseOnBackend(transaction.receipt);
    });
  } catch (err) {
    console.error('恢复购买失败:', err);
  }
}

三、原生平台配置要点 #

• iOS:
  • 在苹果开发者后台创建内购商品（消耗型/非消耗型/订阅），确保商品ID与代码中一致
  • 打开Xcode，为应用开启"In-App Purchase" Capability
  • 测试必须使用苹果沙盒账号，不能用真实Apple ID
• Android:
  • 在Google Play控制台创建内购商品/订阅，关联应用包名
  • 确保应用签名证书与控制台配置一致，测试需将应用上传到Play控制台的内部测试渠道（草稿状态也可）

四、实践踩坑提示 #

• 必须后端验证：绝对不能只相信客户端返回的购买结果，苹果和Google都提供了官方的凭证验证接口，后端调用这些接口确认交易合法性，防止恶意破解
• 订阅状态处理：订阅类商品要监听过期、续费、取消等事件，及时更新用户权限，避免出现用户已续费但功能未解锁的情况
• 测试注意事项：iOS沙盒购买可能存在延迟，Android测试需确保设备已加入测试渠道，且登录的Google账号是测试账号
• 未完成交易处理：应用启动时建议检查未完成的交易，避免用户支付成功但功能未解锁的情况

内容的提问来源于stack exchange，提问作者user23441166