干货：微信小程序如何接入微信支付

本文阐述如何从零开始接入小程序支付，尤其适合没有微信支付接入经验的开发者。

[b]1. 申请微信支付[/b]

小程序认证以后，可以在小程序后台，微信支付菜单栏，申请微信支付。

[img]http://dl2.iteye.com/upload/attachment/0121/5729/4ea9845f-a0e5-3e89-8da4-0f8cdd05d8d1.jpg[/img]


填写企业信息和对公账户，微信支付会打一笔随机金额到对公账户，输入金额完成验证后，在线签署协议，这样整个微信支付的申请流程完成了。

微信支付申请完，会发送微信支付商户号，商户平台用户名密码等信息到注册者邮箱。

[b]2. 准备工作[/b]
[b]2.1 配置小程序密钥[/b]

[img]http://dl2.iteye.com/upload/attachment/0121/5731/1f3a9516-035e-3d9a-b7ba-abe7637d4883.jpg[/img]


在小程序后台设置页，点击生成，管理员验证二维码后，会随机生成 AppSecret。请妥善保管好 Appsecret，不要明文存储于服务器，AppSecret 用于和微信服务器交互。比如获取用户的 openid 接口就需要用到。

[b]2.2 设置密钥和下载证书[/b]

用申请微信支付获得的用户名和密码，登录商户平台 (pay.weixin.qq.com)，在账户中心，API 安全中下载证书和设置密钥。

密钥是 32 位，设置以后需要妥善保管，因为无法查看密钥，所有微信支付相关的接口都会使用这个密钥加密。

[b]2.3 配置 Https 服务器[/b]

小程序的前端是使用微信提供的框架开发，但是后台依然是开发者自己的服务器。小程序发起的是 https 请求，意味着小程序开发者必须配置 https 服务器。

配置 https 服务器之前，先要获取证书，证书可以向相关机构购买，腾讯云目前可以向用户提供免费的证书。

证书安装指引在这里查看：

https://www.qcloud.com/doc/product/400/4143

[b]3. 微信支付流程[/b]

微信支付有多种支付方式，包括刷卡支付，公众号支付，扫码支付，APP 支付，在这里微信支付的所有接口：https://pay.weixin.qq.com/wiki/doc/api/index.html

小程序是在微信里调起支付的，其实是公众号支付。关于公众号支付的详细文档可在这里查看：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1

所有公众号支付相关的链接都可以在此链接找到，开发者首先需要大概了解这些接口。

小程序公众号支付的主要流程如下（本图只考虑了正常流程，异常流程参考公众号支付文档）：

[img]http://dl2.iteye.com/upload/attachment/0121/5733/71749019-7c9e-3312-a279-4f5d1c3e0196.jpg[/img]


[b]3.1 关于 openid[/b]

上述流程中请求 openid，用的是小程序最新 api 中的接口，开发者可以查看小程序的登录接口。

开发者从第三方服务器获得的 openid，在统一下单的接口里面需要使用到。

[b]3.2 关于小程序调起微信支付[/b]

上述流程中的小程序调起微信支付，用的是小程序微信支付接口 wx.requestPayment，该接口的详细描述可以查看小程序的微信支付 API。

这个接口中的 package 和 timeStamp 参数是从开发者的第三方服务器返回的，package 是第三方服务器从统一下单接口回复中获得。

接口中其他的参数，appId，noceStr，signType 以及 paySign 则由小程序这边存储或者计算而得。

其中 paySign 是签名，签名算法文档在这里：

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3&t=20161107

整个公众号支付的主要流程基本都是在第三方服务器上实现，开发者需要熟读公众号支付文档，了解消息交互流程以及每个接口。

这里并没有描述正常微信支付必不可少的一些功能：异常处理，查询订单，发起退款，下载对账单等等。

[quote][b]「H5程序俱乐部」[/b]是一个专注微信小程序学习交流，相关外包/招聘需求信息发布的微信公众号[/quote]

[img]http://dl2.iteye.com/upload/attachment/0121/5735/202868f6-e3fd-3d92-9ed7-326ef1fb454e.png[/img]