1. 程式人生 > >微信公眾號支付教程(前端部分)

微信公眾號支付教程(前端部分)

微信內H5發起支付一共有兩種方法:

    1.呼叫微信內建js物件 WeixinJSBridge 發起支付具體方法為

WeixinJSBridge.invoke(
       'getBrandWCPayRequest', {
           "appId":"APPID",     //公眾號名稱,由商戶傳入     
           "timeStamp":"1395712654",         //時間戳,自1970年以來的秒數     
           "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機串     
           "package":"prepay_id=u802345jgfjsdfgsdg888",     
           "signType":"MD5",         //微信簽名方式:     
           "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 
       },
       function(res){     
           if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判斷前端返回,微信團隊鄭重提示:res.err_msg將在使用者支付成功後返回    ok,但並不保證它絕對可靠。 
       }
   ); 

這樣就能發起支付了。

另一種方法比較麻煩,就是引入微信jssdk呼叫裡面的內建方法發起支付

引入jssdk檔案後還需要注入許可權也就是許可權驗證

wx.config({
    debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來,若要檢視傳入的引數,可以在pc端開啟,引數資訊會通過log打出,僅在pc端時才會列印。
    appId: '', // 必填,企業號的唯一標識,此處填寫企業號corpid
    timestamp: , // 必填,生成簽名的時間戳
    nonceStr: '', // 必填,生成簽名的隨機串
    signature: '',// 必填,簽名,見附錄1
    jsApiList: [] // 必填,需要使用的JS介面列表,所有JS介面列表見附錄2
});

簽名的相關引數需要由後臺生成。在最後一個數組裡面填入你所需要的介面名

通過相應的api驗證許可權是否注入成功

wx.ready(function(){
    // config資訊驗證後會執行ready方法,所有介面呼叫都必須在config介面獲得結果之後,config是一個客戶端的非同步操作,所以如果需要在頁面載入時就呼叫相關介面,則須把相關介面放在ready函式中呼叫來確保正確執行。對於使用者觸發時才呼叫的介面,則可以直接呼叫,不需要放在ready函式中。
});

驗證成功後jssdk裡面的API介面就能夠呼叫了,裡面有支付相關的介面

wx.chooseWXPay({  
                            appId: 'APPID',  
                            timestamp: '1461300911', // 支付簽名時間戳,注意微信jssdk中的所有使用timestamp欄位均為小寫。但最新版的支付後臺生成簽名使用的timeStamp欄位名需大寫其中的S字元  
                            nonceStr: '5719aeafb587f', // 支付簽名隨機串,不長於 32 位  
                            package: 'prepay_id=wx20160422125512b7d2205c9c0913643939', // 統一支付介面返回的prepay_id引數值,提交格式如:prepay_id=***)  
                            signType: 'MD5', // 簽名方式,預設為'SHA1',使用新版支付需傳入'MD5'  
                            paySign: '5DAB1DDABE1AD34E8FF3386AE971B727', // 支付簽名  
                            success: function(res) {  
                                // 支付成功後的回撥函式  
                                if (res.errMsg == "chooseWXPay:ok") {  
                                    //支付成功  
                                    alert('支付成功');  
                                } else {  
                                    alert(res.errMsg);  
                                }  
                            },  
                            cancel: function(res) {  
                                //支付取消  
                                alert('支付取消');  
                            }  
                        });