微信内置浏览器h5支付和微信外部浏览器后支付

一、H5微信支付

h5支付可以分为微信内置浏览器支付和非内置浏览器支付

微信内置浏览器支付：使用微信 JS-SDK 调用微信支付

微信外部浏览器支付：由后端返回一个微信支付的url地址

1.支付浏览器判断

首先判断是内置浏览器还是非内置浏览器

export function isWeChat() {
    var ua = window.navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
    } else {
        return false;
    }
}

2.根据浏览器不同选用不同的支付

2.1内置浏览器支付

使用微信 JS-SDK ,调用微信支付请求接口wx.chooseWXPay接口

• 通过 config 接口注入权限验证配置

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

• 使用微信 JS-SDK 接口 chooseWXPay 调用微信支付

wx.chooseWXPay({
   appId:" ",//商户申请的公众号对应的AppID，由微信支付生成
   timeStamp:" ", //时间戳
   nonceStr:" ", //随机字符串
   package:" ", //JSAPI下单接口返回的prepay_id参数值
   signType:" ", //签名类型，默认为RSA，仅支持RSA
   paySign:" ", //签名，使用字段AppID、timeStamp、nonceStr、package计算得出的签名值
   success:()=>{
   	//成功后的回调
   }
})

2.2非内置浏览器支付

根据订单id后端生成微信支付的网址，当成功支付和取消支付进行重定向

window.location.href = `${res1.data.data.mwebUrl}&redirect_url=重定向地址`;