Fork me on GitHub

H5实现聚合支付及踩坑

欢迎关注前端早茶,与广东靓仔携手共同进阶

前端早茶专注前端,一起结伴同行,紧跟业界发展步伐~

 

最近有个新的需求,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: '201802282100100427058809844'
}, function(res){
ap.alert(res.resultCode);
//支付完成的逻辑
});
</script>


3.微信支付参考文档

WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":"wx2421b1c4370ec43b", //公众号ID,由商户传入
"timeStamp":"1395712654", //时间戳,自1970年以来的秒数
"nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串
"package":"prepay_id=u802345jgfjsdfgsdg888",
"signType":"MD5", //微信签名方式:
"paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ){
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功

 

具体实现

支付宝

一、通过授权获取auth_code

1、通过CDN方式引入支付宝jsapi

<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>


2、通过getAuthCodeAPI根据主动授权或静默授权获得auth_code

ap.getAuthCode({
scopes: ['auth_user'],
// 主动授权:auth_user,静默授权:auth_base。或者其它scope。如需同时获取用户多项授权,可在 scopes 中传入多个 scope 值。
success: (res) => {
res.authCode
},
});


3、获得auth_code返回给后端换取 access_token、user_id

二、生成tradeNO

根据user_id,二维码id和金额返回给后端,后端会生成一个 tradeNO(支付宝交易号)
注:支付宝H5开发文档给出两种调起收银台的支付方式,我这里用的是使用支付宝交易号进行调起,
详细方法请前往(https://myjsapi.alipay.com/jsapi/native/trade-pay.html)

三、根据tradeNO调起支付宝收银台

ap.tradePay(
{
tradeNO: JSON.parse(data.expend.pay_info).tradeNO
},
(res) => {
// ap.alert(res.resultCode);
if (res.resultCode == 9000) {
// 支付成功
} else if (res.resultCode == 8000 || res.resultCode == 6001) {
// 正在处理中 || 取消
} else {
// 支付失败
}
}
);

 

微信

一、通过拼接地址重定向的方式授权获取code

1.拼接地址参数:
redirect_uri:重定向地址。(注:重定向地址需要使用 urlEncode 对链接进行处理)
appId:公众号的唯一标识。
scope:授权方式。(注:snsapi_base (静默授权),snsapi_userinfo (弹出授权页面))
response_type:返回类型,请填写code。(写死即可)
#wechat_redirect:无论直接打开还是做页面302重定向时候,必须带此参数。


2.拼接列子:
如果静默授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE

let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=STATE&connect_redirect=1#wechat_redirect`;

window.location.replace(url);


3.截取code值


二、把code值传给后台,后台返回用户userId
三、使用JSAPI 调起收银台

WeixinJSBridge.invoke('getBrandWCPayRequest', {
"appId": "wx2421b1c4370ec43b",
"timeStamp": "1395712654",
"nonceStr": "e61463f8efa94090b1f366cccfbbb444",
"package": "prepay_id=up_wx21201855730335ac86f8c43d1889123400",
"signType": "RSA",
"paySign": "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg==" //微信签名
},
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
}
});
}

在微信浏览器中可以直接调用WeixinJSBridge.invoke API

posted @ 2022-03-31 14:08  广东靓仔-啊锋  阅读(2058)  评论(0编辑  收藏  举报