一、概述：
用户进入微信公众号，点击访问H5网站链接，H5网站发起微信第三方授权登录，授权后跳转到H5网站进行微信支付操作。
二、业务配置项准备：
| 配置项 | 描述 |
|---|---|
| 注册微信公众号 | 微信公众号需要认证，认证后才会有相关开发接口权限 |
| 注册微信商户号 | 微信商户号开通后，会有appid、mch_id、key等信息提供 |
| 开通微信支付权限 | 登录商户平台，将商户号和公众号绑定，产品中心->appID授权管理 |
| 配置网页授权域名 | 登录微信公众平台，开发->接口权限->网页服务->网页授权->修改 |
| 配置jsapi安全域名 | 登录微信公众平台，设置->公众号设置->功能设置->JS接口安全域名->修改 |
| 配置支付安全目录 | 登录微信商户平台，产品中心->开发配置，目录要设置到当前访问连接的上一级 |
三、开发流程
1、网页授权
第一步：修改授权回调域名
在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头。
第二步：引导用户进入授权页面同意授权，获取code
在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认拥有scope参数中的snsapi_base和snsapi_userinfo），引导关注者打开如下页面
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。
如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。
第三步：通过code换取网页授权access_token和openid
获取code后，请求以下链接获取access_token：
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
注意事项：
- 由于公众号的secret和获取到的access_token安全级别都非常高，必须只保存在服务器，不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤，也必须从服务器发起。
- access_token是公众号的全局唯一接口调用凭据，公众号调用各接口时都需使用access_token。开发者需要进行妥善保存。access_token的存储至少要保留512个字符空间。access_token的有效期目前为2个小时，需定时刷新，重复获取将导致上次获取的access_token失效。
2、服务端通过JSAPI生成预支付订单
第一步：客户端网页内发起生成订单的请求
第二步：服务端生成订单及签名信息，并调用JSAPI的统一下单API接口，调用成功后，微信支付系统会返回预付单信息（prepay_id）
注意事项：
1）订单签名信息需要使用API密钥
API密钥key的设置路径：
微信商户平台(pay.weixin.qq.com)-->账户设置-->API安全-->密钥设置
2）签名规则
- 参数名ASCII码从小到大排序（字典序）；
- 如果参数的值为空不参与签名；
- 参数名区分大小写；
- 验证调用返回或微信主动通知签名时，传送的sign参数不参与签名，将生成的签名与该sign值作校验。
3）涉及资金回滚的接口会使用到API证书（包括退款、撤销接口），此时服务器需安装apiclient_cert.p12证书
apiclient_cert.p12证书可以按照以下路径下载：
微信商户平台(pay.weixin.qq.com)-->账户中心-->账户设置-->API安全
第三步：服务端生成JSAPI页面调用的支付参数并签名
备注：prepay_id 通过微信支付统一下单接口拿到，支付签名paySign 采用统一的微信支付 Sign 签名生成方法，参与签名的参数有appId, timeStamp, nonceStr, package, signType。
第四步：服务端将支付参数（prepay_id、paySign）返回给客户端
3、服务端获取jsapi_ticket，并生成JSSDK权限验证的签名
参考《JSSDK说明文档——附录1》
jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。
第一步：采用http GET方式请求获得jsapi_ticket：
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
获得jsapi_ticket之后，就可以生成JS-SDK权限验证的签名（signature）了。
第二步：生成JSSDK签名signature
签名生成规则如下：
参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。
即signature=sha1(string1)
注意事项：
- 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
- 签名用的url必须是调用JS接口页面的完整URL。
- 出于安全考虑，开发者必须在服务器端实现签名的逻辑
第三步：服务端将JSSDK签名参数（signature）返回给客户端
4、通过JSSDK调用微信支付
JSSDK发起支付前需服务端生成两个签名，一个是支付签名（paySign），一个是配置签名（signature）。
客户端接收到服务端生成预支付订单及相关签名参数信息后，即可发起支付操作：
第一步：绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。
第二步：引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。
第三步：通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: [] // 必填，需要使用的JS接口列表
});
第四步：通过ready接口处理成功验证，并发起微信支付请求
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串，不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '', // 支付签名
success: function (res) {
// 支付成功后的回调函数
}
});
});
至此，整个JSAPI支付的相关配置及开发流程就全部完成了。
来源：https://blog.csdn.net/qq_26015489/article/details/102700171