微信web支付方式梳理

微信支持的支付产品

通过这张图，能够很清晰的看到微信总共通过五款产品覆盖了各种各样的支付场景，这边想重点梳理一下JSAPI支付、H5支付和JSSDK支付几种web支付方式。

JSAPI支付

使用场景：微信环境下，利用内置的对象发起支付，所以一定要是利用微信浏览器打开的页面。文档地址：JSAPI支付示例代码如下：

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号ID，由商户传入     
         "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();
}

JSSDK`支付

使用场景：微信环境下，严格意义上这不算一种独立的支付方式，只是JSSDK文件中包含了一个支付能力而已，所以在微信公众号下既可以使用JSAPI支付也可以使用JSSDK支付，只是如果没用到其他SDK能力的话，使用JSAPI支付会简单一些。文档地址：微信支付示例代码：

wx.chooseWXPay({
  timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: '', // 支付签名随机串，不长于 32 位
  package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
  signType: '', // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
  paySign: '', // 支付签名
  success: function (res) {
    // 支付成功后的回调函数
  }
});

H5支付

使用场景：非微信环境下，例如第三方浏览器里或者APP内嵌的webview中（这种方式官方不提倡，但是可以使用，目前使用起来没有问题，当然有条件最好接入APP支付）文档地址：H5支付示例代码：

// requestURI 是后端组装好的微信支付地址，在浏览器直接访问会唤起微信APP调起支付
// redirect_url 支付成功之后的回调地址
const { requestURI } = payData;
window.location.href = `${requestURI}&redirect_url=${encodeURIComponent(redirect_url)}`;

总结

如果在H5页面内想发起微信支付，根据调起支付的场景来划分，如果在微信内，可以选择JSAPI和JSSDK支付；如果在微信外，只能使用H5支付
在小程序的webview内，因为官方屏蔽了支付功能，JSAPI和JSSDK两种支付方式都是不能使用的，只能跳回小程序页面使用微信小程序支付。