【移动支付】支付宝/微信聚合支付

应用场景：聚合支付，扫一个二维码，在支付宝和微信内唤醒支付。

1. 判断当前平台

       // 判断平台
       function checkClient() {
           var userAgent = window.navigator.userAgent;
           if (/MicroMessenger/.test(userAgent)) {
               // 微信
               _wxPrePay()
           } else if (/AlipayClient/.test(userAgent)) {
               // 阿里
               _aliPrePay()
           } else {
               alert('请使用微信或支付宝打开');
           }
       }
   

2. 微信支付
   网页授权

   1. 配置域名
   2. 请求scope_code
   3. 请求后台必要参数，openId、生成订单等放在后台处理
   4. 唤醒支付

   // 支付准备，获取authCode
   function _wxPrePay() {
           appId = urlParams.wxAppId;
           accessCode = urlParams.code;
           // code不存在
           if (!accessCode) {
               var fromUrl = location.href;
               // scope=snsapi_base  为静默授权，用户不会察觉
               // 若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。
               var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?' +
                   'appid=' + appId +
                   '&redirect_uri=' + encodeURIComponent(fromUrl) +
                   '&response_type=code' +
                   '&scope=snsapi_base' +
                   '&state=STATE' +
                   '#wechat_redirect';
               location.href = url;
           } else {
               // 获取请求参数
               var url = location.origin + ajaxPath;
               var params = {
                   outTradeNo: orderNo,
                   code: accessCode
               };
               _getPaymentParams(url, params, _wxPay)
           }
       }
   
       // 发起微信支付
       function _wxPay(res) {
           // 判断WeiXinJSBridge 是否注入
           if (window.WeixinJSBridge) {
               _onWXBridgeReady();
           } else {
               document.addEventListener('WeixinJSBridgeReady', _onWXBridgeReady, false);
           }
           //微信支付
           function _onWXBridgeReady() {
               /**
                * @ options    appId: 公众号id
                *              timeStamp: 时间戳，秒
                *              nonceStr: 随机字符串
                *              package: prepay_id
                *              signType: 签名方式，默认"MD5"
                *              paySign: 微信签名
                */
               WeixinJSBridge.invoke(
                   'getBrandWCPayRequest', {
                       "appId": appId,
                       "timeStamp": res.timeStamp,
                       "nonceStr": res.nonceStr,
                       "package": res.package,
                       "signType": res.signType,
                       "paySign": res.paySign
                   },
                   function (res) {
                      // res 包含支付成功与否信息
                   });
           }
       }
   
   

3. 支付宝支付
   思路跟阿里支付基本一致
   网页授权及获取auth_code
   1.获取auth_code

   https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=APPID&scope=SCOPE&redirect_uri=ENCODED_URL

   4. 唤醒支付

   // 发起支付宝支付
       function _aliPay(res) {
           if (window.AlipayJSBridge) {
               _onAliBridgeReady();
           } else {
               document.addEventListener('AlipayJSBridgeReady', _onAliBridgeReady, false);
           }
   
           function _onAliBridgeReady() {
               /**
                * @options     tradeNo: 必传，交易订单号
                *              bizType: 非必传，默认为 “trade”
                *              bizSubType: 非必传，默认为 “”
                *              bizContext: 非必传，默认为H5启动选项(safePayContext)
                */
               AlipayJSBridge.call("tradePay", {
                   tradeNO: res.tradeNo
               }, function (result) {
                   var msg = '9000' === result.resultCode ? '支付成功' : '支付失败';
               });
           }
       }