背景介紹

uni-app 可以轉微信小程序或直接打包 APP ，支付模塊使用統一方法 uni.requestPayment 但是不同平臺參數不同容易出現混淆錯亂。

相關網站

• uni-app 統一支付： https://uniapp.dcloud.net.cn/api/plugins/payment.html
• 小程序支付（v2）：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5
• 微信支付（v2）：https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=9_12&index=2
• 小程序支付方法：https://developers.weixin.qq.com/miniprogram/dev/api/payment/wx.requestPayment.html

注意事項

uni.requestPayment 方法的 orderInfo 不同平臺參數類型不同，文檔中參數僅示例并非真實參數值。

1. 微信小程序支付時要使用解構賦值，或者一個個get set ，最容易出錯的地方
2. APP 微信支付時需要的是orderInfo 對象，不能解構賦值
3. APP 支付寶支付返回的是orderInfo 字符串
4. provider 參數:
   • alipay 支付寶支付
   • wxpay 微信支付
5. 注意 orderInfo 對象中 key 大小寫問題以及駝峰命名容易出錯。

微信小程序

orderInfo 參數內容

{
    "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 參數內容

{
    "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('支付失敗!')
},