526互联

uniapp 微信支付，小程序支付，支付宝支付问题汇总

发布时间 2023-12-26 16:04:03作者: 天葬

背景介绍

uni-app 可以转微信小程序或直接打包 APP ，支付模块使用统一方法 uni.requestPayment 但是不同平台参数不同容易出现混淆错乱。

相关网站

注意事项

uni.requestPayment 方法的 orderInfo 不同平台参数类型不同，文档中参数仅示例并非真实参数值。

  1. 微信小程序支付时要使用解构赋值，或者一个个get set ，最容易出错的地方
  2. APP 微信支付时需要的是orderInfo 对象，不能解构赋值
  3. APP 支付宝支付返回的是orderInfo 字符串
  4. provider 参数:
    • alipay 支付宝支付
    • wxpay 微信支付
  5. 注意 orderInfo 对象中 key 大小写问题以及驼峰命名容易出错。

微信小程序

orderInfo 参数内容

字段名 变量名 必填 类型 示例值 描述
小程序ID appId 是 String wxd678efh567hg6787 微信分配的小程序ID
时间戳 timeStamp 是 String 1490840662 时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间
随机串 nonceStr 是 String 5K8264ILTKCH16CQ2502SI8ZNMTM67VS 随机字符串，不长于32位。推荐随机数生成算法
数据包 package 是 String prepay_id=wx2017033010242291fcfe0db70013231072 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=wx2017033010242291fcfe0db70013231072
签名方式 signType 是 String MD5 签名类型，默认为MD5，支持HMAC-SHA256和MD5。注意此处需与统一下单的签名类型一致 
{
    "appId": "wx12234578963",
    "nonceStr": "e1c0666542b544d6bf8d2228ee45316",
    "package": "prepay_id=wx1223457896342cabe60000",
    "paySign": "F2141E9E3CFDC91C88876753D66FE238",
    "signType": "MD5",
    "timeStamp": "1703575999"
}

/**
 * 微信小程序支付
 *
 * @param {Object} orderInfo
 */
mpPay(orderInfo) {
    uni.requestPayment({
        provider: 'wxpay',
        ...orderInfo,
        success: (res) => {
            this.handleSuccess(res)
        },
        fail: (err) => {
            this.handleFail(err)
        }
    });
},

APP-微信支付

orderInfo 参数内容

字段名 变量名 类型 必填 示例值 描述
应用ID appid String(32) 是 wx8888888888888888 微信开放平台审核通过的应用APPID（请登录open.weixin.qq.com查看，注意与公众号的APPID不同）
商户号 partnerid String(32) 是 1900000109 微信支付分配的商户号
预支付交易会话ID prepayid String(64) 是 WX1217752501201407033233368018 微信返回的支付交易会话ID
扩展字段 package String(128) 是 Sign=WXPay 暂填写固定值Sign=WXPay
随机字符串 noncestr String(32) 是 5K8264ILTKCH16CQ2502SI8ZNMTM67VS 随机字符串，不长于32位。推荐随机数生成算法
时间戳 timestamp String(10) 是 1412000000 时间戳，请见接口规则-参数规定
签名 sign String(64) 是 C380BEC2BFD727A4B6845133519F3AD6 签名，详见签名生成算法注意：签名方式一定要与统一下单接口使用的一致 
{
    "appid": "wx12234578963",
    "noncestr": "1a1f10e3268f4232434b2b7298a813346",
    "package": "Sign=WXPay",
    "partnerid": "1604685413",
    "prepayid": "wx1223457896323f225454f4a0000",
    "sign": "8B49EBBE314AF4F0134A5977AECF155",
    "timestamp": "1703575927"
}

/**
 * 支付宝-微信-APP支付
 *
 * @param {Object} orderInfo 订单参数
 * @param {Object} provider 支付平台
 */
pay(orderInfo, provider) {
    uni.requestPayment({
        provider: provider,
        orderInfo: orderInfo,
        success: (res) => {
            this.handleSuccess(res)
        },
        fail: (err) => {
            this.handleFail(err)
        }
    });
},

App-支付宝支付

orderInfo 参数内容

alipay_sdk=alipay-easysdk-java&app_id=123456789&biz_content=%7B%22out_trade_no%22%3A%22244b98fe9c994bde8705758323f46685%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%2C%22subject%22%3A%22%E4%BA%8C%E6%89%8B%E5%95%86%E5%93%81%E6%9C%8D%E5%8A%A1%E8%AF%B7%E7%82%B9%E8%BF%99%E9%87%8C%22%2C%22timeout_express%22%3A%2260m%22%2C%22total_amount%22%3A%220.10%22%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=https://example.com&sign=OWsEBZ4Njn1wg7fiF8FmYXb8yDZbg8m25vC2Va2waJ201qUHCEOQiH8RV9TL4CRkoX04VIbK4au4fHX0F9kfElmmmR+kccz7IyLYOnVV61fAB+ytgrS99oy+tYcAfvoiF8Zpp9O0t+F7Vb2wer324234343434RHFzTkh2kE+hY8djszbuWX0/5Q2gmGw9Wef+ykqtfMkSL0GifEBU21UbJvlIZuMBL1vNFaDre+XpUr2cm3n5pTXefCXDdJyvYKBx3B04j3jjob2jLkYqZUQbR+cbWdp43S+zzNQcoM/a78RRdrg0pQWm6BGR8DJex0Dz9Gqg==&sign_type=RSA2&timestamp=2023-12-26+15:33:57&version=1.0

/**
 * 支付宝-微信-APP支付
 *
 * @param {Object} orderInfo 订单参数
 * @param {Object} provider 支付平台
 */
pay(orderInfo, provider) {
    uni.requestPayment({
        provider: provider,
        orderInfo: orderInfo,
        success: (res) => {
            this.handleSuccess(res)
        },
        fail: (err) => {
            this.handleFail(err)
        }
    });
},

成功-失败

支付成功返回：requestPayment:ok 

handleSuccess(res) {
    // "requestPayment:ok" 支付成功
    console.log(res);
    this.loading = false;
    uni.hideLoading()
    this.$u.toast('支付成功!')
},
handleFail(res) {
    console.log(res);
    this.loading = false;
    uni.hideLoading()
    this.$u.toast('支付失败!')
},