今天來說說,微信公衆号支付。本人剛做完微信公衆号支付項目，是以想趁熱打鐵趕緊溫習一下，若有覺得不對的地方，大家可以指出，我們共同學習。
前言：公衆号支付是使用者在微信中打開商戶的H5頁面，商戶在H5頁面通過調用微信支付提供的JSAPI接口調起微信支付子產品完成支付。前期準備要想在微信公衆号上完成支付就要有着兩個賬号：（1）已認證微信公衆的服務号,而且開通微信支付功能（2）微信商戶平台賬号。兩個賬号可能都需要是企業版，因為有不少資訊需要備案之類的。（要把兩個賬号密碼記好哦 !）
參考連結 ： 微信開發文檔
一、微信公衆号支付參數
公衆号的APPID： 例 wxeq*********09
APPSECEPT : c241***************769c2
商戶ID (MchID) ：15******01
API密鑰：test************2019(API密鑰在商戶平台的賬戶中心下:需要使用者自行下載下傳證書及安裝)。
二、基本配置
請確定實際支付時的請求目錄與背景配置的目錄一緻
在微信商戶平台（pay.weixin.qq.com）設定您的JSAPI支付支付目錄，設定路徑：商戶平台-->産品中心-->開發配置，如圖7.7所示。JSAPI支付在請求支付的時候會校驗請求來源是否有在商戶平台做了配置，是以必須確定支付目錄已經正确的被配置，否則将驗證失敗，請求支付不成功。
設定授權域名
開發JSAPI支付時，在統一下單接口中要求必傳使用者openid，而擷取openid則需要您在公衆平台設定擷取openid的域名，隻有被設定過的域名才是一個有效的擷取openid的域名，否則将擷取失敗
三、流程
點選支付按鈕 =>
1、發起背景請求(請求參數 例:支付金額、支付類型、說明等 ) =>
2、背景生成商戶訂單、調用微信統一下單API() 并傳回前端支付所需參數 params =>
3、前端收到背景給的參數 params 包含appId、timeStamp、nonceStr等。調用JSAPI接口請求支付（此過程是前端與微信交 互） =>
4、前端根據微信傳回的支付結果做出提示，微信會将支付結果通知背景
5、前端向背景發起請求 判斷是否支付成功
下面的代碼 是我收到 params 參數開始的
params 參數 (appId、timeStamp、nonceStr、package、signType，參數區分大小寫。）
if (typeof window.WeixinJSBridge === 'undefined') {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', function () { onBridgeReady(params)
}, false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', function () { onBridgeReady(params) })
document.attachEvent('onWeixinJSBridgeReady', function () { onBridgeReady(params) })
}
} else {
onBridgeReady(params)
}
onBridgeReady(obj) {
let that = this
let parmas = obj
window.WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: parmas.appId, // 公衆号名稱，由商戶傳入
timeStamp: parmas.timeStamp, // 時間戳，自1970年以來的秒數
nonceStr: parmas.nonceStr, // 随機串
package: parmas.package,
signType: parmas.signType, // 微信簽名方式：
paySign: parmas.paySign // 微信簽名
},
function(res) {
if(res.err_msg=="get_brand_wcpay_request:fail"){
that.$weui.dialog({
title: "提示",
content: "支付失敗",
buttons: [
{
label: "确定",
type: "primary"
}
]
});
//支付失敗 通知伺服器端
ajaxSubmit(that.$http,payFail,"POST",
{dealRecordId:that.dealRecordId},resData => {
});
}else if(res.err_msg=="get_brand_wcpay_request:cancel"){
that.$weui.dialog({
title: "提示",
content: "取消支付",
buttons: [
{
label: "确定",
type: "primary"
}
]
});
//支付取消 通知伺服器端
ajaxSubmit(that.$http,payFail,"POST",
{dealRecordId:that.dealRecordId},resData => {
});
}else if(res.err_msg == "get_brand_wcpay_request:ok") {
//支付成功
//檢視服務端該訂單是否支付成功 支付結果以背景為準
ajaxSubmit(that.$http,payInquire,"get",
{dealRecordId:that.dealRecordId},resData => {
let user = JSON.parse(localStorage.getItem("userInfo"));
if(resData.result== 0){
user.userInfo.memberStartTime = resData.data.memberStartTime
user.userInfo.memberEndTime = resData.data.memberEndTime
user.userInfo.memberGrade = that.goodsName
user.isPayFlag = true
localStorage.setItem('userInfo',JSON.stringify(user))
that.$router.push({ path: "/mine"})
}else if(resData.result== 1){
that.$weui.dialog({
title: "提示",
content: "支付失敗,請稍後重試",
buttons: [
{
label: "确定",
type: "primary"
}
]
});
}else{
that.$weui.dialog({
title: "提示",
content: "程式異常",
buttons: [
{
label: "确定",
type: "primary"
}
]
});
}
});
}else{
that.$weui.dialog({
title: "提示",
content: "支付失敗",
buttons: [
{
label: "确定",
type: "primary"
}
]
});
ajaxSubmit(that.$http,payFail,"POST",
{dealRecordId:that.dealRecordId},resData => {
});
}
);
},
四、總結可能會遇到的坑
（1)、目前頁面的 url 未注冊
解決方法： 如果你的支付位址是： http://xxx.com/Wechat/Pay/Index/pay.html
那麼你的支付授權目錄應該添加為 http://xxx.com/Wechat/Pay/Index/（要以 / 結尾）
(2)、chooseWXPay:fail, the permission value is offline verifying
原因：這是因為微信開發者工具裡面沒有錢包的功能，需要真機測試支付。
（3)、下單賬戶與支付賬戶不一緻
需要背景檢視 openId 配置