H5調微信支付

微信支付接口，

最近公衆號須要添加支付功能，一個作前端開發的，好簡單，只是調用支付接口就能夠了，其餘無論，想起來多簡單，但是真的最後開發的時候，各類蛋疼的問題迎面而來；

從調試來看，這周遇到的狀況跟你們分享下，若是大家遇到另外的問題以及如何解決，但願能夠留言，幫助其餘開發人員，

後臺服務器要和微信端下單 ，接口和返回參數見微信api

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

此時下單客戶端調用後臺接口，返回給你的參數你須要的只有

6-7個而已 下面是copy微信的

公衆號   id	appId	是	String(16)	wx8888888888888888	商戶註冊具備支付權限的公衆號成功後便可得到
時間戳	timeStamp	是	String(32)	1414561699	當前的時間，其餘詳見時間戳規則
隨機字符串	nonceStr	是	String(32)	5K8264ILTKCH16CQ2502SI8ZNMTM67VS	隨機字符串，不長於32位。推薦隨機數生成算法
訂單詳情擴展字符串	package	是	String(128)	prepay_id=123456789	統一下單接口返回的prepay_id參數值，提交格式如：prepay_id=***
簽名方式	signType	是	String(32)	MD5	簽名算法，暫支持MD5
簽名	paySign	是	String(64)	C380BEC2BFD727A4B6845133519F3AD6	簽名，詳見簽名生成算法

 

注意參數必定要對應大小寫區分嚴重，不然坑深，

v2寫法：

#coffeescript    調用@weChatPay()

weChatPay: ->
    if typeof WeixinJSBridge == 'undefined'
        if document.addEventListener
            document.addEventListener 'WeixinJSBridgeReady', @onBridgeReady(), false
        else if document.attachEvent
            document.attachEvent 'WeixinJSBridgeReady', @onBridgeReady()
            document.attachEvent 'onWeixinJSBridgeReady', @onBridgeReady()
    else
        @onBridgeReady()
onBridgeReady: ->
    WeixinJSBridge.invoke('getBrandWCPayRequest',{
                "appId" : @wcOpts.appId,     #公衆號名稱，由商戶傳入
                "timeStamp": @wcOpts.timeStamp,         #時間戳，自1970年以來的秒數
                "nonceStr" : @wcOpts.nonceStr, #隨機串
                "package" : @wcOpts.package,
                "signType" : @wcOpts.signType,         #微信簽名方式：
                "paySign": @wcOpts.paySign #微信簽名
            },(res) =>
                if res.err_msg == "get_brand_wcpay_request：ok"       #三個狀態get_brand_wcpay_request：ok支付成功 get_brand_wcpay_request：fail 支付失敗get_brand_wcpay_request：cancel用戶取消
                    @queryOrder()#查詢訂單
                else
                    window.location.reload()
    )

v3支付須要在config配置裏添加chooseWXPay

ready以後調用 #JavaScript 寫法 

 

wx.chooseWXPay({
    timestamp: 0, // 支付簽名時間戳，注意微信jssdk中的全部使用timestamp字段均爲小寫。但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符
    nonceStr: '', // 支付簽名隨機串，不長於 32 位
    package: '', // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=***）
    signType: '', // 簽名方式，默認爲'SHA1'，使用新版支付需傳入'MD5'
    paySign: '', // 支付簽名
    success: function (res) {
        // success
    },
  cancel:function(res){
        //cancel
  }
});

成功的前提是

一、後臺給的參數是否正確，尤爲是paySign和package ，不正確會出現支付loading閃下消失，沒任何提示。

二、公衆號是否配置了支付受權目錄，若調用測試受權目錄必定要微信號加入白名單，不然直接閃下loading 而後  get_brand_wcpay_request：fail

三、前端調用參數不要傳多餘的，大小寫要注意