微信小程序支付簡(jiǎn)單小結(jié)與梳理
前言
公司最近在做微信小程序，被分配到做支付這一塊，現(xiàn)在對(duì)這一塊做一個(gè)簡(jiǎn)單的總結(jié)和梳理。
支付，對(duì)于購(gòu)物來(lái)說(shuō)，可以說(shuō)是占據(jù)了十分重要的一塊，畢竟能收到錢(qián)才是重點(diǎn)。
當(dāng)然在開(kāi)發(fā)之前，我們需要有下面這些東西：
- appId
- 密鑰(小程序配置界面)
- 商戶(hù)號(hào)
- api密鑰(商家后臺(tái)自己設(shè)置)
當(dāng)然這些是不用我們自己申請(qǐng)的，公司會(huì)有人申請(qǐng)好，然后要什么跟這個(gè)人說(shuō)，讓他提供就可以了。
首先來(lái)看一下官方給出的業(yè)務(wù)流程時(shí)序圖
這個(gè)圖很清晰的表達(dá)了在小程序支付中的整個(gè)流程，每一步要做些什么。
一個(gè)完整的支付，一般情況下都是包含了下面三個(gè)主要的點(diǎn)；
- 支付(正常是支付平臺(tái)提供的h5頁(yè)面讓用戶(hù)操作，主要是輸密碼)
- 通知(用戶(hù)完成一筆支付了，支付平臺(tái)要通知商家支付結(jié)果，商家收到結(jié)果后進(jìn)行一些相應(yīng)的處理)
- 查詢(xún)(與第二點(diǎn)有點(diǎn)反過(guò)來(lái)的意思，商家自己主動(dòng)去支付平臺(tái)查詢(xún)支付的結(jié)果，然后根據(jù)結(jié)果做相應(yīng)的處理)
下面就重點(diǎn)來(lái)簡(jiǎn)單實(shí)現(xiàn)一下上面說(shuō)的第一點(diǎn)，支付，也是可以進(jìn)行下面兩步的在大前提。
支付的簡(jiǎn)單實(shí)現(xiàn)
小程序的實(shí)現(xiàn)
簡(jiǎn)單起見(jiàn)，在index.wxml中添加一個(gè)輸入框和一個(gè)button，綁定一下相應(yīng)的事件，輸入框主要是用于輸入訂單號(hào)，按鈕用于模擬提交一個(gè)訂單并發(fā)起支付。
<!--index.wxml-->
<view class="container">
<input type="text" bindinput="getOrderCode" style="border:1px solid #ccc;" />
<button bindtap="pay">立即支付</button>
</view>
|
然后在index.js中寫(xiě)上一小段代碼，主要是處理上面按鈕的點(diǎn)擊事件。
Page({
data: {
txtOrderCode: ''
},
pay: function () {
var ordercode = this.data.txtOrderCode;
wx.login({
success: function (res) {
if (res.code) {
wx.request({
url: 'https://www.yourdomain.com/pay',
data: {
code: res.code,//要去換取openid的登錄憑證
ordercode: ordercode
},
method: 'GET',
success: function (res) {
console.log(res.data)
wx.requestPayment({
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.package,
signType: 'MD5',
paySign: res.data.paySign,
success: function (res) {
// success
console.log(res);
},
fail: function (res) {
// fail
console.log(res);
},
complete: function (res) {
// complete
console.log(res);
}
})
}
})
} else {
console.log('獲取用戶(hù)登錄態(tài)失敗！' + res.errMsg)
}
}
});
},
getOrderCode: function (event) {
this.setData({
txtOrderCode: event.detail.value
});
}
})
|
可以看到，在這里Catcher先通過(guò)wx.login這個(gè)API先取到了登錄的憑證code，并把這個(gè)憑證code做為請(qǐng)求參數(shù)用wx.request這個(gè)API發(fā)起一個(gè)網(wǎng)絡(luò)請(qǐng)求。
在這個(gè)網(wǎng)絡(luò)請(qǐng)求處理后會(huì)返回小程序支付所需要的相關(guān)參數(shù)。拿到這些參數(shù)后，再調(diào)用wx.requestPayment這個(gè)支付API，此時(shí)才算是真正的發(fā)起支付。
至此，小程序這邊的事已經(jīng)做完了，接下來(lái)就是要去處理接口那邊的事了，其實(shí)接口要做的就是返回小程序需要的幾個(gè)參數(shù)。但是要拿到這幾個(gè)參數(shù)還是需要做不少事情的。
接口的實(shí)現(xiàn)
據(jù)悉最新版的Senparc.Weixin.MP已經(jīng)支付了小程序相關(guān)的內(nèi)容，但是公司用的版本還是比較低
并且近期也沒(méi)有打算對(duì)這個(gè)組件進(jìn)行升級(jí)。所以就從白紙一張開(kāi)始了。
