支付宝支付分为支付宝app内的网页支付和app外(即普通浏览器)网页支付,
同样微信支付也分为微信app内的支付(在这里叫公众号支付)和app外的支付(微信H5支付)
还有一种微信公众号的支付宝支付
1.支付宝H5支付
官方文档 (进入蚂蚁金服开放平台,文档中心-开发文档-全部内容-全部文档-手机网站支付): https://docs.open.alipay.com/203/105288/
文档下面还有一个 “手机网站支付转Native支付”,有兴趣可以研究一下。
后端会返回一段表单代码,如下这样:
前端用的是vue,通过下面的代码去调起支付
const div = document.createElement('div');
div.innerHTML = (res.data); //res.data是返回的表单
document.body.appendChild(div);
document.forms.alipaysubmit.submit();
这种方式在支付宝本地网页也支持,但有一个问题,调起支付后,用户中途取消支付,会整个网页一起关闭退出。
https://openclub.alipay.com/read.php?tid=3981&fid=61&ant_source=zsearch
https://openclub.alipay.com/read.php?tid=423&fid=59&ant_source=zsearch
支付宝本地网页建议使用支付宝本地开发文档中的支付方式,见下面
2.支付宝浏览器支付
官方文档http://myjsapi.alipay.com/jsapi/index.html
找到快捷支付:http://myjsapi.alipay.com/jsapi/native/trade-pay.html
我用的是第二种方式,orderStr由后端接口返回,前端直接调用文档里这段代码即可
function ready(callback) {
// 如果jsbridge已经注入则直接调用
if (window.AlipayJSBridge) {
callback && callback();
} else {
// 如果没有注入则监听注入的事件
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function(){
AlipayJSBridge.call("tradePay", {
orderStr:orderStr
}, function(result) {
alert(JSON.stringify(result));
});
});
将上述代码封装
//支付宝浏览器支付
function ready(callback) {
// 如果jsbridge已经注入则直接调用
if (window.AlipayJSBridge) {
callback && callback();
} else {
// 如果没有注入则监听注入的事件
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
function alipayApp(orderStr,callback){
ready(function(){
AlipayJSBridge.call("tradePay", {
orderStr: orderStr
}, function(result) {
callback(result)
});
});
}
调用
util.alipayApp(res.data.data,function(result){
//这里可做一些支付结果判断和跳转
})
3.微信公众号支付
微信浏览器内调起微信支付
有两种方式
3.1 微信内置js对象 WeixinJSBridge
官方文档 https://pay.weixin.qq.com/wiki/doc/api/index.html 点击公众号支付-微信内H5调起支付
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":"wx2421b1c4370ec43b", //公众号名称,由商户传入
"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将在用户支付成功后返回ok,但并不保证它绝对可靠。
}
});
}
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();
}
参数由后端接口提供
将上述代码进行封装:
//微信浏览器支付
function wxpay(params,callback){
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady(params,callback), false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady(params,callback));
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(params,callback));
}
}else{
onBridgeReady(params,callback);
}
}
function onBridgeReady(params,callback){
var that = this
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":params.appId,
"timeStamp":params.timeStamp,
"nonceStr":params.nonceStr,
"package":params.package,
"signType":params.signType,
"paySign":params.paySign
},
function(res){
callback(res)
}
);
}
调用:
util.wxpay(res.data.data,function(payResult){
if(payResult.err_msg == "get_brand_wcpay_request:ok" ){
}
})
3.2引入微信jssdk调用里面的内置方法发起支付
这种比较麻烦,没试过,有兴趣可看一下
https://blog.csdn.net/huchangjiang0/article/details/79737491
4.H5微信支付
https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4官方文档也写的很清楚,后端返回一个url地址,前端的工作就是拿到这个url地址进行跳转就可以了。
//在调起支付的页面监听从其他页面返回的事件,进行页面刷新等
document.addEventListener("visibilitychange", function() {
//
});
5.微信公众号的支付宝支付
vue实现-微信网页中唤起支付宝支付
(后面会写一下银联支付)