微信支付成功后，页面自动关闭，如果想自定义需要开通点金计划和商家小票

不老刘

于 2025-02-27 10:06:10 发布

阅读量413

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端工作记事文章标签：微信

本文链接：https://blog.csdn.net/kof820/article/details/145895668

工作记事同时被 2 个专栏收录

138 篇文章

订阅专栏

前端

31 篇文章

订阅专栏

其实很早就知道这个点金计划，但是一直没有做，正常微信支付成功后，页面关闭了，也没太大影响，因为返回到服务号里，也会收到缴费成功的推送消息。

但是最近工作中遇到个新需求，微信支付成功后，需要引导用户继续去支付配送费用，由于是支付到不同商户的，所以还不能合并到一块一次付款。就只能去开通点金计划和商家小票了。

商家小票：页面底部为微信投放的广告信息，上半部分提供iframe框展示银商标准的支付结果页面（C扫B）或商户指定页面（公众号支付，跳转至下单接口中商户传入的returnURL），直接上页面代码~

<!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" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"></script>
    <script src="./static/js/jquery-3.5.1.min.js"></script>
	<style>
		body {font-family: PingFang SC, "Helvetica Neue", Arial, sans-serif;}
		.order_box {text-align: center;}
		.b_name {font-size: 14px;font-weight: 500;color: #333333;margin-top: 6px;}
		.col_box {margin-top: 35px;}
		.col_box .col {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;font-size: 14px;color: #333;margin-bottom: 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;margin-top: 31px;}
		.btns .btn {width: 147px;height: 35px;line-height: 35px;font-size: 14px;border-radius: 39px;border: 1px solid #CD2314;box-sizing: border-box;color: #CD2314;margin: 0px auto;cursor:pointer}
	</style>
</head>
<body>
	<div class="order_box">
		<div class="b_name" id="b_name" style="margin-top: 35px; font-size: 25px;">页面标题</div>
		<div class="col_box">
			<div class="col">
				<div class="lab" style="width: 400px;">支付完成</div>
			</div>
		</div>
		<div class="btns">
			<div class="btn home" id="tojumpbtn">跳转按钮</div>
		</div>
	</div>
	<script>
		// 初始化
		$(function() {
			// 加载商家小票
			let mchData ={action:'onIframeReady',displayStyle:'SHOW_CUSTOM_PAGE'};
			let postData = JSON. stringify(mchData);
			parent.postMessage(postData,'https://payapp.weixin.qq.com');
			//注册点击事件
			document.getElementById("tojumpbtn").onclick = function () {
				let mchData = {
					action: "jumpOut",
					jumpOutUrl: "http://www.baidu.com/" // 外跳链接
				};
				let postData = JSON.stringify(mchData);
				parent.postMessage(postData, 'https://payapp.weixin.qq.com');
			}
		})

	</script>
</body>
</html>

至于广告，如果不需要，可以选择关掉。