非微信浏览器，h5跳转mwebUrl调用微信支付

h5调用微信支付

在微信浏览器中中可以直接使用weixin-js-sdk给出的api实现调用支付

微信内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();
}

在非微信浏览器中怎么实现微信支付呢

由服务端生成mwebUrl，前端进行跳转，自动调起微信客户端进行支付，这个跳转需要携带用户信息referer，普通的跳转window.location.href即可实现携带referer，但是ie浏览器不会带上referer，需要自创a连接进行跳转，实现如下

if (get('isIE')) {
	const link = document.createElement('a')
	link.style.display = 'none'
	link.href = get('isSafari') ? `${mwebUrl}&redirect_uri=${redirectUrl}` : `${mwebUrl}`
	document.body.appendChild(link)

	link.click()
	link.remove()
} else {
	window.location.href = get('isSafari') ? `${mwebUrl}&redirect_uri=${redirectUrl}` : `${mwebUrl}`
}

正常流程用户支付完成后会返回至发起支付的页面，但是某些情况下并不会返回，例如safari浏览器，iphone7的qq打开的h5，这个时候需要指定返回的页面，则在mwebUrl后面拼上redirect_url参数，来指定支付回调页面