众所周知,微信提供了APP、公众号、小程序、H5及扫码等支付方式,而本文需要实现微信"扫一扫"自定义二维码支付功能;
而扫码支付中用到的二维码是微信规范的二维码(weixin://),H5需要在非微信浏览器才能打开;因此只剩下了公众号(或小程序),本文基于公众号支付为大家讲解下整个流程
步骤1. 准备appid、appsecret、支付key
进入微信公众平台,可以查到appid、appsecret;进入微信支付平台,可以找到支付key
步骤2. 获取openid
微信下单需要用到openid,因此需要先获取openid,可参考【获取openid 】:
(1)按微信要求实现服务回调接口
(2)用户访问如下地址,获取code
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
PS: scope为snsapi_base可以实现用户免授权,如果是snsapi_userinfo需要用户同意,本需求采用snsapi_base
REDIRECT_URI地址需要在微信公众号配置,可以配置根路径
(3)微信校验通过后,调用我们服务的redirect_uri/?code=CODE&state=STATE
(4)通过code换取openid
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
PS:通过上述接口,微信服务会返回openid
步骤3. 下单,获取prepay_id
调用微信公众号的统一下单接口
POST https://api.mch.weixin.qq.com/pay/unifiedorder
wxbbe68ee8fadsf
test
腾讯充值中心-QQ会员充值
1435628102
1add1a30ac87aa2db72f57a2375d8fec
http://www.weixin.qq.com/wxpay/pay.php
1415659999
110.90.119.97
{"h5_info": {"type":"Wap","wap_url": "https://pay.qq.com","wap_name": "腾讯充值"}}
1
ouytHt3crrPI1s2LHAs
JSAPI
2B753269B6A69A46615D54AFD047AB2A
PS: total_fee是按分计算,sign按微信定义计算,可以通过微信提供的 sign校验工具 校验
如果成功会返回prepay_id
步骤4. 支付
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":"wxbbe68ee8fadsf", //公众号名称,由商户传入
"timeStamp": '{{timeStamp}}', //时间戳,自1970年以来的秒数
"nonceStr":'{{nonceStr}}', //随机串
"package": '{{prepayID}}',
"signType":"MD5", //微信签名方式:
"paySign":'{{paySign}}' //微信签名
},
function(res){
alert(res.err_msg);
if(res.err_msg == "get_brand_wcpay_request:ok" ) {} // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回 ok,但并不保证它绝对可靠。
}
);
}
PS: prepayID填入上一步的prepay_id,paySign也是利用微信sign算法
上述过程完成后,即可弹出支付界面,用户输入支付密码确认支付后,即可完成,我们服务端根据回调接口notify_url进行后续的业务
总结
通过以上过程,我们可以自定义链接(即二维码),微信扫描我们二维码,跳转至我们自己的H5界面,我们在H5展现商品信息,并包含"去支付"按钮,用户点击支付后,我们重定向至获取code接口;之后在我们自己服务端完成下单、并返回带支付信息的H5,用户点击确认支付按钮,JS调用微信公众号的WeixinJSBridge.invoke接口,弹出微信自身的支付界面,用户输入密码并支付,我们根据支付回调,调用后续业务。
以上过程,用户不需要关注公众号,非常便捷,适用于停车场支付等场景。