关于微信支付遇到的哪些坑 - 快车库

背景

最近公司在做一个微信公众号的项目,其中涉及到了微信支付.项目基于Angularjs开发的.背景交代到这里.
结构如下:

问题

之前在其它的项目中做过微信支付,所以公众配置这些都没问题的.支付授权地址等等东西都是配置好了的.
可是支付的时候不正确.

解决问题的步骤

检查公众账号支付授权路径是否正确,发现和配置的和预期的是一致的都是pageB的地址(其实就是这里坑了)
查阅微信支付API 检查官方是否更新了调用方式,调用方式如下并没有更新

       function onBridgeReady() {
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
        "appId"：
        "wx2421b1c4370ec43b",
            "timeStamp"：
        " 1395712654",
            "nonceStr"：
        "e61463f8efa94090b1f366cccfbbb444",
            "package"：
        "prepay_id=u802345jgfjsdfgsdg888",
            "signType"：
        "MD5",
            "paySign"：
        "70EA570631E4BB79628FBCA90534C63FF7FADD89"
    }, function (res) {
        if (res.err_msg == "get_brand_wcpay_request：ok") {}
    });
}
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();
}

在调试过程中开始时只关注到res.err_msg 值,忘记查看整个res对象了,查看res对象提示当前地址没有授权.

      
      WeixinJSBridge.invoke('getBrandWCPayRequest', prepay, function (res) {
    if ('get_brand_wcpay_request:ok' == res.err_msg) {
        alert("支付成功!");
        $state.go('account.orders')
    } else if ('get_brand_wcpay_request:cancel' == res.err_msg) {
        alert("支付过程中用户取消?");
    } else if ('get_brand_wcpay_request:fail' == res.err_msg) {
        alert("支付失败");
    } else {
        alert(res.err_msg);
    }
});

在这个时候回去检查了第1步,配置也是第一步的地址.根据以往的经验没有错误的.

在这个时候找不到原因了

困惑了两天

查看了pageB在微信里面的地址发现原来显示的地址根本不是我们预期的地址
xxx.com/#/order/detail
在IOS版本里面地址是 xxx.com/#/shop/index/888
这是pageA的地址
在Android手机查看地址是 xxx.com/#/order/detail

根据微信支付配置的授权地址为 xxx.com/#/shop/index/ xxx.com/#/order/

总结

使用微信支付出现问题,检查配置,特别是授权地址,对于spa来说在不同的平台检查确认支付地址是不是和预期的一致,因为平台的不同地址有可能不同.