H5页面进行微信支付和支付宝支付

最新推荐文章于 2024-09-06 18:02:25 发布

热心网友池小先

最新推荐文章于 2024-09-06 18:02:25 发布

阅读量403

点赞数

文章标签：微信 js html5

本文链接：https://blog.csdn.net/weixin_47560151/article/details/134641585

版权

  function payEnvHandle() {
  	// 判断H5页面处于什么环境（微信环境还是支付宝环境-用微信扫码还是支付宝扫）
	var isInWeiXinApp = window.navigator.userAgent.toLowerCase().search(/MicroMessenger/i) > -1;
    var isInAliPayApp = window.navigator.userAgent.toLowerCase().search(/AlipayClient/i) > -1;
  }

微信支付

  微信环境，首先获取这个url链接是否有授权的code
    1.如果有直接生成订单信息进行微信支付
    2.如果没有code,则进行微信授权进行重定向

 	/* 微信环境 */
    var code = GetQueryString('code');
    if (!code) {
      // 微信code获取
      weixinAuth();
    }
      
  	// 获取URL中参数值
 	function GetQueryString(name) {
    	var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
    	var r = window.location.search.substr(1).match(reg);
    	if (r != null) return decodeURI(r[2]);
    	return null;
  	}

  	// 微信授权
  	function weixinAuth() {
    	let urlNow = encodeURIComponent(window.location.href);
    	let scope = 'snsapi_base'; //snsapi_userinfo   //静默授权 用户无感知
    	let appid = "11111111111111";  //公众号appid
    	let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=STATE&connect_redirect=1#wechat_redirect`;
    	window.location.replace(url);
  	}

 生成订单信息得到微信位置所需要的支付参数，然后唤醒微信支付

  //data为支付所需的参数
  function wxPay(data) {
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener(
                    "WeixinJSBridgeReady",
                    onBridgeReady(data),
                    false
                );
            } else if (document.attachEvent) {
                document.attachEvent("WeixinJSBridgeReady", onBridgeReady(data));
                document.attachEvent("onWeixinJSBridgeReady", onBridgeReady(data));
            }
        } else {
            onBridgeReady(data);
        }
    }

	// 拉起微信支付
    function onBridgeReady(data) {
        WeixinJSBridge.invoke(
            "getBrandWCPayRequest", {
                "appId": data.appId,
                "timeStamp": data.timeStamp,
                "nonceStr": data.nonceStr,
                "package": data.package,
                "signType": data.signType,
                "paySign": data.paySign
            },
            function (res) {
                // get_brand_wcpay_request
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                }else{}
            }
        );
    }

支付宝支付

 支付宝环境（参考其他的聚合支付流程，一直查询订单状态，重定向到阿里支付）

/* 支付方式-支付宝 */
  function aliPay() {
    var timer = setInterval(function () {
                queryOrder();
              }, 5000);
    window.location.href =
        "alipays://platformapi/startapp?saId=10000007&qrcode=''"
  }

  // 查询订单详情 -- 判断支付状态是否支付成功
  function queryOrder(){

  }