快捷導(dǎo)航

uniapp實(shí)現(xiàn)支付功能

更新時(shí)間：2022年05月09日 11:29:54 作者：作泥

本文主要介紹了uniapp實(shí)現(xiàn)支付功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

詳細(xì)參考：
https://gitee.com/copperpeas/uniapp-payment

uniapp-payment
介紹
uniapp支付

微信支付流程
測(cè)試接入的是uniapp官方預(yù)下單接口

APP應(yīng)用首先去微信等開(kāi)發(fā)平臺(tái)申請(qǐng)開(kāi)通支付，部分支付渠道需要配置支付目錄，授權(quán)域名，回調(diào)函數(shù)

預(yù)下單返回參考：

"data": {
    "appid": "wx0411fa6a39d61297",
    "noncestr": "Xu70l0bOQSQIDIPH",
    "package": "Sign=WXPay",
    "partnerid": "1230636401",
    "prepayid": "wx271034552844601252843eae1384334800",
    "timestamp": 1569551695,
    "sign": "44B127098800419D542B688054F95A8F"
  },

參考官方微信支付 https://pay.weixin.qq.com/wiki/doc/api/index.html

小程序支付：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1

簡(jiǎn)單流程：第一步：調(diào)用登錄接口，獲取到用戶(hù)的openid等第二步：Code，價(jià)格等發(fā)送給后臺(tái)，后臺(tái)發(fā)送微信生成預(yù)支付訂單，并且返回訂單信息第三步：小程序拿到預(yù)下單訂單信息，發(fā)起支付，調(diào)起支付APP 第四步：后臺(tái)驗(yàn)證支付結(jié)果

小程序第三步調(diào)起支付給APP調(diào)起支付參數(shù)不一樣，大體流程是一致的

商戶(hù)系統(tǒng)和微信支付系統(tǒng)主要交互：

1、小程序內(nèi)調(diào)用登錄接口，獲取到用戶(hù)的openid,api參見(jiàn)公共api【小程序登錄API】

2、商戶(hù)server調(diào)用支付統(tǒng)一下單，api參見(jiàn)公共api【統(tǒng)一下單API】

3、商戶(hù)server調(diào)用再次簽名，api參見(jiàn)公共api【再次簽名】

4、商戶(hù)server接收支付通知，api參見(jiàn)公共api【支付結(jié)果通知API】

5、商戶(hù)server查詢(xún)支付結(jié)果，api參見(jiàn)公共api【查詢(xún)訂單API】

拿到預(yù)下單后調(diào)用支付

uni.requestPayment({
    timeStamp: paymentData.timeStamp,
    nonceStr: paymentData.nonceStr,
    package: paymentData.package,
    signType: 'MD5',
    paySign: paymentData.paySign,
    success: (res) => {
        uni.showToast({
            title: "感謝您的贊助!"
        })
    },
    fail: (res) => {
        uni.showModal({
            content: "支付失敗,原因?yàn)? " + res
                .errMsg,
            showCancel: false
        })
    },
    complete: () => {
        this.loading = false;
    }
})

APP支付 https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=8_3

簡(jiǎn)單流程：

第一步：獲取支付類(lèi)型，APPid，支付金額第二步：發(fā)送給后臺(tái)，后臺(tái)發(fā)送微信生成預(yù)支付訂單，并且返回訂單信息第三步：拿到預(yù)下單訂單信息，發(fā)起支付，調(diào)起支付APP 第四步：后臺(tái)驗(yàn)證支付結(jié)果

商戶(hù)系統(tǒng)和微信支付系統(tǒng)主要交互說(shuō)明：

步驟1：用戶(hù)在商戶(hù)APP中選擇商品，提交訂單，選擇微信支付。

步驟2：商戶(hù)后臺(tái)收到用戶(hù)支付單，調(diào)用微信支付統(tǒng)一下單接口。參見(jiàn)【統(tǒng)一下單API】。

步驟3：統(tǒng)一下單接口返回正常的prepay_id，再按簽名規(guī)范重新生成簽名后，將數(shù)據(jù)傳輸給APP。參與簽名的字段名為appid，partnerid，prepayid，noncestr，timestamp，package。注意：package的值格式為Sign=WXPay

步驟4：商戶(hù)APP調(diào)起微信支付。api參見(jiàn)本章節(jié)【app端開(kāi)發(fā)步驟說(shuō)明】

步驟5：商戶(hù)后臺(tái)接收支付通知。api參見(jiàn)【支付結(jié)果通知API】

步驟6：商戶(hù)后臺(tái)查詢(xún)支付結(jié)果。api參見(jiàn)【查詢(xún)訂單API】

拿到預(yù)下單后調(diào)用支付

uni.requestPayment({
    provider: e.id,
    orderInfo: orderInfo.data,
    success: (e) => {
        console.log("success", e);
        uni.showToast({
            title: "感謝您的贊助!"
        })
    },
    fail: (e) => {
        console.log("fail", e);
        uni.showModal({
            content: "支付失敗,原因?yàn)? " + e.errMsg,
            showCancel: false
        })
    },
    complete: () => {
        this.providerList[index].loading = false;
    }
})

微信有預(yù)下單，而支付寶不存在

支付寶支付流程
支付寶支付參考 https://docs.open.alipay.com/ 左邊支付欄目支付寶APP支付 https://docs.open.alipay.com/204/105297

簡(jiǎn)單流程：
第一步：獲取支付類(lèi)型，APPid，支付金額
第二步：發(fā)送給后臺(tái)，后臺(tái)針對(duì)支付寶請(qǐng)求參數(shù)說(shuō)明，組裝數(shù)據(jù)，返回訂單信息
第三步：拿到組裝單訂單信息，發(fā)起支付，調(diào)起支付APP
第四步：后臺(tái)驗(yàn)證支付結(jié)果

在這里插入圖片描述