美文网首页
【移动支付】支付宝/微信聚合支付

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

作者: 我的名字违规了 | 来源:发表于2018-10-23 10:45 被阅读0次

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

  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

    1. 唤醒支付
    // 发起支付宝支付
        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 ? '支付成功' : '支付失败';
                });
            }
        }
    

相关文章

网友评论

      本文标题:【移动支付】支付宝/微信聚合支付

      本文链接:https://www.haomeiwen.com/subject/tbyozftx.html