亲历H5移动端游戏微信支付接入及那些坑（三）——支付接入

终于到接入支付了，小小的一个微信支付，居然也写了3篇，好长，好累。

接入环境

对接入环境，前端的话，应该是以js为主吧，也有可能是，PHP，Java，C++，或者C#都可以。为什么在此特意提一下接入环境呢，是因为这里又有一个小坑（真是对国内的SDK文档无力吐槽了，接过大大小小无数的SDK，没有几个坑基本是不可能的，微信这种算大厂了，文档整理的依旧和屎一样）。

首先，如果你是按照正常流程，从其支付入口点进去看的文档，一定不会和你提到jsapi_ticket这个东西，这个东西是当你是使用微信的js接口时，才需要的一个凭证（又是凭证，而且只有js需要，为什么？问微信吧，我也不知道为什么）。也就是说，如果你是php，C#等，是不用做这一步的，可以减少一点工作量，但JS的话，就一定要获取这个东西。 
然后悲催的是，关于这个东西的文档，是被整合在微信的JS-SDK中（那你至少在支付文档里加个连接跳转，或是提一下呢？）

这个文档，请从公众平台->开发者工具->开发这文档->微信网页开发进入阅读 
这里附上JS-SDK的微信官方文档地址

如果你使用JS开发，请无视微信支付文档中的示例代码，一切以JS-SDK中的支付接口为准

(一)获取普通类型access_token

为了获得jsapi_ticket，我们必须先获得一个token，注意，这里的token是在前一篇中提到的普通类型token。如何获得呢，微信并没有在支付文档中给出，也没有在JSSDK文档中给出，藏在了公众平台->开发者工具->开发这文档->开始开发->获取access_token中

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

在该连接中填入公众号id，和公众号密钥，然后使用GET方式，从http请求返回token。 
这个token，每天获取的次数是有限的（具体数量在公众平台的接口权限中可以查看），所以记得不要频繁获取，等到了过期时间再重新获取。 
不同于网页授权access_token对应于每个用户的授权，这是微信授权给我们后端，所以只有一个。

(二)获取jsapi_ticket

前面说了，如果是js环境，需要首先获取jsapi_ticket，然后才能正常调用微信接口。jsapi_ticket是公众号用于调用微信JS接口的临时票据，通过

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

该连接使用GET方式获取。注意到这个连接中的token了吗，就是第一步中获得token。如果成功返回，就能得到jsapi_ticket，注意jsapi_ticket也是有时效性的。微信不建议频繁刷新，所以注意保存。以备后用

（三）统一下单

在前端能够调起JS的支付接口之前，前端应该通知后端，先请求下单，如果成功下单，才能进行第四步及后续步骤。然后，统一下单的文档，又跳回原来的微信支付文档了（呵呵，真是乱）。

统一下单地址

https://api.mch.weixin.qq.com/pay/unifiedorder

更加坑爹的是，在第一篇中介绍的两种支付方式，微信浏览器内支付，和非微信浏览器支付，都是该地址，只是参数不同，所以真的会让第一次接入的人很容易搞混乱

统一下单时，我们需要对以上地址传递参数，然后以http的POST方式请求，并得到下单结果。下面只挑几个容易误解的参数说明，其他请参考官方文档

• appid ： 公众号id，公众号id，公众号id
• mch_id：商户号，第一篇里已经说过，请填和公众号对应的商户号，不是你的APP的商户号，也不是你的网站的商户号，是你的公众号的商户号
• trade_type ：第一篇里也说明了，除非你进一步申请过，否则填JSAPI

• nonce_str：随机字符串，该字符串在第五步时需要被使用

  注：我接入时，网上找到一篇文章，说是第四步config中也是使用此处的noncestr，但在写这篇文章的时候，我重新研读了下文档，我个人觉得其实该字符串仅和第五步中的保持一致即可。第四步可以重新生成。但是因为页面跳转，或是安全性考虑，第四步中的config，可以考虑在每次支付前都重新配置，那么这时可以将noncestr也用到第四步中。并不影响。但如果前端实现对一个jsapi_ticket值config只配置一次而不是每次支付前都配置一次的话，我觉得这个nonce_str是不用保持一致的。

• sign_type：必须填MD5

（四）配置wx.config

如果使用JS接入，在前端执行微信的API时，必须预先配置一个wx.config对象。（其他环境不需要配置） 
对wx.config配置说明其中几个参数，剩余的请参考文档

• nonceStr：随机字符串，安全起见，最好是后端生成通知前端
• timestamp：生成签名的时间戳。由于签名一般也是由服务器生成的，所以这个时间戳也是有后端通知前端
• url：当前网页的URL，不包含#及其后面部分，所谓当前网页，就是你再配置这个wx.config的js代码所在的前端页面地址
• signature：签名，这个签名必须要使用SHA1的算法，最好把结果转成小写。参与这个签名的参数有noncestr，jsapi_ticket，timestamp，和url。其中noncestr和timestamp就是上面两个由服务器计算返回的。

（五）调用支付接口

所谓的支付接口，实际是一个统一下单接口，如果统一下单成功，则会由微信拉起支付页面，引导用户完成支付，然后将支付结果通知我们的后台，再由我们的后台处理业务逻辑，并通知前端。具体的流程看官方文档就可以理解，不再多加说明，此处主要对支付接口的调用做解释。

支付接口wx.chooseWXPay中需要填几个参数

• timestamp：时间戳

  注：同前面的noncestr，有的文档说是要保证，该值从统一下单开始，wx.Config，支付调用这几个步骤时保持统一。当然，这三个地方统一肯定可以保证支付正常。但我进一步研读代码，此处的timestamp无需和config统一，因为只是代表支付签名生成时的时间戳

  另外要提的一点是这个时间戳是以UTC0为标准时间的。我一开始也没有注意，就直接用当前时间和1970/1/1零点的时间去计算，当然微信也没有提示错误，我猜微信后台并没有验证，只是作为一个值记录了。但是实际上，这个值在微信后台应该是被作为UTC0时区的值来算的，所以我把这个时间戳存到数据库后，时间上都超前了好几小时，这个问题我也是在接另一个支付SDK时发现的。

  var stamp = DateTime.Now .ToUniversalTime() - new DateTime(1970, 1, 1, 0, 0, 0);

  • 1

  • 1

• nonceStr：随机字符串，该随机字符串必须是统一下单时使用的随机字符串

• package：统一下单接口返回的prepay_id，注意这里值必须是prepay_id = xxxx形式，不能只写xxxx
• signType：下面支付签名的签名方式
• paySign ：支付签名，这个必须使用MD5签名算法，对上面4个参数进行签名，安全起见，这个应该是后端生成然后告诉客户端的。

（六）最后说明

保险起见，nonceStr请保持在统一下单，wx.Config和wx.chooseWXPay这几个步骤中一致，因为我目前就是这么做并通过的。timeStamp保持在wx.Config和wx.chooseWXPay中一致

可以尝试noncestr在统一下单和wx.chooseWXPay一致，和config不同 
可以尝试timestamp在config和chooseWXPay中不同