最近有个新的需求,H5实现聚合支付功能。页面在微信、支付宝以及云闪付App内实现扫码支付,大体步骤如下。
根据userAgent区分浏览器,决定走哪个回调。
一、获取code
1.云闪付
let redirectUrl = 'https:******',//页面回调地址
// 银联回调到这个地址,code会拼接在这个地址后面,字段名为userAuthCode,生产上回调地址必须是经过银联签约的认证网站,普通的网址会从云闪付的服务器跳出
window.location.href = 'https://qr.95516.com/qrcGtwWeb-web/api/userAuth?version=1.0.0&redirectUrl=' + encodeURIComponent(redirectUrl )
2.支付宝
文档地址
-
(1)登录支付宝平台申请应用
-
(2)配置开发设置,添加获取会员信息功能
详细说明文档地址
//参数说明 app_id:应用的appId; scope:授权类型;redirect_uri:授权回调地址;state:自定义参数
window.location.href = ‘https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=APPID&scope=SCOPE&redirect_uri=ENCODED_URL&state=STATE’
3.微信
登录微信公众平台服务号,配置授权域名
参考微信开放文档
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect'
二、根据code获取用户标识userId
调用后台会封装好接口,上送上一步获取到的code换取userId
三、支付
1.云闪付下单支付
//下单流程成功后后台会返回redirectUrl ,直接跳转支付即可
window.location.href = redirectUrl
2.支付宝支付参考文档
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>
<script>
ap.tradePay({
tradeNO: 'xxxxxx'
}, function(res){
ap.alert(res.resultCode);
//支付完成的逻辑
});
</script>
3.微信支付参考文档
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":"xxxxx", //公众号ID,由商户传入
"timeStamp":"xxx", //时间戳,自1970年以来的秒数
"nonceStr":"xxx", //随机串
"package":"prepay_id=xxxx",
"signType":"MD5", //微信签名方式:
"paySign":"xxx" //微信签名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ){
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功