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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/duotemplar/article/details/76028213

终于到接入支付了,小小的一个微信支付,居然也写了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);
  • 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中不同

展开阅读全文

没有更多推荐了,返回首页