微信h5支付前端代码

更加准确的描述点击如下链接

https://www.cnblogs.com/dandan1924/p/8359620.html

一.首先，需要确认是否在微信开通了这个服务，如果开通了，如下图

二.就是前段和后台互调。

??微信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");//用户点击就清cookieThis.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日写的，后续可能已经有开发人员相处更合理的优化方案