支付寶支付分為支付寶app內(nèi)的網(wǎng)頁支付和app外(即普通瀏覽器)網(wǎng)頁支付绍妨,
同樣微信支付也分為微信app內(nèi)的支付(在這里叫公眾號支付)和app外的支付(微信H5支付)
還有一種微信公眾號的支付寶支付
1.支付寶H5支付
官方文檔 (進入螞蟻金服開放平臺叽赊,文檔中心-開發(fā)文檔-全部內(nèi)容-全部文檔-手機網(wǎng)站支付): https://docs.open.alipay.com/203/105288/
文檔下面還有一個 “手機網(wǎng)站支付轉(zhuǎn)Native支付”,有興趣可以研究一下。
后端會返回一段表單代碼,如下這樣:
<form id='alipaysubmit' name='alipaysubmit' action='https://openapi.alipay.com/gateway.do?charset=UTF-8' method='POST'><input type='hidden' name='biz_content' value='{"productCode":"QUICK_WAP_PAY","subject":"橙園24°","out_trade_no":"201807201006587430","total_amount":0.01,"timeout_express":"1m"}'/><input type='hidden' name='app_id' value='2018070760510577'/><input type='hidden' name='version' value='1.0'/><input type='hidden' name='format' value='json'/><input type='hidden' name='sign_type' value='RSA2'/><input type='hidden' name='method' value='alipay.trade.wap.pay'/><input type='hidden' name='timestamp' value='2018-07-20 10:06:59'/><input type='hidden' name='alipay_sdk' value='alipay-sdk-php-20161101'/><input type='hidden' name='notify_url' value='http://orange24.msqsoft.net/index.php/api/Order/orderAliPayNotify'/><input type='hidden' name='return_url' value='http://orange24.msqsoft.net/index.html#/app/orders?index=0'/><input type='hidden' name='charset' value='UTF-8'/><input type='hidden' name='sign' value='ioGI8wwaP6L81+RpW6mdd9aprN5HtpB/JWaaXCx6wtGF0tZKinMFqt79z21wkdgu/ZiY4bYPe73Q6joS/vMe3i+n5AaCYB/6KgKQzy++En8nJZVi6OaNhnrFUH8LUNEfVHZXS25Agzu7zZ/QqP1mUizNsRnCT65G2lrhsK1wv7sfq1/FIggjiGYiqCE2KzQwaXp3McMTNS7mH2HcIkmAELx1U9EeU0RDM7veJjZObXndxim/zXojQ2e8nye8k9bwfgZAfnFR7zSGyw7kxyVTtsw/nT5p51bUxYRPpO7fjTWULQkZwS+kJ1jKDPKKBVxzxaNxF52i2NTORL/AdB1iWA=='/><input type='submit' value='ok' style='display:none;''></form><script>document.forms['alipaysubmit'].submit();</script>
前端用的是vue没佑,通過下面的代碼去調(diào)起支付
const div = document.createElement('div');
div.innerHTML = (res.data); //res.data是返回的表單
document.body.appendChild(div);
document.forms.alipaysubmit.submit();
這種方式在支付寶本地網(wǎng)頁也支持,但有一個問題温赔,調(diào)起支付后蛤奢,用戶中途取消支付,會整個網(wǎng)頁一起關(guān)閉退出陶贼。
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
支付寶本地網(wǎng)頁建議使用支付寶本地開發(fā)文檔中的支付方式啤贩,見下面
2.支付寶瀏覽器支付
官方文檔http://myjsapi.alipay.com/jsapi/index.html
????找到快捷支付:http://myjsapi.alipay.com/jsapi/native/trade-pay.html
我用的是第二種方式,orderStr由后端接口返回拜秧,前端直接調(diào)用文檔里這段代碼即可
function ready(callback) {
// 如果jsbridge已經(jīng)注入則直接調(diào)用
if (window.AlipayJSBridge) {
callback && callback();
} else {
// 如果沒有注入則監(jiān)聽注入的事件
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function(){
AlipayJSBridge.call("tradePay", {
orderStr:orderStr
}, function(result) {
alert(JSON.stringify(result));
});
});
將上述代碼封裝
//支付寶瀏覽器支付
function ready(callback) {
// 如果jsbridge已經(jīng)注入則直接調(diào)用
if (window.AlipayJSBridge) {
callback && callback();
} else {
// 如果沒有注入則監(jiān)聽注入的事件
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
function alipayApp(orderStr,callback){
ready(function(){
AlipayJSBridge.call("tradePay", {
orderStr: orderStr
}, function(result) {
callback(result)
});
});
}
調(diào)用
util.alipayApp(res.data.data,function(result){
//這里可做一些支付結(jié)果判斷和跳轉(zhuǎn)
})
3.微信公眾號支付
微信瀏覽器內(nèi)調(diào)起微信支付
有兩種方式
3.1 微信內(nèi)置js對象 WeixinJSBridge
官方文檔 https://pay.weixin.qq.com/wiki/doc/api/index.html 點擊公眾號支付-微信內(nèi)H5調(diào)起支付
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":"wx2421b1c4370ec43b", //公眾號名稱痹屹,由商戶傳入
"timeStamp":"1395712654", //時間戳,自1970年以來的秒數(shù)
"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();
}
參數(shù)由后端接口提供
將上述代碼進行封裝:
//微信瀏覽器支付
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)
}
);
}
調(diào)用:
util.wxpay(res.data.data,function(payResult){
if(payResult.err_msg == "get_brand_wcpay_request:ok" ){
}
})
3.2引入微信jssdk調(diào)用里面的內(nèi)置方法發(fā)起支付
這種比較麻煩,沒試過聊替,有興趣可看一下
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地址進行跳轉(zhuǎn)就可以了佃牛。
//在調(diào)起支付的頁面監(jiān)聽從其他頁面返回的事件淹辞,進行頁面刷新等
document.addEventListener("visibilitychange", function() {
//
});
5.微信公眾號的支付寶支付
vue實現(xiàn)-微信網(wǎng)頁中喚起支付寶支付
(后面會寫一下銀聯(lián)支付)