最新消息: USBMI致力于为网友们分享Windows、安卓、IOS等主流手机系统相关的资讯以及评测、同时提供相关教程、应用、软件下载等服务。

在微信中如何接入支付宝的提示打开浏览器样式:方法二简易方法

业界 admin 9浏览 0评论


简易方法思路大致如下:

修改现在商品支付确认页面的代码,参照pay.html页面自行编写一个新的html(alipay-weixinbrowser-prompt.html)用于适应alipayapi.jsp的业务逻辑。


商品支付确认页面的支付按钮点击事件代码:

function pay() {

	var ua = navigator.userAgent.toLowerCase();

	var orderStr = sessionStorage.getItem("order_object");
	var order_object = $.parseJSON(orderStr);

	//在微信中,跳转页面至alipay-weixinbrowser-prompt.html浏览器提示页,此页面是pay.html的改造页面,带入参数商品订单id
	if (ua.indexOf('micromessenger') != -1) {
		window.location.href = "alipay-weixinbrowser-prompt.html?orderid=" + order_object.id;
		//不在微信中,直接跳转alipayapi.jsp页面,进行支付业务处理
	} else {
		//设定提交参数alipayapi.jsp页面会根据传入的id查询订单后,进行支付宝的支付请求操作</span>
		$("#alipayId").attr("action", WebServices.getAliPayUrl() + "mobileWeb/alipayapi.jsp");
		//隐藏商品订单id
		$("#id_trade_no").val(order_object.id);
		//提交
		$("#alipayId").submit();
	}
}


alipay-weixinbrowser-prompt.html的body部分代码如下,此页面是通过pay.html改造而来

<body>
<div class="J-weixin-tip weixin-tip">
    <div class="weixin-tip-content">
        请在菜单中选择在浏览器中打开,<br/>
        以完成支付
    </div>
</div>
<div class="J-weixin-tip-img weixin-tip-img"></div>
<form name=alipayment id="alipay-form" action="" method=post target="_blank">
     <input type="hidden" name="glass_trade_no" id="id_trade_no">
</form>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/WebServices.js"></script>
<script>
	var ua = navigator.userAgent.toLowerCase();
	var tip = document.querySelector(".weixin-tip");
	var tipImg = document.querySelector(".J-weixin-tip-img");
	if (ua.indexOf('micromessenger') != -1) {
		tip.style.display = 'block';
		tipImg.style.display = 'block';
		if (ua.indexOf('iphone') != -1 || ua.indexOf('ipad') != -1 || ua.indexOf('ipod') != -1) {
			tipImg.className = 'J-weixin-tip-img weixin-tip-img iphone'
		} else {
			tipImg.className = 'J-weixin-tip-img weixin-tip-img android'
		}
	} else {
		//获取url中的商品订单id
		var orderid = $.getParam("orderid");
		//alipayapi.jsp页面会根据传入的id查询订单后,进行支付宝的支付请求一系列操作
		$("#alipay-form").attr("action", WebServices.getAliPayUrl() + "mobileWeb/alipayapi.jsp");
		$("#id_trade_no").val(orderid);
		$("#alipay-form").submit();
	}
</script>
</body>



简易方法思路大致如下:

修改现在商品支付确认页面的代码,参照pay.html页面自行编写一个新的html(alipay-weixinbrowser-prompt.html)用于适应alipayapi.jsp的业务逻辑。


商品支付确认页面的支付按钮点击事件代码:

function pay() {

	var ua = navigator.userAgent.toLowerCase();

	var orderStr = sessionStorage.getItem("order_object");
	var order_object = $.parseJSON(orderStr);

	//在微信中,跳转页面至alipay-weixinbrowser-prompt.html浏览器提示页,此页面是pay.html的改造页面,带入参数商品订单id
	if (ua.indexOf('micromessenger') != -1) {
		window.location.href = "alipay-weixinbrowser-prompt.html?orderid=" + order_object.id;
		//不在微信中,直接跳转alipayapi.jsp页面,进行支付业务处理
	} else {
		//设定提交参数alipayapi.jsp页面会根据传入的id查询订单后,进行支付宝的支付请求操作</span>
		$("#alipayId").attr("action", WebServices.getAliPayUrl() + "mobileWeb/alipayapi.jsp");
		//隐藏商品订单id
		$("#id_trade_no").val(order_object.id);
		//提交
		$("#alipayId").submit();
	}
}


alipay-weixinbrowser-prompt.html的body部分代码如下,此页面是通过pay.html改造而来

<body>
<div class="J-weixin-tip weixin-tip">
    <div class="weixin-tip-content">
        请在菜单中选择在浏览器中打开,<br/>
        以完成支付
    </div>
</div>
<div class="J-weixin-tip-img weixin-tip-img"></div>
<form name=alipayment id="alipay-form" action="" method=post target="_blank">
     <input type="hidden" name="glass_trade_no" id="id_trade_no">
</form>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/WebServices.js"></script>
<script>
	var ua = navigator.userAgent.toLowerCase();
	var tip = document.querySelector(".weixin-tip");
	var tipImg = document.querySelector(".J-weixin-tip-img");
	if (ua.indexOf('micromessenger') != -1) {
		tip.style.display = 'block';
		tipImg.style.display = 'block';
		if (ua.indexOf('iphone') != -1 || ua.indexOf('ipad') != -1 || ua.indexOf('ipod') != -1) {
			tipImg.className = 'J-weixin-tip-img weixin-tip-img iphone'
		} else {
			tipImg.className = 'J-weixin-tip-img weixin-tip-img android'
		}
	} else {
		//获取url中的商品订单id
		var orderid = $.getParam("orderid");
		//alipayapi.jsp页面会根据传入的id查询订单后,进行支付宝的支付请求一系列操作
		$("#alipay-form").attr("action", WebServices.getAliPayUrl() + "mobileWeb/alipayapi.jsp");
		$("#id_trade_no").val(orderid);
		$("#alipay-form").submit();
	}
</script>
</body>


发布评论

评论列表 (0)

  1. 暂无评论