本流程主要参考

背景：

在Web应用中连接微信支付时，我以为只是查看demo，将demo与文档结合起来，然后调用接口即可。 然而，微信文档的复杂性和隐藏的陷阱让我不断地填补空白，直到我怀疑自己的人生。 向关注微信的人们致敬。 实在抱歉，过年的时候烧点纸给他留个纪念吧，NND。 。 。 。 。 。 。 。 。 。 。

防范措施：

陷阱一：多个签名的混淆

关于签名的调试，网上有各种呼声。 很多人调试了很多天的签名都没有结果。

这是因为整个工作流程至少涉及三个签名，如果不小心，可能会错误地使用它们。

在统一点餐接口中，发送给微信服务器的请求中的参数都有签名；

返回的参数中还有一个签名。 经过进一步观察，发现两者是相同的签名。

但wx.h中需要参数。 使用后调用是另一个签名。

wx中需要的支付签名。 是另一个。

这个坑花费的时间：2天。

坑二：二

看开发文档，可以看到微信做了两个！

无论他们用多少大胆的词语来提醒我们两者之间的差异，

我们在开发过程中陷入混乱的心灵和身体受伤也很难治愈！

一种是通过网页授权，需要用户授权才可以获取。

另一种是普通的，支持公众号的各种基础服务，不仅仅是支付。

看看文档中描述的流程，您认为 Web 授权是正确的方法吗？

恭喜你，我又掉进陷阱了……我这里没遇到过，不过我在这里给你提个醒。

坑三：如何获取代码

这是我刚开始做这件事时一直坚持的事情。 微信文档只提供了一个接口。

我一直以为是后台调用接口，然后返回代码。 如果你这么认为，那么恭喜你，你已经成功入坑了，MD。 只能在前台调用这个接口，并填写后台写的回调方法，并使用的链接，而且这个方法只能是get请求。

=================================================== =============================

这里我先给大家梳理一下整体流程，方便大家理解。

准备工作：

第一步准备工作：

获取服务号并开通微信支付功能。

在微信公众平台【微信支付-开发配置】中配置支付授权目录（）。

测试过程中，需要配置测试授权目录，并将参与测试的微信账号添加到白名单中。

由于测试必须在在线（测试）环境中进行，不方便，因此浪费了很多大好的时间。

授权目录就是调用微信支付控件的页面所在目录（注意这里必须是支付页面所在的页面）。

第二步的准备工作：

还是在公众平台，进入开发者中心，找到接口权限表。

在Web服务中找到“Web授权用户基本信息”并填写。

这里填写的URL必须是用户进入应用的URL，并且必须是用于验证的URL中的值...

如果你犯了一个错误，你就会在坑里受苦很长时间。

第三次准备：

还是在公众平台，进入公众账号设置，找到功能设置。

需要设置JS接口的安全域名。

这里的安全域名就是与您的应用相关的域名。 更改数量有限，敬请留意。

第四种准备：

还是在公众平台，在开发者中心找到配置项。

此处需要 和 的访问权限。

另外，您还需要准备的是商户ID：和key。

注意： 和 key 在通讯界面有用，不允许在前端页面使用！

进入支付流程======================================

第一步：带有验证的条目 URI

首先，引导用户进入应用程序。 这里我们以H5页面为例。

由于微信支付必须在微信浏览器中进行，因此入口URL链接需要从公众号发布给用户。

这样，用户就会点击微信客户端中的链接，进入应用程序。

（别问京东为什么可以在纯网页上使用微信支付，那是微信给京东小伙伴开的后门好吗？）

这个入口URL不是一个简单的URL，这里需要进行验证，所以我们暂时将这个URL设置为。

格式为：

&=&=代码&=&=#

红色标记的几个变量需要解释：

1.是公众号

2. 看起来很眼熟吗？ 就是刚才在网页授权中写的URI。 亲爱的，它需要逃脱。

3. 必须填写code，因为这是一个GET请求。 微信会返回code，然后再次使用code...等等等等

4.、填写（需要用户手动授权）或（直接进入页面）

5. 它将与代码一起返回。 您需要根据业务自行填写。 一般格式是大小写字母和数字的组合。

参考文档：

第二步：通过code获取

用户点击这个之后会发生什么奇妙的事情呢？

此时，微信会返回一个代码给您，并将您重定向到您在此指定的页面。

您需要从该页面的 URL 中获取代码值。 如果无法获取，则应提示用户授权失败或未授权。

