UniApp实现多端支付功能完整实现指南

📚 本文将分享UniApp多端支付功能的完整实现方案，包含微信支付、支付宝支付的详细配置和实现过程。

作者：沈大大

更新时间：2025-03-10

一、支付功能概述

1.1 文章要点

• 支付业务流程
• 多端支付实现
• 安全性保障
• 异常处理
• 最佳实践

1.2 技术栈

{
   
  "开发环境": "HBuilderX 3.8.0+",
  "前端框架": "Vue3 + UniApp",
  "状态管理": "Pinia",
  "网络请求": "uni.request",
  "开发语言": "TypeScript"
}

二、支付基础知识

2.1 支付流程

// 基本支付流程
1. 用户选择商品 -> 创建订单
2. 调用支付接口 -> 获取支付参数
3. 发起支付请求 -> 等待支付结果
4. 接收支付通知 -> 更新订单状态
5. 处理订单后续 -> 完成交易流程

2.2 支付参数说明

2.2.1 通用参数

// 支付参数接口定义
interface PaymentParams {
   
  // 商户订单号
  outTradeNo: string;
  // 订单金额（单位：分）
  totalFee: number;
  // 商品描述
  body: string;
  // 支付类型
  payType: 'wxpay' | 'alipay';
  // 用户标识
  openId?: string;
  // 支付超时时间
  timeExpire?: string;
}

2.2.2 微信支付参数

// 微信支付配置
interface WxPayConfig {
   
  // 微信支付商户号
  mchId: string;
  // 微信支付应用ID
  appId: string;
  // 微信支付密钥
  key: string;
  // 支付证书路径（退款等需要）
  certPath?: string;
  // 支付证书密钥路径
  keyPath?: string;
  // 回调通知地址
  notifyUrl: string;
}

// 微信支付请求参数
interface WxPaymentParams {
   
  // 时间戳
  timeStamp: string;
  // 随机字符串
  nonceStr: string;
  // 订单详情扩展字符串
  package: string;
  // 签名方式
  signType: 'MD5' | 'HMAC-SHA256';
  // 签名
  paySign: string;
}

2.2.3 支付宝支付参数

// 支付宝配置
interface AlipayConfig {
   
  // 支付宝应用ID
  appId: string;
  // 商户私钥
  privateKey: string;
  // 支付宝公钥
  publicKey: string;
  // 回调通知地址
  notifyUrl: string;
  // 支付宝网关
  gateway: string;
}

// 支付宝支付请求参数
interface AlipaymentParams {
   
  // 商户订单号
  outTradeNo: string;
  // 订单金额
  totalAmount: string;
  // 订单标题
  subject: string;
  // 产品码
  productCode: string;
  // 订单描述
  body?: string;
  // 超时时间
  timeoutExpress?: string;
}

三、微信支付实现

3.1 微信小程序支付

3.1.1 配置说明

1. 登录微信商户平台，获取必要的配置信息：

   • 商户号(mchId)
   • 商户密钥(key)
   • 支付证书

2. 在小程序管理后台配置：

   • 支付域名
   • 回调通知地址

3.1.2 完整实现

// 支付服务封装
class WxPayService {
   
  private config: WxPayConfig;
  
  constructor(config: WxPayConfig) {
   
    this.config = config;
  }
  
  // 生成支付参数
  private generatePayParams(orderInfo: any): WxPaymentParams {
   
    const params = {
   
      appId: this.config.appId,
      timeStamp: String(Date.now()),
      nonceStr: this.generateNonceStr(),
      package: `prepay_id=${
     orderInfo.prepayId}`,
      signType: 'MD5' as const
    };
    
    // 生成签名
    const paySign = this.generateSign(params);
    
    return {
   
      ...params,
      paySign
    };
  }
  
  // 创建支付订单
  async createOrder(params: PaymentParams) {
   
    try {
   
      // 1. 生成统一下单参数
      const orderParams = {
   
        appid: this.config.appId,
        mch_id: this.config.mchId,
        nonce_str: this.generateNonceStr(),
        body: params.body,
        out_trade_no: params.outTradeNo,
        total_fee: params.totalFee,
        spbill_create_ip: '127.0.0.1', // 客户端IP
        notify_url: this.config.notifyUrl,
        trade_type: 'JSAPI', // 小程序取值如此
        openid: params.openId // 用户openid
      };
      
      // 2. 生成签名
      const sign = this.generateSign(orderParams);
      
      // 3. 请求统一下单API
      const result = await uni.request({
   
        url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
        method: 'POST',
        data: {
   
          ...orderParams,
          sign
        }
      });
      
      // 4. 生成支付参数
      return this.generatePayParams(result.data);
    } catch (error) {
   
      throw new Error('创建订单失败：' + error.message);
    }
  }

  // 发起支付
  async requestPayment(payParams: WxPaymentParams): Promise<any> {
   
    return new Promise((resolve, reject)