一.首先,需要确认是否在微信开通了这个服务,如果开通了,如下图
二.就是前段和后台互调。
??微信h5支付官网地址:https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4
根据官网解释,前段要做的事情很简单:就是在用户点击微信支付按钮的时候,跳转到后台返回的MWEB_URL即可。
但是,官网说:
注意:
1.需对redirect_url进行urlencode处理
2.由于设置redirect_url后,回跳指定页面的操作可能发生在:1,微信支付中间页调起微信收银台后超过5秒 2,用户点击“取消支付“或支付完成后点“完成”按钮。因此无法保证页面回跳时,支付流程已结束,所以商户设置的redirect_url地址不能自动执行查单操作,应让用户去点击按钮触发查单操作。回跳页面展示效果可参考下图
也就是说跳转MWEB_URL打开微信支付页面和MWEB_URL返回我们自己的页面是同时发生的。那么怎么返回支付成功页面呢?官网给出的方案是给一个提示框,让用户点击再去判断有没有支付
ps:经过测试:1.小米的没有返回支付成功页面,直接返回了支付选择页面,没有任何反应
2.华为有提示框,但是他们没有直接跳转url,是通过form表单提交去跳转的。这样导致的结果是:ios跳转微信支付页面会有一个弹窗,如果是ios的用户点了取消,那么再次点击,也去不了支付页面,除非刷新页面。而安卓用户点击了取消,必须清缓存才能去支付成功页面。体验很不好。
我们的解决方案:
if(paytype==2){//微信支付
if(isWeiXin()){//微信公众号支付
var apiConfig=back.data.wxpaysignmap;
// alert(JSON.stringify(apiConfig));
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":apiConfig.appId,//公众号名称,由商户传入
"timeStamp":apiConfig.timeStamp,//时间戳,自1970年以来的秒数
"nonceStr":apiConfig.nonceStr,//随机串
"package":apiConfig.package,
"signType":apiConfig.signType,//微信签名方式:
"paySign":apiConfig.paySign //微信签名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ) {
window.location.href="paysuccess.html?tradeno="+tradeno;//到支付成功页面
}else if(res.err_msg == "get_brand_wcpay_request:fail" || res.err_msg=="get_brand_wcpay_request:cancel"){
This.isAjax=true;
}
}
);
}
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();
}
This.initQuestSuc(back.data.tradeno);
This.isAjax=true;
return;
}
if(IsPC()){//pc端的微信支付
//微信支付
This.returnpay=true;
$(".paylist_tit").addClass("hide");
$(".pay_tit").html("微信支付");
$(".paytype_con").addClass("hide");
$(".ercodecon").fadeIn(100);
$("#ercode").qrcode(back.data.wxpaycodeurl);
This.canvasInter=setInterval(function(){
if($("#ercode").find("canvas").length>0){
var canvas=$("#ercode").find("canvas").get(0);
/***<p>苹果用户保存图中二维码,发送至微信会话<br>在微信会话中长按识二维码完成支付</p>****/
var tips_html='<div class="wechat_tips"><p>1. 请长按二维码或手机截图先保存至相册<br>2. 打开微信客户端,将二维码图片发送至微信会话<br>3. 在微信会话中打开并长按识别二维码完成支付</p></div>';
if(IsPC()){
tips_html='<div class="wechat_tips"><p>请打开微信客户端扫描二维码支付</p></div>';
}
$("#ercode").html('<img src="'+canvas.toDataURL("image/png")+'" style="width:2.8rem; height:2.8rem; padding:5px; display:block; background:#fff; margin:0 auto;" />'+tips_html);
This.canvasInter=null;
clearInterval(This.canvasInter);
}
})
This.isercode=true;
This.initQuestSuc(back.data.tradeno);
}else{//重点:第一步:h5微信支付
setTimeout(function() {
$.Dialog({//出弹窗。让用户确认是否支付成功(一开始在此处出弹窗,但是经过测试发现,ios系统的浏览器不适用,只适用于安卓浏览器。所以用了当前url和redirect_url区分开的方法=====>总之:这个地方弹窗可删除)
cname:"owhat_dialog",
title:"<em style='font-weight:500;padding-top:0.2rem;display:block;'>请确认支付是否已成功</em>",
tips:"<p style='text-align:left;padding-top:0.1rem;'>1.如果您已打开微信且完成支付,请点击“我已支付”按钮</p><p style='text-align:left;padding-top:0.1rem;'>2.如果您没有安装微信支付客户端,请点击“取消”并选择其他支付方式付款</p>",
close_btn:false,
confirm_btn:true,//确认按钮
cancel_btn:true,//取消按钮
confirm_art:"我已支付",
cancel_art:"取消",
cancel_call:function(){//用户点击取消
$.CloseDialog();
clearCookie("h5weixinpay");//用户点击就清cookie
},
confirm_call:function(){//用户点击确认支付
$.CloseDialog();
clearCookie("h5weixinpay");//用户点击就清cookie
This.ispaysuccess(back.data.tradeno);//去后台调接口询问是否成功。
}
});
}, 1000);
setCookie("h5weixinpay","1",1);//1表示没有弹窗,0表示弹窗了,存贮一天(判断是否出弹窗)
window.location.href = back.data.wxpaymweburl+"&redirect_url=url;//此处写上需要跳转的url(此处的url需要和当前页面的url区分开来,以此来判断如果是这个链接就出弹窗,然后用存的
h5weixinpay的判断是否显示弹窗) } }
第二步:已进入页面就判断是否有cookie。然后判断出弹窗
if(!isWeiXin()){
var h5weixinpay=getCookie("h5weixinpay") ? getCookie("h5weixinpay") : null;
if(h5weixinpay!=null&&This.tradeno!=null){//微信外支付返回判断(如果连接上有tradeno并且有cookie)
$.Dialog({
cname:"owhat_dialog",
title:"<em style='font-weight:500;padding-top:0.2rem;display:block;'>请确认支付是否已成功</em>",
tips:"<p style='text-align:left;padding-top:0.1rem;'>1.如果您已打开微信且完成支付,请点击“我已支付”按钮</p><p style='text-align:left;padding-top:0.1rem;'>2.如果您没有安装微信支付客户端,请点击“取消”并选择其他支付方式付款</p>",
close_btn:false,
confirm_btn:true,//确认按钮
cancel_btn:true,//取消按钮
confirm_art:"我已支付",
cancel_art:"取消",
cancel_call:function(){
$.CloseDialog();
clearCookie("h5weixinpay");
},
confirm_call:function(){
$.CloseDialog();
clearCookie("h5weixinpay");
This.ispaysuccess(This.tradeno);//去后台调接口询问是否成功。
} }); } }
注意:本文章是从其他网站迁移过来的,是 2018年1月26日写的,后续可能已经有开发人员相处更合理的优化方案