一、背景

公众号网页对接微信支付，因为该网页会在多端打开，所以需对接H5支付，Native支付以及JSAPI支付，下文将讲述对接过程以及遇到的问题。

二、H5支付

H5支付是指商户在微信客户端外的移动端网页展示商品或服务，用户在前述页面确认使用微信支付时，商户发起本服务呼起微信客户端进行支付。主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器唤起微信支付。文档地址

当我们的网页在除微信以外的浏览器中打开（移动端）时，需要使用H5支付，该方式的本质是后端在微信服务端下单，然后微信会给我们一个url，该url指向微信的一个支付校验的地址，当前端重定向到这个地址之后，如果校验通过，该网页会以deeplink的方式唤起微信收银台。

所以，这里的工作基本都在后端，这里讲一下前端需要注意的地方：

• 1. h5支付回调。我们可以在商户中心配置h5支付的回调地址，值得注意的是无论deeplink是否成功唤起收银台，我们的网页都会被重定向到这个地址；
• 2. deeplink安全性。有些手机浏览器会默认拦截deeplink，提示用户有风险，有的浏览器甚至直接屏蔽并且不通知用户（我记得是华为p30）；
• 3. 结果查询的时间节点问题。因为前端查询支付结果是向我们自己的后台查询，从微信服务端通知微信支付成功到通知我方后台中间可能存在一定的时间差，所以如果我们做自动查询的话，一般会页面显示5秒后再进行查询，并且可以查询多次。

三、JSAPI支付

商户已有H5商城网站，用户通过消息或扫描二维码在微信内打开网页时，可以调用微信支付完成下单购买的流程。文档地址

当我们的网页在微信中打开时，我们可以调用JSAPI支付，当然前提还是移动端。因为是直接调桥和微信通信，所以非常方便也非常快，并且在回调中能拿到更多的信息，有利于后续操作。

前端需要做的工作如下：

• 1. 调用下单接口，拿到订单信息；
• 2. 调用JSBridge，把拿到的信息按照要求传入；
• 3. 处理支付回调；

这里需要注意的是：

• 1. 支付前需检查用户的微信版本，请参考官方文档；
• 2. 我们遇到最多的问题一般是签名失败，解决办法请参考微信开放社区，值得注意的是，这里后端出现问题的概率很大，比如我们这次遇到的签名失败是因为后端计算签名的时候使用了错误的参数，所以当签名失败时一定要按照步骤一步一步排查。
• 3. 不要完全信任微信微信客户端传给回调的支付结果，具体结果应当以我们自己的后台返回结果为准。
     示例代码：

/**
 * 唤起微信支付
 * @param {Object} payInfo - 支付信息
 */
function handelPay(payInfo) {
    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 {
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                "appId": payInfo.appId, //公众号名称，由商户传入     
                "timeStamp": payInfo.timeStamp, //时间戳，自1970年以来的秒数     
                "nonceStr": payInfo.nonceStr, //随机串     
                "package": payInfo.packages, //prepay_id=xxx
                "signType": payInfo.signType, //微信签名方式   
                "paySign": payInfo.paySign //微信签名 
            },
            function (res){
                switch (res.err_msg) {
                    case 'get_brand_wcpay_request:ok':
                        // TODO: 支付成功
                        break;
                    case 'get_brand_wcpay_request:cancel':
                        // TODO: 取消支付
                    case 'get_brand_wcpay_request:fail': // 支付失败
                        // TODO: 支付失败
                }
            }
        ); 
    }
}

四、Native支付

当我们的网页没有在移动端打开时，需要使用该支付方式，让用户使用微信扫描二维码付款。参考文档
使用该方式需要注意的是：

• 1. 微信后台返给我方后台的支付链接只是一个支付链接，需要我方后台转成二维码图片通过stream或者放到静态资源服务器上让前端访问。
• 2. 该种支付方式没有支付回调，所以我们要么让用户支付完成后手动点击页面上的支付成功按钮触发查询，要么就做一个轮询。