开发微信支付所碰过的壁

最近因为项目需要,要在项目中添加微信支付的功能。下面和大家分享我在开发的过程中所碰到的一些问题。

对于微信支付，官方给出了相应的文档。需要大家耐心，仔细，仔细，再仔细的去阅读他的文档。这里我注重强调仔细，因为一个小小的细节，就会导致整个过程是不成功的，这个时候会比较崩溃。比如一个字母的大小写(说到这个我挺想吐槽的。。。)

因为我做的是公众号内的支付，所有开发公众号支付的童鞋可以参考以下链接微信公众号支付开发文档

开发前，我们要先弄懂业务流程，业务流程在文档中以一个时序图给出的，挺清晰的。不然之后出了错可能一头雾水，不知去从哪找bug。

PS:因为公众号的网页是基于微信内部的浏览器打开的，微信的浏览器已经内置了支付接口，不需要我们重新去配置SDK，只需要获取相应的参数就行了。

在发起支付之前，我们要在公众号里设置好JS安全域名,网页授权域名(这个主要是授权后获取用户信息)，支付的授权目录(这个是调用支付成功的一个关键)

虽然公众号不需要配置SDK,但也在这里说一下在配置JSSDK需要注意的几个细节

首先，字母的大小写一定一定要注意，因为大小写不同，配置就会不成功。比如：timestamp这个字段，它有时候是timestamp，有时候又是timeStamp 其次，在生成signature的时候，要注意在对参与签名的数组排序的时候，是对键名进行排序，不是对数组的值进行排序。参与前面数组的中的url字段，一定要和当前页面调用SDK的页面的url相同(除去url后的hash值)。

为了使用微信的支付接口,我们去后台生成调用支付接口所需的参数，我们需要通过我们自己的后台去请求微信的统一下单的支付接口，在微信后台生成预交易单后，将相应的参数返回给后台，我们的后台再对相应的参数处理，返回给前台供前台调用微信支付接口。

在调用微信后台统一下单接口的时候，需要传递相应的参数过去。在这里我说几个比较重要的参数，也是比较容易出错的几个参数
1、sign
在生成签名的时候，要注意也是对参与签名的数组的键名进行排序，排序过后，拼接成的url键值对的时候，记得要在最后还要拼接上‘&key=你的公众号的apiSecret’

2、spbill_create_ip
这个字段是终端ip字段，即发起支付请求的设备的ip,这个字段必须和终端ip一样，不能是经过的代理服务器的ip，我在做测试的时候，是随便写的一个ip，导致在后面出了点小问题。

3、total_fee
这个是订单的总金额，要注意他的单位是分，即它只能是一个整数。

如果我们请求成功了，我们就会得到我们想要的数据。

在这个地方，我遇到了一个坑，当然也只能怪我自己不仔细。调用支付接口的时候，有一个参数是paySign(支付签名)，起初我以为就是发送个微信后台数据中的sign字段，二话不说直接就传给前台。结果一直出现{“errMsg”:”chooseWXPay:fail”} 搞了2个小时一直没找到原因。后来我又去JSSDK的文档上看微信支付的那块，在备注里面看到了生成paySign和生成sign只是方式一样。但他们两个是不一样的。于是我把生成paySign的代码加上去，把相应的参数传给前台。然后我在我的测试页面点击按钮测试支付，看到支付的界面加载出来，然后默默的给公众号付了一分钱。

用户支付过后，微信后台那边会有一个异步消息通知我们的后台有关订单的信息。我们需要接收此消息，并且给微信后台相应的回应。我们可以从微信后台发回的通知里获取到支付的结果和微信支付的订单号。在这里我们会对sign进行校对并且对订单的金额进行核对，要注意的是，这里核对签名（sign）不是和我们之前统一下单的sign去比对，而是把当前我们接收到的消息除sign字段外的所有字段，再按照之前生成sign的方式得出的前面与当前sign值进行校对。

这里给大家一个小小的建议就是，你可以把第一次接收到的通知通过写文件保存下来，这样可以调自己代码的bug。

支付调用成功了，然后把代码加到项目中，测试的时候，却出现了{“errMsg”:”chooseWXPay:fail”} 因为项目是用vue.js开发的，vue项目都是SPA形式的，vue的路由又是以hash的模式出现，形如/#/user/2/preorder/（前面那部分我就没写了）这样，因为我之前配置支付授权目录是不包括hash值的，后来我想会不会/#/user/2/preorder/这样形式的也被当成目录来看了，于是把/#/user/2/preorder/这部分加到支付授权目录的后面，然后测试，还是出现了前面的情况。因为我在测试页面是可以成功调起支付接口并且支付的，所以我十分肯定是目录配置出了问题，最后在一篇博客中找到了答案，大家可以参考http://blog.csdn.net/liufeng520/article/details/51354741

对于这类spa形式的，在微信支付授权目录配置的解决方法是在#号前面加一个问号形如/？#/user/2/preorder/

于是我在需要支付的页面中的加入了如下代码

var pos = location.href.indexOf('#')
var my_url = location.href.split('#')
if (location.href[pos - 1] !== '?') {
    location.href = my_url[0] + '?#' +my_curl[1]
}

再次测试，就可以看到调用支付成功

总结

总的来说，注意以下几点：

1、参数名的的字母大小写问题
2、支付授权目录要精确到最后一级
3、参与签名的数组是对键名进行排序
4、要注意几个签名的值是不同的。
5、最重要的一点，心态要好，看文档一定要耐心，要仔细！！！！！！！