做微信支付的时候因为需求让支付后跳转自家项目的页面，发现支付点击完成之后直接退出项目返回到了微信公众号页面，上网查了一下，发现已经不支持这种自定义了，需要参加微信的点金计划,这样支付成功之后会跳转到小票页面，分为两种一种商家小票，一种是官方小票，我这里用的是商家小票。访问这个地址可以查看关于点金计划的文档和配置教程：点金计划。
---> 首先配置商家小票链接：需要先把自己的页面文件上传到服务器，我的是上传了一个html文件，然后把该html文件对应的链接填写到商家小票链接input框就行了，微信的支付成功页面会把该链接填进ifram标签里面，这样自己的页面就嵌入微信的支付成功页了，代码会放在下面。
---> 这样所有的东西配置好之后就能在商家小票的调试工具进行调试了，填写好对应的参数扫描生成的二维码就可以。
然后就是嵌入页面的代码，这个也是我网上借鉴的，改了自己的样式就能用：
<!DOCTYPE html>
<html lang="cn">
<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 type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script type="text/javascript" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
body {
font-family: PingFang SC, "Helvetica Neue", Arial, sans-serif;
}
.container{
padding: 15px;
display: flex;
height: 600px;
flex-direction: column;
align-items: center;
}
.icon{
background: url('https://3ayj-oss.oss-cn-shenzhen.aliyuncs.com/pic/sprite_fm.png') 0 0 no-repeat;
background-size: 985px 650px;
width: 40px;
height: 40px;
margin: 15px;
border-radius: 50%;
background-position: -729px -215px;
}
.icon img{
display: inline-block;
height: 40px;
width: 40px;
border-radius: 20px;
}
.msg{
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
}
#tips{
margin-bottom: 15px;
}
#cost{
font-size: 20px;
font-weight: bold;
margin-bottom: 15px;
}
#toOrder{
width: 100%;
line-height: 50px;
background-color: #00d660;
color: #fff;
border-radius: 7px;
}
#toOrder span{
display: inline-block;
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="icon"></div>
<div class="msg">
<span style="color: #00d660;">支付成功</span>
</div>
<div id="tips"></div>
<div id="cost"></div>
<div id="toOrder">
<span>查看支付详情</span>
</div>
</div>
<script>
//初始化console 调试商家小票最好打开这个，可以看到接口访问时间
var vConsole = new VConsole();
//获取返回页面参数
function getQueryString(name) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == name) {
return pair[1];
}
}
return null;
}
//获取参数
// "特约商户号（sub_mch_id）"、"商户订单号（out_trade_no）"
// ?sub_mch_id=123456G&che7&out_trade_no=ABCDEFck_code=39f0876dd58e4eb61b66250f69d02705
var sub_mch_id = getQueryString("sub_mch_id"); //特约商户号
// console.log("sub_mch_id is " + sub_mch_id)
var out_trade_no = getQueryString("out_trade_no"); //商户订单号
// console.log("out_trade_no is " + out_trade_no)
var check_code = getQueryString("check_code"); //md5 校验码 如果服务商是通过银行注册的，需要银行提供接口进行订单验证，该验证码需要根据银行那边进行特殊处理
// console.log("check_code is " + check_code)
$.ajax({
type: "POST",
url: 自家后端人员提供的相应接口,
data: {
subMchId: sub_mch_id,
outTradeNo: out_trade_no,
checkCode: check_code
},
dataType: "json",
success: function (res) {
console.log('请求成功',res)
if (res.code == 200) {
var detailLink = res.data.url; //点击按钮跳转回自己项目页面
$("#cost").html("￥" + res.data.amount.toFixed(2))
$("#tips").html(res.data.schoolName)
console.log('学校',res.data.schoolName);
var initData = {
action: 'onIframeReady',
displayStyle: 'SHOW_CUSTOM_PAGE',
}
var initPostData = JSON.stringify(initData)
parent.postMessage(initPostData, "https://payapp.weixin.qq.com")
//注册点击事件(去详情)
document.querySelector('#toOrder').onclick = function () {
var mchData = {
action: 'jumpOut',
jumpOutUrl: detailLink //跳转的页面
}
console.log('调用成功',mchData);
var postData = JSON.stringify(mchData)
parent.postMessage(postData, "https://payapp.weixin.qq.com")
}
}
},
error: function(err){
console.log('请求出错',err)
}
});
</script>
</body>
</html>
最后，我支付成功点击完成出现的页面是这样的：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。