微信小程序支付功能完整流程記錄(前端)
微信小程序中，常見付款給商家的場景，下面列出企業(yè)小程序中，從0起步完整微信支付流程。
一，注冊微信支付商戶號（由上級或法人注冊）
此商戶號，需要由主管及更上級領(lǐng)導(dǎo)進(jìn)行注冊，會(huì)成為公司收款賬戶（不是由前端程序員注冊?。?！不是由前端程序員注冊?。?！不是由前端程序員注冊！?。。?/p>
注冊非常簡單，重點(diǎn)是需要提供企業(yè)資料，一般程序員沒有權(quán)限獲取這些材料，所以需要由上級注冊
企業(yè)注冊需要材料：營業(yè)執(zhí)照，對公銀行賬戶信息，法人身份證
二，注冊小程序賬號(由上級或者領(lǐng)導(dǎo)注冊)
注冊流程簡單，企業(yè)一般注冊為企業(yè)小程序，非個(gè)人，需要上傳營業(yè)執(zhí)照等。
三，登錄商戶號綁定小程序
登錄之前注冊好的商戶賬號，將當(dāng)前小程序ID綁定至此商戶，表明此小程序可以調(diào)用此商戶支付相關(guān)接口。
微信支付 - 中國領(lǐng)先的第三方支付平臺(tái) ｜ 微信支付提供安全快捷的支付方式
四，后端工程師書寫接口
返回核心數(shù)據(jù)如下：
"appId":?"xxxx", ????????"nonceStr":?"xxxx", ????????"packageValue":?"prepay_id=xxxxx", ????????"paySign":?"xxxxxx", ????????"signType":?"MD5", ????????"timeStamp":?"xxxxxx"
這個(gè)接口是你們公司后端程序員自己寫的接口，由后端工程師書寫，JAVA，PHP，C++，NODE，.NET等...不是前端寫！不是前端寫！不是前端寫！如果沒有此接口就與后端工程師溝通，讓他書寫。
五，前端工程師調(diào)用接口
1. 獲取openid（當(dāng)前用戶真實(shí)id）
openid為當(dāng)前用戶真實(shí)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（真實(shí)用戶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：用戶真實(shí)唯一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個(gè)核心數(shù)據(jù),都是由后臺(tái)計(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, //后端返回的時(shí)間戳
nonceStr: obj.xxxx.nonceStr, //后端返回的隨機(jī)字符串
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ǎn)擊真機(jī)調(diào)試會(huì)直接彈出微信付款界面。
六，總結(jié)
- 前端調(diào)用uni.login/wx.login調(diào)用微信接口，獲取code，code相當(dāng)于臨時(shí)身份證
- 前端調(diào)公司后臺(tái)獲取openid的接口，獲取openid
- 前端調(diào)公司后臺(tái)預(yù)支付接口，傳遞openid、商品id、商品單價(jià)、商品數(shù)量，獲取那5個(gè)參數(shù)?！緯r(shí)間戳timeStamp，隨機(jī)字符串nonceStr，預(yù)支付id package，簽名算法signType，簽名paySign】
- 前端調(diào)用uni/wx.requestPayment調(diào)用微信支付方法，傳遞5個(gè)參數(shù)，獲取支付結(jié)果（成功或失敗）
到此這篇關(guān)于微信小程序支付功能完整流程的文章就介紹到這了,更多相關(guān)微信小程序支付流程內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript創(chuàng)建一個(gè)object對象并操作對象屬性的用法
這篇文章主要介紹了JavaScript創(chuàng)建一個(gè)object對象并操作對象屬性的用法,實(shí)例分析了javascript使用object類定義對象及屬性的用法,需要的朋友可以參考下2015-03-03
TypeScript(簡稱 TS)和JavaScript(簡稱 JS)都是用于編寫Web應(yīng)用程序的語言,下面這篇文章主要給大家介紹了關(guān)于JS與TS的主要區(qū)別,需要的朋友可以參考下2024-03-03
JavaScript實(shí)現(xiàn)QQ列表展開收縮擴(kuò)展功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)QQ列表展開收縮擴(kuò)展功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
javascript 鼠標(biāo)拖動(dòng)圖標(biāo)技術(shù)
剛剛學(xué)習(xí)了個(gè)js的小技術(shù)，還蠻好玩的，以后會(huì)把做的一些小例子貼上來，方便自己也可以跟大家一起分享學(xué)習(xí)成果，哈哈~~2010-02-02
這篇文章主要介紹了原生javascript實(shí)現(xiàn)隔行換色,需要的朋友可以參考下2015-01-01
JS實(shí)現(xiàn)的新浪微博大廳文字內(nèi)容滾動(dòng)效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的新浪微博大廳文字內(nèi)容滾動(dòng)效果代碼,可實(shí)現(xiàn)頁面圖文元素定時(shí)滾動(dòng)的效果,涉及JavaScript時(shí)間函數(shù)定時(shí)改變頁面元素的相關(guān)技巧,需要的朋友可以參考下2015-11-11
基于JS實(shí)現(xiàn)帶并發(fā)限制的異步調(diào)度器
這篇文章主要為大家詳細(xì)介紹了如何基于JS實(shí)現(xiàn)帶并發(fā)限制的異步調(diào)度器，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，需要的可以參考下2023-05-05
本文主要對JavaScript常量定義進(jìn)行詳細(xì)介紹，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
javascript兩種function的定義介紹及區(qū)別說明
javascript兩種function的定義方式function a(){}和a=function(){}具體使用如下，感興趣的朋友可以參考下，希望對你對你學(xué)習(xí)function的定義有所幫助2013-05-05
下面小編就為大家?guī)硪黄鉀Qie img標(biāo)簽內(nèi)存泄漏的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10