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

最近项目进入中后期，开始接入支付。要求是使用微信支付，呵呵，好笑的是不知老板从哪里听来的，居然和我说只要是熟手，接个微信支付两小时搞定，我只能再次呵呵。先不说支付处理逻辑，而且公司本来也没现成的接入模块，再加上我对国内SDK的文档水平，我只能说，前途必定是暗坑无数，还两小时，除非是有现成接入模块，外加不用写支付后处理逻辑，配配参数了事的那种，否则哪有那么简单。（如有大神两小时内从无到有做完整个接入，加游戏相关处理逻辑，而且调式完成，请收下我的膝盖！）

好了，扯远了。进入正题。首先，这篇文章介绍的是H5游戏“移动”端接入。为什么要在这强调移动端，因为这里就有一个微信的暗坑！

支付方式

微信支付方式分类很混乱，我归纳如下

图中，斜体的代表微信官方对其支付的渠道分类，红色的因为我没接过扫码，和刷卡，不确定我这样分类是否正确，所以下面就不讨论扫码和刷卡形式了。

可以看到，其实微信支付分量大类，一类是移动端APP支付，这个很好理解。另一大类就是公众号支付，我们平时使用的一些第三方APP，网站中的微信支付，其实都是公众号支付（貌似现在还有个微信买单，也是在公众号之下的支付）。公众号支付，其实都是通过H5网页形式实现（扫码，刷卡，不在讨论范围，以下同）。然后同样是访问H5网页形式支付，微信分成两种，一种是再微信内，也就是使用微信浏览器支付，另一种是微信外，也就是非微信浏览器然后调起微信客户端APP进行支付。

讲了这么多，是想告诉大家，选择正确的支付方式，很重要，很重要，很重要！

实践中遇到的问题

我接入的时候，就因为没有太过注意，而导致被微信狠狠坑了一把

坑1：非APP支付和开放平台没有关系

在接H5之前，我们刚好接过一个APP支付，所以接H5时，没有多想，去微信开放平台注册相关的信息，又是提交资料，又是等待审核，不亦乐乎。结果审核一通过，傻眼了，没有支付接口，只有登录接口。然后看支付文档，发现支付时好多参数都是和公众号有关的，然后又以为是要先申请公众号支付，然后进行某种绑定，然后再屁颠颠的去申请公众号支付，提交资料，等待审核。通过后开始接API。知道API调用后才发现，晕倒！实际H5网页支付根本就不用申请开放平台。开放平台申请的appid，密钥，在支付这块根本没用。

开放平台的AppId和密钥只对授权登录，获取openId有用，而且只有在你不接支付的时候，才可以使用开放平台的授权登录，因为支付的时候，用户的openId是要靠公众号授权的

也就是说，如果你要接支付，那么其实根本不用去开放平台申请一个网站应用，因为支付时的openid根本不是由这个应用的appid和密钥获取，而是用公众号的appid和密钥获取。也许是我对开发文档理解不够透彻，但我真的想吐槽，微信不能在开放平台申请之前就告诉我没有支付接口吗，不能在开放文档中清楚的提醒我们，网站应用实际是用公众号支付，不能清楚的告诉我们网站应用的openid不能用来公众号支付么？

坑2：trade_type

前面已经说了，如果要做网页支付，只能用公众号H5方式，不用在开放平台申请网站应用。然后，其实这事没完，刚跳出一个巨坑，瞬间又进入一个坑（只能说我们同行的写文档水平都真的一般，国内国外的通病，反正大部分文档写的只有自己看的懂，别人看的云里雾里和我们没关系，我也是这样吧，所以努力把文档写的明白点）。

我当时看，不是H5支付么，那么就去到微信支付商户平台看文档，我们从如下图入口进入

然后看到如下的界面

注意红框标出来的话，这里的意思是，如果你要获得H5支付能力，还要进一步申请！发送到指定邮箱，这个申请算是半开放的那种。我当时虽然看到这段话，但是没有多想，急不可待去看API调用了，事实证明，在这个文档里的一系列接入方式其实和真正的微信接入方式非常相似，但是它会让你把trade_type填成MWEB，结果，就杯具了，显示”商户无该产品开通权限”。网上有不少人遇到这个问题，答案都是让大家检查代码，检查公众号设置，但往往设置，代码都是对的。其实就是这个东西惹的祸，因为在你没有进一步申请之前，MWEB这个方式是不能通过的。另外，这个文档在获取登录openid时的code时的连接也是不同的。

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

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

MWEB对应非微信浏览器的公众号H5支付，而微信浏览器的公众号支付的trade_type时JSAPI。
而第一个连接是对应MWEB方式，第二个连接对应JSAPI方式。

这里我还是想吐槽下，为什么不能把红框的话加个粗什么的突出说明呢，为什么就不能再进一步解释下呢，或者将H5支付，和公众号支付分开申请。

坑3：两个不同的access_token

这个坑不是很大，不过不仔细，仍然会给我们造成很大麻烦。在微信中，存在两个不同类型的access_token，普通类型access_token，和网页授权登录access_token。

不同的接口，所需要使用的token类型不同，但是很自然的是API文档并没有在每个接口出明确提醒我们应该使用什么类型的token（很好，大家给程序员呱唧呱唧！），一切看你的天资，理解很领悟。
微信只在某个和API接口不太相关的文档页面，偷偷告诉你，有两个不同的类型，使用环境不一致。

我也没有办法给出全部的接口对应的是什么类型，毕竟我没有把微信所有接口都接一遍，不过相信通过我的文章，我相应大家至少可以看出门道，抛砖引玉。就支付流程而言，授权登录时，获得的token是后者网页授权登录access_token，需要为每个用户都获取一个不同的token值。而在使用支付相关接口时，由于支付相关的功能，是由我们（第三方平台服务器）发起的，所以微信需要对我们的后台授予一个凭证，这个是普通类型access_token。我们的服务器将向微信发起请求，并获得一个token，以保证我们的服务器可以正常访问微信API，这个token，对于我们的服务器而言，只有一个。

无论是普通类型还是网页授权类型的token，都是有时效的，超过时效，这个授权就失效了，我们需要重新请求。

到这里就先把大概的坑，和一些概念介绍下，接下来就开始从头一步步接入支付了