由于这里可能是应用的首页，需要在其他页面调用支付控件，

所以可以先缓存在例子中，等需要调用支付控件的时候再使用。

我需要做什么才能获得此代码？

此时需要做的事情无法在前端页面继续进行。 这里必须写一个前后端通信的接口。

将此代码发送到后端服务器，然后在服务器中向微信发起GET请求：

我的&=我的&代码=这个代码&=;

红色标记的是需要替换的变量，它们都应该保存在服务器文件中。

这个请求返回的Json就是我们想要的。

参考文档：

第三步：统一订购界面

接口地址：

参考文档：

这个接口在文档中已经解释得很清楚了，这里不再赘述。

注意这里有一个签名，和后面要用到的 和 完全不一样。 虽然都是签名，但是却完全不同。

如果你的是，你就不需要它，如果是，你必须。

在统一订单界面中，您会告诉微信当前交易的一些基本信息。

包括但不限于商户ID、交易编号、交易金额等。

微信会把它封装成一个URL，接口返回的URL实际上对应的是你的交易明细。

请注意，该接口返回两个状态码。 1表示通讯是否成功：

另一个指标是生意是否成功：。 有关详细信息，请参阅文档。

参考文档：

第四步：前端配置wx.

上一步接口的业务返回成功后，就可以在前端引用了。

开发文档位于：

第一次注入权限验证配置时，需要使用wx.

它有几个参数需要特别注意，否则你会陷入另一个陷阱：

1、随机字符串必须使用上一步中的统一排序接口返回。

2.签名不是之前界面中的签名。 需要在服务器端生成并返回给前端。 （参见下一步）

3.指定微信支付接口“”。

4. 当该参数设置为true时，移动端会显示调试帮助。

这里也有一个陷阱。 微信文档中给出了微信支付，但结果是GG。 。 。 。 。 。 。 。 。

参考文档：

第五步：服务器生成wx.

首先使用并从微信基础支持接口获取。

前面提到了两种：网页授权型和普通型。

您在这里得到的是正常类型。

由于这个可能会被公众号的所有服务使用，所以要特别注意。

有效期，建议过期前缓存。

然后使用它来获取接口地址：

“”&类型=

这也需要缓存。

现在您已准备好生成。 所需参数为：

1.

2、统一下单接口返回的随机字符串

3.时间戳：以秒为单位（后面会用到时间戳，所以一定要一致）

4.当前页面URL，无需转义

注意，该签名使用SHA1算法加密，其他签名使用MD5算法加密。

第六步：最后开始配置

验证完wx. 通行证，wx。 可以在wx的回调中执行。

几个属性配置说明如下：

1.：刚刚使用的时间戳，单位为秒。

2.：统一订单界面随机字符串

3.：统一下单接口返回值的格式为“=”

4.：由于这里的签名是MD5加密，所以这个值为“MD5”

5.：哈哈，这是一个陷阱。 这个签名也是在服务器端生成并返回给前端。 请参阅下一步。

6.：支付成功后回调。

7.fail：支付失败后回调。

8.：用户取消支付后的回调。

这里注意一下，既然是通过验证进入申请的，那么用户取消支付后，

代码可能已经过期，建议回调中调用wx.()取消支付退出网页返回微信客户端。

因为即使你不退出并再次进行支付，扫码后的验证也不会通过。

这个时候，你只能重温第一步一次。

步骤7：生成所需的签名

这个签名和刚才wx.中的签名不同，wx.是用MD5加密的。

生成签名所需的参数为、、、、。 （字典顺序）

其中 、 、 是由前面调用的统一排序接口返回的。

这里是“MD5”。

另外，组合签名的时候，最后还要加上一个key，这个key就是app的key。

key在最后排序，排序不参与字典顺序。 具体规则请参见官方文档。

第8步：在线测试

至此，一切都准备好了，包括东风。 已准备好进行测试。

建议使用手机测试。 如果出现问题，IOS会报告错误信息，但实际上不会。

最常见的问题是“ ”，这个错误信息太笼统了。

需要更详细的调试和勤奋的日志记录。 我在这个坑里呆了两天...

注意：本地测试环境无法测试，必须发布到线上测试环境（非生产环境）。

并且在线测试环境的域名、URI等信息必须在公众号设置中进行授权。

以上就是微信支付的详细流程。 不管是连接哪个产品的支付，大体的流程都是这样，但是做的时候一定要确定自己的公司要连接的是哪个产品，比如公众号支付和APP支付。 等待。 。