微信支付——点金计划商家小票显示无法获取订单信息

阳光总在山坡后

已于 2022-09-28 14:16:23 修改

阅读量3.1k

点赞数 3

文章标签：微信 html5 前端 javascript jquery

于 2022-09-28 14:01:02 首次发布

本文链接：https://blog.csdn.net/qq_35038924/article/details/127087728

版权

项目场景：

因项目需求需要对接微信公众号支付，支付完成返回指定页面，根据微信官方发布的公告，现在支付完成以后不能直接跳转指定页面了，需要加入点金计划，跳到小票页面，再通过小票页面返回商家指定的页面

问题描述

加入点金计划支付完成跳转商家小票页面出现了问题；

原因分析：

点金计划商家小票部分不显示，提示“无法获取订单信息”页面可以按以下几个步骤检查：

1、已打开特约商户的商家小票及点金计划开关

2、商家小票页面需调用父页面“onIframeReady事件”的jsapi，具体请查看商家小票开发指引

3、从加载商家小票到调用JSAPI之间的用时不可超过3s

4、调试时，扫描二维码的微信号和支付该笔测试订单的微信号需为同一个

5、商家小票页面可正常访问

6、检查商家小票请求的Response Headers中X-Frame-Options是否允许payapp.weixin.qq.com访问

7、如果是使用VUE，onIframeReady不能放在created里执行

8、如果上述方法都不行，请先编写一个最简单的demo页面，看看demo页面是否成功

9、商家URL是否有进行重定向，是否重定向到http的链接点金计划商家小票部分不显示，提示“无法获取订单信息”页面可以按以下几个步骤检查：

根据官方的提示检查了也没找到原因，逛微信开发者社区找到了一些新发现

解决方案：

第一个：js代码尽量放在head标签里边；

第二个：

parent.postMessage(postData,'https://payapp.weixin.qq.com')

改成

top.postMessage(postData, '*')

第三个：先把ajax请求全部注释了，看看能否打开小票页面；

下边代码是一个静态页面，如果出现无法加载订单信息的话，可以先用我这段代码试试看看能不能打开小票页面

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="origin">
    <meta name="viewport"
        content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <title>支付完成</title>
	<script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js">
    </script>
    <style>
        body {
            font-family: PingFang SC, "Helvetica Neue", Arial, sans-serif;
        }

        .order_box {
            text-align: center;
			padding-top: 60px;
        }

        .order_box .bussiness_avt img {
            width: 68px;
            height: 68px;
            border-radius: 100%;
        }

        .b_name {
            font-size: 14px;
            font-weight: 500;
            color: #999999;
            margin-top:14px;
        }

        .btns {
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            -webkit-justify-content: space-between;
            /* 页面底下有两个按钮时，放开这个来进行均匀排版 */
            /* justify-content: space-between; */
			/* 只有一个按钮就居中处理 */
            justify-content: center;
            margin-top: 80px;
        }

        .btns .btn {
            width: 147px;
            height: 35px;
            line-height: 35px;
            font-size: 14px;
            border-radius: 39px;
            border: 1px solid #5a9cf7;
            box-sizing: border-box;
            color: #CD2314;
        }

        .btns .btn.detail {

            background:#5a9cf7;
            color: #fff;
        }
    </style>
	<script>
		/***
		 * @description Dom树执行完后加载 {所有订单必须响应 onIframeReady 事件，否则无法正常进行商家小票的展示。}
		 * @param   action 事件名称：onIframeReady 
		 * @param   displayStyle：1.展示商家小票 SHOW_CUSTOM_PAGE 2.展示官方小票 SHOW_OFFICIAL_PAGE
		 * @param   height 范围 600-960px 默认高度 600px；
		 * 具体看样商家小票 开发指引 https://wx.gtimg.com/pay/download/goldplan/goldplan_developer_guideline.pdf
		 **/
		 // 初始化
		    //var vConsole = new VConsole();
		$(function(){
			// 初始化小票
			let initData ={action:'onIframeReady',displayStyle:'SHOW_CUSTOM_PAGE'};
			let postData = JSON.stringify(initData);
			 //与ifarem  交互
			 //parent.postMessage(postData,'https://payapp.weixin.qq.com')
			top.postMessage(postData, '*')
		});
		/***
		 * 跳转至其他页面
		 ***/
		function Back(){
			const showUrl ='https://www.baidu.com?state=0';
		    let mchData ={action:'jumpOut', jumpOutUrl:showUrl}
		    let postData = JSON.stringify(mchData)
		    //parent.postMessage(postData,'https://payapp.weixin.qq.com')
			top.postMessage(postData, '*')
		}
		 
		// 获取地址栏参数
		function getUrlParam(name) {
		    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
		    var r = window.location.search.substr(1).match(reg); //匹配目标参数
		    if (r != null) return unescape(r[2]);
		    return null; //返回参数值
		}
	    
	</script>
</head>

<body>
<div class="order_box">
    <div class="bussiness_avt">
        <img id="b_avt" src="./images/img.png"
             alt="">
    </div>
    <div class="b_status" id="b_status">
        支付成功
    </div>
    <div class="btns">
        <div id="toOrder" class="btn detail" onclick="Back()">返回商户</div>
    </div>
</div>
</body>
</html>