在 React Native 0.73 中集成微信支付和支付宝支付并进行统一封装，可遵循以下架构设计和实现方案：

一、架构设计

graph TD
    A[JS 统一接口层] --> B[微信支付适配器]
    A --> C[支付宝支付适配器]
    B --> D[原生微信 SDK]
    C --> E[原生支付宝 SDK]

二、环境配置

1. 安装依赖

# 微信支付
npm install react-native-wechat-lib --save

# 支付宝支付
npm install react-native-yunpeng-alipay --save

1. iOS 配置

# Podfile
pod 'AlipaySDK-iOS', '~> 15.8'
pod 'WechatOpenSDK-XCFramework', '~> 2.0.2'

1. Android 配置

// android/build.gradle
allprojects {
    repositories {
        maven { url 'https://maven.aliyun.com/repository/public' }
    }
}

三、统一封装实现

1. 支付服务入口 (PayService.js)

import { Platform } from 'react-native';
import WechatPay from './WechatPay';
import Alipay from './Alipay';

const PAY_TYPE = {
  WECHAT: 'wechat',
  ALIPAY: 'alipay'
};

export default class PayService {
  static async pay(orderData, payType = PAY_TYPE.WECHAT) {
    try {
      switch(payType) {
        case PAY_TYPE.WECHAT:
          return await WechatPay.pay(orderData);
        case PAY_TYPE.ALIPAY:
          return await Alipay.pay(orderData);
        default:
          throw new Error('Unsupported payment method');
      }
    } catch (error) {
      console.error(`Payment failed: ${error.message}`);
      throw this.normalizeError(error);
    }
  }

  static normalizeError(error) {
    // 统一错误码处理
    const errorMap = {
      '-1': '通用错误',
      '-2': '用户取消',
      '4000': '支付失败'
    };
    return {
      code: error.code || -1,
      message: errorMap[error.code] || error.message
    };
  }
}

2. 微信支付适配器 (WechatPay.js)

import { NativeModules } from 'react-native';
const { WechatPay } = NativeModules;

export default {
  async pay(orderData) {
    // 验证参数格式
    if (!orderData.prepayId || !orderData.nonceStr) {
      throw new Error('Invalid wechat payment parameters');
    }

    const params = {
      partnerId: orderData.mchId,
      prepayId: orderData.prepayId,
      nonceStr: orderData.nonceStr,
      timeStamp: orderData.timestamp.toString(),
      package: 'Sign=WXPay',
      sign: orderData.sign
    };

    return new Promise((resolve, reject) => {
      WechatPay.pay(params, (result) => {
        result.code === 0 ? resolve(result) : reject(result);
      });
    });
  }
};

3. 支付宝支付适配器 (Alipay.js)

import { NativeModules } from 'react-native';
const { Alipay } = NativeModules;

export default {
  async pay(orderData) {
    // 验证参数格式
    if (typeof orderData !== 'string') {
      throw new Error('Alipay requires string-type order info');
    }

    return new Promise((resolve, reject) => {
      Alipay.pay(orderData, (result) => {
        const resCode = result.resultStatus;
        resCode === '9000' ? resolve(result) : reject({
          code: resCode,
          message: result.memo || 'Payment failed'
        });
      });
    });
  }
};

四、使用示例

import PayService from './PayService';

// 发起支付
const handlePayment = async () => {
  try {
    const order = await fetchOrderFromServer(); // 从服务器获取订单
    const result = await PayService.pay(order, 'alipay');
    console.log('Payment success:', result);
  } catch (error) {
    alert(`支付失败: ${error.message}`);
  }
};

五、关键注意事项

1. 安全规范

   • 签名操作必须在服务端完成
   • 使用 HTTPS 传输支付参数
   • 客户端禁止存储商户密钥

2. 平台差异处理

   // Android 微信支付回调处理
   import { NativeEventEmitter } from 'react-native';
   useEffect(() => {
     const eventEmitter = new NativeEventEmitter(WechatPay);
     eventEmitter.addListener('WeChatPayResp', handlePaymentResult);
   }, []);
   

3. 调试建议

   • 微信支付需在微信开放平台配置包名和签名
   • 支付宝使用沙箱环境测试
   • 真机调试时检查应用签名

4. 错误处理增强

   // 添加网络异常处理
   if (error.message.includes('Network')) {
     showRetryDialog();
   }
   

六、优化建议

1. 添加支付状态查询接口
2. 实现支付结果本地缓存
3. 集成支付日志系统
4. 支持国际化错误消息

重要提示：实际部署前需完成以下操作：

1. 在微信开放平台和支付宝开放平台注册应用
2. 配置 iOS 的 URL Scheme 和 Android 的 intent-filter
3. 向苹果申请支付权限（App Store 审核要求）

此方案通过统一接口层封装了双平台差异，提供一致的调用方式，同时保持各支付渠道的独立性，便于后续扩展其他支付方式。