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

三、前端调用参数不要传多余的，大小写要注意