<!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>

有用

17

最新提问
全部
文章
问答

置顶小程序前端支付成功后，返回支付失败，实际上是成功的？

置顶商家转账到零钱只能用V3接口了吗？v2接口调用返回没有权限。

置顶申请交易账单怎么发请求？

置顶使用的nodejs的库，签名与平台下载的签名控件实际签名不一致？

置顶小程序商户号的订单已经退款，但小程序后台还是显示待发货？

置顶我当前有一个微信商户（已开通支付功能），该商户已关联了一个公众号和小程序，是否需要设计2套支付逻辑？

置顶小程序下单未支付，后台改价后支付失败，调用关闭订单的方法也失效？

置顶微信小程序支付结果通知收不到参数，需要怎么处理？

置顶微信支付回调已经给微信返回xml数据了微信还调我接口是什么情况？

置顶关于调用第三方支付得问题？

置顶微信退款接口调用返回"订单不存在"的问题?商户号和appid确认无误

置顶微信支付后，订单查询，为什么直接硬编码代入正确的订单号调用接口，返回微信订单号非法？

置顶微信支付支付功能受限是什么原因？

置顶商家批次转账到零钱的问题？

置顶微信支付V3接口为什么提示证书序列号不对？

置顶在微信小程序中内嵌的h5需要调用微信支付，跳转到小程序页调用支付，出现支付签名验证失败，是什么问题？

置顶微信支付部分金额申请退款，提示：订单金额或退款金额与之前请求不一致，请核实后再试，怎么解决？

置顶调用支付JSAPI缺少参数: total_fee,到底是哪里出问题了?

置顶微信卡包-票证-发票-发票类型问题

置顶点金计划商家小票页面显示无法获取订单信息？

选择发帖类型

最新提问全部文章问答

置顶小程序前端支付成功后，返回支付失败，实际上是成功的？

置顶商家转账到零钱只能用V3接口了吗？v2接口调用返回没有权限。

置顶申请交易账单怎么发请求？

置顶使用的nodejs的库，签名与平台下载的签名控件实际签名不一致 ？

置顶小程序 商户号的订单已经退款，但小程序后台还是显示待发货？

置顶我当前有一个微信商户（已开通支付功能），该商户已关联了一个公众号和小程序，是否需要设计2套支付逻辑？

置顶小程序下单未支付，后台改价后支付失败，调用关闭订单的方法也失效？

置顶微信小程序支付结果通知收不到参数，需要怎么处理？

置顶微信支付回调 已经给微信返回xml数据了 微信还调我接口 是什么情况？

置顶关于调用第三方支付得问题？

置顶微信退款接口调用返回"订单不存在"的问题?商户号和appid确认无误

置顶微信支付后，订单查询，为什么直接硬编码代入正确的订单号调用接口，返回微信订单号非法？

置顶微信支付 支付功能受限是什么原因？

置顶商家批次转账到零钱的问题？

置顶微信支付V3接口为什么提示证书序列号不对？

置顶在微信小程序中内嵌的h5需要调用微信支付，跳转到小程序页调用支付，出现支付签名验证失败，是什么问题？

置顶微信支付部分金额申请退款，提示：订单金额或退款金额与之前请求不一致，请核实后再试，怎么解决？

置顶调用支付JSAPI缺少参数: total_fee,到底是哪里出问题了?

置顶微信卡包-票证-发票-发票类型问题

置顶点金计划 商家小票页面显示无法获取订单信息？

选择发帖类型

最新提问
全部
文章
问答

置顶使用的nodejs的库，签名与平台下载的签名控件实际签名不一致？

置顶小程序商户号的订单已经退款，但小程序后台还是显示待发货？

置顶微信支付回调已经给微信返回xml数据了微信还调我接口是什么情况？

置顶微信支付支付功能受限是什么原因？

置顶点金计划商家小票页面显示无法获取订单信息？