微信小程序調(diào)用支付接口的完整流程記錄
官方的文檔路徑------》文檔路徑:developers.weixin.qq.com/miniprogram…
當(dāng)然在開發(fā)之前,我們需要有下面這些東西:
- appId(小程序分配)
- 小程序密鑰(小程序配置界面獲取)
- 商戶號
- api密鑰(商家后臺自己設(shè)置)
首先我們要知道把大象放進冰箱攏共需要三步(不是),那么我們調(diào)起支付也是一樣的
步驟如下:
wx.login獲取用戶臨時登錄憑證code,發(fā)送到后端服務(wù)器換取openId
在下單時,小程序需要將商品Id,商品數(shù)量,以及openId傳送到服務(wù)器
服務(wù)器在接收到商品Id、商品數(shù)量、openId后,生成服務(wù)期訂單數(shù)據(jù),同時經(jīng)過一定的簽名算法,向微信支付發(fā)送請求,獲取預(yù)付單信息(prepay_id),同時將獲取的數(shù)據(jù)再次進行相應(yīng)規(guī)則的簽名,向小程序端響應(yīng)必要的信息(必須字段信息將在下文進行詳細(xì)說明)
小程序端在獲取對應(yīng)的參數(shù)后,調(diào)用wx.requestPayment()發(fā)起微信支付,喚醒支付工作臺,進行支付
1.通過wx.login拿到code,然后請求接口從后臺拿去openId
login() {
var that=this
wx.login({
success(res) {
console.log(res)
wx.request({ url: '',
data: { code: res.code } })
},
})2.在調(diào)起微信支付前需要保證接收到所有我們要傳遞的值, 在這里是openId,和支付金額。openId以及相應(yīng)需要的商品信息發(fā)送到后端,換取服務(wù)端的prepay_id
let {
money,
openId
} = this.data
let token = wx.getStorageSync('user_token')
let openList = await request('/接口', {
...需要給后端的字段
openid: openId
})
this.setData({
prepay_id: openList.data.prepay_id
})接下來我們就可以寫一版調(diào)起微信支付接口的數(shù)據(jù)
let random = (Math.random()).toString() //這個隨機數(shù)一定要變成字符串
let timestamp = (new Date().getTime()).toString() //時間戳一定要是字符串
let mch_key = 'FVmZcEmubX817JRKHmWo1vaVHzte2Oha'
let obj = {
appId: 'wxb9811d3b2e3de44c',
nonceStr: random,
package: "prepay_id=" + this.data.prepay_id,
signType: 'MD5',
timeStamp: timestamp
}
//參數(shù)名ASCII碼從小到大排序(字典序)
let arr = Object.keys(obj).sort().map(item => {
return `${item}=${obj[item]}`;
});
//最后拼接上key(商戶密鑰)得到字符串
let str = arr.join('&') + '&key=' + mch_key;
console.log(str);
//對str進行MD5運算,再將得到的字符串所有字符轉(zhuǎn)換為大寫
let paySign = md5.hexMD5(str).toUpperCase()
wx.requestPayment({
"timeStamp": timestamp,
"nonceStr": random,
"package": "prepay_id=" + this.data.prepay_id,
"signType": "MD5",
"paySign": paySign,
"success": function (res) {
console.log('成功了');
},
"fail": function (res) {
console.log(res);
if (res.errMsg === 'requestPayment:fail cancel') {
wx.showToast({
title: '用戶取消支付',
icon: 'none',
duration: 2000
})
} else {
wx.showToast({
title: res.errMsg,
icon: 'none',
duration: 2000
})
}
},
})注意:以上信息中timeStamp、nonceStr、prepay_id、signType、paySign各參數(shù)均建議必須都由服務(wù)端返回(這樣會盡最大可能性保證簽名數(shù)據(jù)一致性),小程序端不做任何處理。大家改一下接口和傳遞的參數(shù)就可以啦,這已經(jīng)是模板 可以直接用!
總結(jié)
到此這篇關(guān)于微信小程序調(diào)用支付接口的文章就介紹到這了,更多相關(guān)微信小程序調(diào)用支付接口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 微信小程序 wx.request(接口調(diào)用方式)詳解及實例
- 微信小程序調(diào)用攝像頭隱藏式拍照功能
- 微信小程序頁面調(diào)用自定義組件內(nèi)的事件詳解
- 微信小程序如何調(diào)用json數(shù)據(jù)接口并解析
- 微信小程序調(diào)用攝像頭實現(xiàn)拍照功能
- 微信小程序調(diào)用微信登陸獲取openid及java做為服務(wù)端示例
- 使用微信小程序API,調(diào)用微信的各種內(nèi)置能力。
- 微信小程序頁面與組件之間信息傳遞與函數(shù)調(diào)用
- 微信小程序開發(fā)打開另一個小程序的實現(xiàn)方法
- 微信外喚起微信小程序的方法詳解
相關(guān)文章
JavaScript函數(shù)參數(shù)使用帶參數(shù)名的方式賦值傳入的方法
這篇文章主要介紹了JavaScript函數(shù)參數(shù)使用帶參數(shù)名的方式賦值傳入的方法,實例分析了javascript函數(shù)傳遞參數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
腳本吧 - 幻宇工作室用到j(luò)s,超強推薦expand.js
腳本吧 - 幻宇工作室用到j(luò)s,超強推薦expand.js...2006-12-12
JavaScript 中的輸出數(shù)據(jù)多種方式
在 JavaScript 中,不像 Java 等語言,它沒有任何打印或者輸出方法的,在js中通過使用4種方式來輸出數(shù)據(jù),本文通過實例代碼給大家詳細(xì)介紹,感興趣的朋友跟隨小編一起看看吧2022-03-03
帶有定位當(dāng)前位置的百度地圖前端web api實例代碼
這篇文章主要介紹了帶有定位當(dāng)前位置的百度地圖前端web api實例代碼 的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06
javascript和jquery中cookie的設(shè)置方法
Cookie 是瀏覽器訪問服務(wù)器后,服務(wù)器傳給瀏覽器的一段數(shù)據(jù)。瀏覽器需要保存這段數(shù)據(jù),不會輕易刪除(保存在計算機中)。此后每次瀏覽器訪問該服務(wù)器,都必須帶上這段數(shù)據(jù)。這篇文章主要介紹了javascript和jquery中cookie的設(shè)置方法2023-07-07

