微信公众号支付和H5支付问题记录（一）

JSAPI, Vue, 公众号支付

问题描述

开发项目的过程中发现，微信支付分很多种，其中两种是本次会提到的：H5 支付和公众号支付。在微信外面打开的网页可以用H5 支付，在微信里面打开该网页的时候只能使用公众号支付。

微信登陆失败

调用微信公众号支付需要拿到用户的 openid，这里涉及到微信网页授权。在授权的过程中可能会碰到以下问题：

redirect_uri 域名与后台配置不一致

错误信息：

redirect_uri 域名与后台配置不一致，错误码：10003

错误截图：

redirect_uri 错误

问题原因及解决办法：

获取 openid 需要重定向到微信的链接地址，格式如下：

1
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

其中有个参数 redirect_uri，意思是微信授权成功后的回调地址，这个回调地址必须是微信公众号设置里面「网页授权域名」下面的地址，否则会报以上错误。

需要注意的是，此处的「网页授权域名」必须是精确的域名。如果 redirect_uri 为 xxx.com/xxx.html，那就要填写 xxx.com。如果 redirect_uri 为 xxx.xxx.com/xxx.html，那就要填写 xxx.xxx.com。

还有一个隐藏的问题，如果有多个域名下的网页需要获取 openid，即微信网页授权，就会碰到「网页授权域名」只能填写一个而导致其他域名下的地址都无法作为 redirect_uri 的值。这里比较合适的做法就是通过已经填写的那个「网页授权域名」做一个中转，此处不详述中转做法。

不支持微信开放平台 Appid

错误信息：

不支持开放平台 Appid，请使用公众号 Appid，错误代码：10016

错误截图：

不支持开放平台 Appid

问题原因及解决办法：

上一个问题中，重定向到微信的地址时需要填写 appid 的参数，这个参数一定要用公众号的 appid。

调用公众号支付失败

调用支付 JSAPI 缺少参数

错误信息：

调用支付 JSAPI 缺少参数：total_fee

错误截图：

调用支付 JSAPI 缺少参数

问题原因及解决办法：

官方调用支付 JSAPI 示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function onBridgeReady() {
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest', {
            "appId":"wx2421b1c4370ec43b",                        //公众号名称，由商户传入
            "timeStamp":"1395712654",                            //时间戳，自1970年以来的秒数
            "nonceStr":"e61463f8efa94090b1f366cccfbbb444",       //随机串
            "package":"prepay_id=u802345jgfjsdfgsdg888",
            "signType":"MD5",                                    //微信签名方式：
            "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
        },
        function(res){
            if(res.err_msg == "get_brand_wcpay_request:ok" ){
            // 使用以上方式判断前端返回,微信团队郑重提示：
            // res.err_msg将在用户支付成功后返回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();
}

要特别注意 package 参数，必须是 prepay_id=xxx 这种形式。

商户传入的 appid 参数不正确

错误信息：

商户传入的 appid 参数不正确，请联系商户处理。

错误截图：

商户传入的 appid 参数不正确

错误原因及解决办法：

这种情况一般是后端用错了 appid 导致，可能是后端错误地用成了开放平台的 appid 导致。此处采用的是公众号支付，因此一定要传公众号的 appid。

支付验证签名失败

错误信息：

支付验证签名失败。

错误截图：

支付验证签名失败

错误原因及解决办法：

这种情况就是签名算法的问题。微信开放平台支付的签名算法和公众号支付的签名算法是不同的，表现在以下两个方面：

  • 公众号支付的签名算法要求注意大小写，开放平台支付的签名是全小写的；
  • 公众号支付的签名字段和开放平台支付的签名字段不一样。

此处严格按照官方文档去写签名算法就好了。