说明
本文试图说明的是在微信环境中、前端部分调起H5支付的场景，需要区别于一般H5浏览器中调起和纯公众号内调起的场景。
前期准备：公众号支付开发步骤
文档地址：微信内H5调起支付
请自行区别于：H5支付
步骤
1. 开发之前：
参考资料：公众号支付介绍
- 首先需要一个类型为服务号（政府或媒体订阅号）并完成微信认证的公众号；
- 提交资料为这个公众号申请一个商户账号，并通过审核；
- 用申请商户账号的微信登录微信商户平台，
账户设置->API安全，依次下载安装安全控件和操作证书。
注意：每次安装后需要重启浏览器重新登录。另外在Mac系统上，仅支持使用Safari，不能使用Chrome。 - 用申请商户账号的微信登录微信商户平台，产品中心->我的产品，开通“公众号支付”功能。
- 请记录公众号的appId、appSecret，商户账号的mch_id（纯数字）、API密钥key。
2. 微信中的安全域名设置：
- 在微信公众号中，公众号设置->功能设置->网页授权域名，需要加入支付页面的域名。格式类似：“wechat.meiyue.com”，不需要协议名，不需要斜杠结尾，不需要二级目录。
- 在商户平台中，产品中心->开发配置->支付配置->公众号支付->支付授权目录，需要添加支付页面的域名。格式类似：“http://wechat.meiyue.com/”，需要选择协议，需要以斜杠结尾，不需要二级目录。这一设置更新后在10分钟内生效。
3. 流程整理
-
为了获得公众号的授权，微信要求不能直接将网址发给用户，而要发出一个经过公众号处理的网址，而真实网址则作为redire_url发出。微信规定的网址为：
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${true_url}&response_type=code&scope=${'snsapi_userinfo'}&state=${STATE}#wechat_redirect`其中：
- true_url：支付页面的实际地址；
- scope：如果仅需要用户的open_id，可以使用
snsapi_base静默授权，否则使用snsapi_userinfo； - state：可选参数，可以带到实际网页中的参数，需要进行URI转码。希望获取
?order_id=123，需要写成state=${encodeURIComponent('order_id=123')}，实际页面拿到的字符为：&state=order_id%3D123，然后需要在页面自行提取。
-
用户点击微信重定向网址后，经过确认授权或静默授权，跳转到实际支付页面，同时获取到公众号提供的CODE。网址格式类似于：
'http://wechat.meiyue.com/meiyue/weChatPay.html?code=081OfePZ0VzkRZ15uNRZ0MRaPZ0OfePI&state=order_id%3D123' // `${true_url}?code=${CODE}&state=${STATE}` -
一堆请求的流程说明：
在页面中，需要用code请求用户的open_id，再用open_id交给服务器发起订单或查询订单，换取订单信息prepay_id。
（实际操作中，因为open_id请求prepay_id的行为只能由服务器发起，所以这里的处理是前端向服务器发送code，由服务器进行请求，最后返回订单信息。）
参考资料：微信网页授权
如果不需要用户的具体信息（用户名头像什么的），到文档第三步就OK了。 -
页面中的处理：weChatPay.html
如果不使用微信环境，则需要在页面中引入微信JS-SDK脚本，自行配置config，然后才能使用微信提供的接口。
而在当前场景中，微信浏览器中已经注入了相关代码，直接使用就好：
wechatPay.html中的示例代码
// 后端提供的订单信息：
let data = {...}
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": data.appid, //公众号名称，由商户传入 ok
"timeStamp": data.timestamp, //时间戳，自1970年以来的秒数 ok
"nonceStr": data.noncestr, //随机串
"package": "prepay_id=" + data.prepayid,
"signType": "MD5", //微信签名方式
"paySign": data.sign //微信签名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ){
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
console.log('支付成功！')
}
});
}
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
}else{
onBridgeReady();
}
遇到的问题：
1. 关于微信开发者工具
网页跳转可以使用微信开发者工具测试，但是最后的调起支付方法不能测。控制台报错：errMsg:"chooseWXPay:fail, the permission value is offline verifying"，翻译过来是不能离线授权。这很正常，微信开发者工具没有钱包。
2. 支付签名错误
需要检查的地方有：
- 前后端使用的参数名大小写是否一致？
公众号支付中使用驼峰写法（appId），而H5中使用小写（appid）。 - 使用的信息是否一致？
一个公众号可以注册多个商户号，请检查基本信息是否一致。 - 后端计算的签名是否正确？
微信支付接口签名校验工具
微信公众平台支付接口调试工具
3. 当前页面的URL未注册
肯定是授权域名、安全域名什么的写错了，请返回上文中的“ 2. 微信中的安全域名设置”。当然也有可能是配错了公众号或商户号。
网友评论