根据参考:https://developers.weixin.qq.com/community/develop/doc/000ae6b1a98cc099e64ba71f456009
1、已打开特约商户的商家小票及点金计划开关
能跳转到小票页面,肯定是开了的。这个不做截图
2、商家小票页面需调用父页面“onIframeReady事件”的jsapi,具体请查看商家小票开发指引
如图,已调用
3、从加载商家小票到调用JSAPI之间的用时不可超过3s
第二点中,只在head调用了jgoldplan-1.0.0.js
4、调试时,扫描二维码的微信号和支付该笔测试订单的微信号需为同一个
未使用商家小票调试工具,是在测试环境支付后查看也不行
5、商家小票页面可正常访问
如图,可以正常访问
6、检查商家小票请求的Response Headers中X-Frame-Options是否允许payapp.weixin.qq.com访问
如图 已添加允许payapp.weixin.qq.com
7、如果是使用VUE,onIframeReady不能放在created里执行
没有使用vue
8、如果上述方法都不行,请先编写一个最简单的demo页面,看看demo页面是否成功
使用一个只有body一段文字的demo,没有任何js和引入,也是显示无法获取订单信息
9、商家URL是否有进行重定向,是否重定向到http的链接
代码中没有重定向链接
把你url发出来
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>商家小票展示</title> <!-- 引入点金计划JSSDK --> <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: Arial, sans-serif; background-color: #f5f5f5; padding: 20px; } .receipt { max-width: 600px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .receipt-header { text-align: center; margin-bottom: 20px; } .receipt-header h1 { margin: 0; font-size: 24px; color: #333; } .receipt-details { margin-bottom: 20px; } .receipt-details h2 { margin-bottom: 10px; font-size: 18px; color: #666; } .receipt-details p { margin: 5px 0; font-size: 16px; color: #333; } .footer { text-align: center; margin-top: 30px; font-size: 14px; color: #999; } </style> <script> // 页面完全渲染完毕后,发送 onIframeReady 事件通知父页面 window.onload = function() { let mchData = { action: 'onIframeReady', displayStyle: 'SHOW_CUSTOM_PAGE', height: 600 // 可根据需求自定义高度,范围600px到960px }; // 将数据转化为 JSON 字符串 let postData = JSON.stringify(mchData); // 通过 postMessage 通知父页面 parent.postMessage(postData, 'https://payapp.weixin.qq.com'); console.log('onIframeReady 事件已发送:', postData); }; </script> </head> <body> <div class="receipt"> <div class="receipt-header"> <h1>商家小票</h1> </div> <div class="receipt-details"> <h2>订单信息</h2> <p><strong>商户号:</strong> 我是商户号</p> <p><strong>订单号:</strong> 我是订单号</p> <p><strong>交易单号:</strong> 我是微信支付单号</p> </div> <div class="footer"> 感谢您的购买! </div> </div> </body> </html>
// 将数据转化为 JSON 字符串
let postData = JSON.stringify(mchData);
// 通过 postMessage 通知父页面
parent.postMessage(postData, 'https://payapp.weixin.qq.com');
console.log('onIframeReady 事件已发送:', postData);
};
</script>
</head>
<body>
<div class="receipt">
<div class="receipt-header">
<h1>商家小票</h1>
</div>
<div class="receipt-details">
<h2>订单信息</h2>
<p><strong>商户号:</strong> 我是商户号</p>
<p><strong>订单号:</strong> 我是商户订单号</p>
<p><strong>交易单号:</strong> 我是微信支付单号</p>
</div>
<div class="footer">
感谢您的购买!
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商家小票展示</title>
<!-- 引入点金计划JSSDK -->
<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: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}
.receipt {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
感谢您的购买!