微信小程序支付功能完整流程記錄(前端)
微信小程序中，常見付款給商家的場景，下面列出企業(yè)小程序中，從0起步完整微信支付流程。
一，注冊微信支付商戶號（由上級或法人注冊）
此商戶號，需要由主管及更上級領(lǐng)導(dǎo)進(jìn)行注冊，會成為公司收款賬戶（不是由前端程序員注冊?。?！不是由前端程序員注冊?。。〔皇怯汕岸顺绦騿T注冊?。。。?/p>
注冊非常簡單，重點是需要提供企業(yè)資料，一般程序員沒有權(quán)限獲取這些材料，所以需要由上級注冊
企業(yè)注冊需要材料：營業(yè)執(zhí)照，對公銀行賬戶信息，法人身份證
二，注冊小程序賬號(由上級或者領(lǐng)導(dǎo)注冊)
注冊流程簡單，企業(yè)一般注冊為企業(yè)小程序，非個人，需要上傳營業(yè)執(zhí)照等。
三，登錄商戶號綁定小程序
登錄之前注冊好的商戶賬號，將當(dāng)前小程序ID綁定至此商戶，表明此小程序可以調(diào)用此商戶支付相關(guān)接口。
微信支付 - 中國領(lǐng)先的第三方支付平臺 ｜ 微信支付提供安全快捷的支付方式
四，后端工程師書寫接口
返回核心數(shù)據(jù)如下：
"appId":?"xxxx", ????????"nonceStr":?"xxxx", ????????"packageValue":?"prepay_id=xxxxx", ????????"paySign":?"xxxxxx", ????????"signType":?"MD5", ????????"timeStamp":?"xxxxxx"
這個接口是你們公司后端程序員自己寫的接口，由后端工程師書寫，JAVA，PHP，C++，NODE，.NET等...不是前端寫！不是前端寫！不是前端寫！如果沒有此接口就與后端工程師溝通，讓他書寫。
五，前端工程師調(diào)用接口
1. 獲取openid（當(dāng)前用戶真實id）
openid為當(dāng)前用戶真實id，無法直接用任何接口獲得，需要先調(diào)用微信login接口登錄，獲取登錄憑證code，在通過此code（登錄憑證，5分鐘有效），向微信服務(wù)器換取用戶openid。
原生小程序登錄：
wx.login({
success (res) {
if (res.code) {
// code: 用戶登錄憑證（有效期五分鐘）
// 使用 code 可以換取 openid、unionid、session_key 等核心信息
} else {
console.log('登錄失?。? + res.errMsg)
}
}
})uniapp登錄：
uni.login({
provider: 'weixin',
success (res) {
if (res.code) {
//code: 用戶登錄憑證（有效期五分鐘）
//使用 code 可以換取 openid、unionid、session_key 等核心信息
} else {
console.log('登錄失??！' + res.errMsg)
}
}
})發(fā)送請求調(diào)用微信官方接口，用code憑證換取用戶openid（真實用戶id）
原生小程序：wx.request uniapp: uni.request， 流程無差別
uni.request({
url: `https://api.weixin.qq.com/sns/jscode2session`, //微信官方接口
data: {
appid: '小程序appId',
secret: '小程序密鑰，在小程序appId下一行，放一塊在',
js_code: '剛才獲取的code',
grant_type: 'authorization_code' //固定值
},
success: (res) => {
//獲取openid：用戶真實唯一id
console.log(res.data.openid);
}
})2. 調(diào)用公司后端接口，獲取支付核心數(shù)據(jù)
// 調(diào)用后端接口
uni.request({
url: '你們公司的后端接口地址,獲取支付核心數(shù)據(jù)',
method: 'POST',
data: { 接口需要什么參數(shù)就傳給接口,包含扣款金額,訂單id等 },
success(obj) {
console.log(obj)
}
})此接口必須返回以下6個核心數(shù)據(jù),都是由后臺計算生成。
"appId":?"xxxx", ????????"nonceStr":?"xxxx", ????????"packageValue":?"prepay_id=xxxxx", ????????"paySign":?"xxxxxx", ????????"signType":?"MD5", ????????"timeStamp":?"xxxxxx"
3. 調(diào)用微信官方支付接口，彈出支付界面
uni.request({
url: '你們公司的后端接口地址,獲取支付核心數(shù)據(jù)',
method: 'POST',
data: { 接口需要什么參數(shù)就傳給接口,包含扣款金額,訂單id等 },
success(obj) {
//調(diào)用微信官方支付接口彈出付款界面,輸入密碼扣款
wx.requestPayment({
timeStamp: obj.xxxx.timeStamp, //后端返回的時間戳
nonceStr: obj.xxxx.nonceStr, //后端返回的隨機字符串
package: obj.xxxx.packageValue, //后端返回的prepay_id
signType: 'MD5', //后端簽名算法,根據(jù)后端來,后端MD5這里即為MD5
paySign: obj.xxxx.paySign, //后端返回的簽名
success (res) {
console.log('用戶支付扣款成功', res)
},
fail (res) {
console.log('用戶支付扣款失敗', res)
}
})
}
})調(diào)用后，彈出付款界面，模擬器需要掃碼支付。
點擊真機調(diào)試會直接彈出微信付款界面。
六，總結(jié)
- 前端調(diào)用uni.login/wx.login調(diào)用微信接口，獲取code，code相當(dāng)于臨時身份證
- 前端調(diào)公司后臺獲取openid的接口，獲取openid
- 前端調(diào)公司后臺預(yù)支付接口，傳遞openid、商品id、商品單價、商品數(shù)量，獲取那5個參數(shù)?！緯r間戳timeStamp，隨機字符串nonceStr，預(yù)支付id package，簽名算法signType，簽名paySign】
- 前端調(diào)用uni/wx.requestPayment調(diào)用微信支付方法，傳遞5個參數(shù)，獲取支付結(jié)果（成功或失?。?/li>
到此這篇關(guān)于微信小程序支付功能完整流程的文章就介紹到這了,更多相關(guān)微信小程序支付流程內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript之瀏覽器對象_動力節(jié)點Java學(xué)院整理
JavaScript可以獲取瀏覽器提供的很多對象，并進(jìn)行操作。下面通過本文給大家介紹JavaScript之瀏覽器對象的相關(guān)知識，一起看看吧2017-07-07
jQuery和JavaScript節(jié)點插入元素的方法對比
本文主要介紹jQuery與JavaScript節(jié)點的插入方法，以及他們的具體代碼實現(xiàn)方法，大家可以對比下他們之間的不同，希望對大家編寫代碼有所幫助2016-11-11
這篇文章主要介紹了javascript遇到html5的一些表單屬性的相關(guān)資料,需要的朋友可以參考下2015-07-07
最近使用uniapp做了個APP,由于客戶是巴西的,所以使用中文已經(jīng)滿足不了客戶需求了,本打算直接使用英文開發(fā)算了,老板非要做成可以中英文切換的,沒辦法只能開干,需要的朋友可以參考下2023-11-11
JavaScript正則表達(dá)式和級聯(lián)效果
正則表達(dá)式（regular expression）是一種字符串匹配的模式，用來檢查一個字符串中是否包含指定模式的字符串。下面通過本文給大家分享JavaScript_正則表達(dá)式和級聯(lián)效果，感興趣的朋友一起看看吧2017-09-09
setTimeout的參數(shù)傳遞問題想必大家有所糾結(jié)，window.settimeout()方法要調(diào)用帶參數(shù)的函數(shù)有兩種方法，下面為大家詳細(xì)介紹下，感興趣的朋友可以參考下2013-08-08
JavaScript中undefined和is?not?defined的區(qū)別與異常處理
這篇文章主要給大家介紹了關(guān)于JavaScript中undefined和is?not?defined的區(qū)別與異常處理的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細(xì)介紹了laydate時間日歷插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了如何讓每個Http請求都自動帶上token問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本文通過實例代碼給大家介紹了JS點擊拉拽輪播圖pc端移動端適配 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09