关于微信支付遇到的哪些坑

背景

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

问题

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

解决问题的步骤

1. 检查公众帐号支付受权路径是否正确,发现和配置的和预期的是一致的都是pageB的地址(其实就是这里坑了)

2. 查阅微信支付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来讲在不一样的平台检查确认支付地址是否是和预期的一致,由于平台的不一样地址有可能不一样.