微信小程序充值頁(yè)面及小程序支付后回調(diào)如何實(shí)現(xiàn)
2020-09-27|HiShop
導(dǎo)讀:小程序充值頁(yè)面與 H5 或 公眾號(hào)大致差不多,這里簡(jiǎn)單說一下前端在充值時(shí)候的一些操作流程。 用戶在小程序中發(fā)起充值請(qǐng)求時(shí),一般會(huì)先請(qǐng)求自己的服務(wù)器,將充值的參數(shù)發(fā)送...
微信小程序的充值流程與 H5 或 公眾號(hào)大致差不多,這里簡(jiǎn)單說一下前端在充值時(shí)候的一些操作流程。
用戶在小程序中發(fā)起充值請(qǐng)求時(shí),一般會(huì)先請(qǐng)求自己的服務(wù)器,將充值的參數(shù)發(fā)送給后端,然后后端會(huì)去請(qǐng)求微信充值,得到微信返回的統(tǒng)一下單的參數(shù)再返回給前端。前端調(diào)用
wx.requestPayment API 即可喚起微信小程序的支付頁(yè)面,此時(shí)用戶輸入正確的支付密碼即可支付成功。具體流程如下:
1. 比如說頁(yè)面上有一個(gè)充值按鈕,點(diǎn)擊充值按鈕時(shí)可以獲取到用戶請(qǐng)求充值的參數(shù)?! ?/h2>
wx.request({
url: "后端的充值接口",
method: "POST",
dataType: "json",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
amount: amount, // 充值金額
token: token,
openId: openId
},
success: function (res) {
if (res.data.code == '1') {
that.setData({
payParams: res.data.data // 后端從微信得到的統(tǒng)一下單的參數(shù)
})
that.xcxPay(); // 拿到統(tǒng)一下單的參數(shù)后喚起微信支付頁(yè)面
}
}
})
2. 調(diào)用 wx.requestPayment 喚起微信支付界面。
wx.request({
url: "后端的充值接口",
method: "POST",
dataType: "json",
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
amount: amount, // 充值金額
token: token,
openId: openId
},
success: function (res) {
if (res.data.code == '1') {
that.setData({
payParams: res.data.data // 后端從微信得到的統(tǒng)一下單的參數(shù)
})
that.xcxPay(); // 拿到統(tǒng)一下單的參數(shù)后喚起微信支付頁(yè)面
}
}
})
wx.requestPayment({
'timeStamp': that.data.payParams.timestamp.toString(), // 時(shí)間戳必須是字符串,否則會(huì)報(bào)錯(cuò)
'nonceStr': that.data.payParams.str,
'package': 'prepay_id=' + that.data.payParams.prepay_id, // 這里的值必須是 prepay_id=XXXXXXXXX 的格式,否則也會(huì)報(bào)錯(cuò)
'signType': 'MD5',
'paySign': that.data.payParams.sign,
'success': function (res) {
// 這里應(yīng)該是 res.errMsg , 跟公眾號(hào)的支付返回的參數(shù)不一樣,公眾號(hào)是 err_msg, 就因?yàn)闆]注意到這個(gè),折騰了很長(zhǎng)時(shí)間
if(res.errMsg == "requestPayment:ok"){ // 調(diào)用支付成功
wx.redirectTo({
url: '../chargelist/chargelist' // 充值成功后的處理,可以跳轉(zhuǎn),也可以根據(jù)自己的需要做其他處理
})
}else if(res.errMsg == 'requestPayment:cancel'){
// 用戶取消支付的操作
}
},
'fail': function (res) {
return false;
},
'complete': function (res) { }
})
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。
更多小程序資訊,盡在:zytcm.com.cn/xiaocx/
您可能感興趣:小程序支付