最近遇到一件比较糟心事，给客户上线快两年的微信在线商城，最近决定升级，结果到支付完成后点击完成按钮无法直接返回商家...我检查了自己传的参数，发现并无问题，老版本是可以跳转的，当时很是懵逼，因为这个项目是直接对接的第三方支付公司（通联）；我就联系通联相关的技术人员，告知我可能是因为微信退出的点金计划的原因，然后我就去度娘了一下，果然是...然后看文档跟着配置与自定义小票页面。
小票的主要原理就是内嵌一个iframe，进行通信。我们填写的连接地址也是嵌套在iframe框上的src属性上...
理解了其原理，准备开干...
开通点金计划，申请成为特约商户，开启自定义小票功能，放入自定义好的小票连接，需要做验证。
下载验证txt文件，放入与自定义小票页面同级下
- 配置商家小票链接（修改链接内容需要五分钟之后才能生效）
1）. 需要https:// 路径的小票链接（前端自己随便写个） - 和微信授权一样， 下载指定的 .txt 文件，放在同级目录。
填写域名或路径指向的web服务器（或虚拟主机）的目录（若填写域名，将文件放置在域名根目录下；若填写路径或具体链接，将文件放置在最后一级的路径目录下，例如链接为https://xxx/xxx/aa.html，则文件应放置在https://xxx/xxx/xxx.txt。.txt只有添加正确的位置才算配置成功。 - 商家小票调试工具预览
可以先在这个页面调试小票页面
1）. 支付一笔订单 （能在当前交易中心看到这笔订单，确定商家小票链接配置没有配错地方）
2）. 对应的特约商户号中 点金计划 商家小票 广告展示都给打开 后面还有个更多的，点一点，有个配置特约商户商家小票链接，看看是不是配置的， 我是把能配置的都给配置了。
3）. 需要 商家小票链接 特约商户号 商家订单号 微信支付订单号 填满，生成二维码，就可以看到微信支付成功点击完成之后的页面了
<!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>
<head>
<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">
window.οnlοad=function(){
var mchData ={action:'onIframeReady',displayStyle:'SHOW_CUSTOM_PAGE'};
var postData = JSON.stringify(mchData);
parent.postMessage(postData,'https://payapp.weixin.qq.com');
}
//初始化console
var vConsole = new VConsole();
//获取返回页面参数
function getQueryString(name) {
var query = window.location.search.substring(1);
console.log("window" + window.location.search)
console.log("query" + query)
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;
};
//获取参数
var sub_mch_id = getQueryString("sub_mch_id"); //特约商户号
console.log("特约商户号" + sub_mch_id)
var out_trade_no = getQueryString("out_trade_no"); //商户订单号
console.log("商户订单号" + out_trade_no)
var check_code = getQueryString("check_code"); //md5 校验码
console.log("校验码" + check_code)
</script> </head>
<style>
body {
font-family: PingFang SC, "Helvetica Neue", Arial, sans-serif;
}
.order_box {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.order_box .bussiness_avt{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.order_box .bussiness_avt img {
width: 60px;
height: 68px;
border: 1px solid #E0E0E0;
}
.order_box .bussiness_avt .text{
font-size: 16px;
line-height: 60px;
height: 60px;
}
.order_box .bussiness_avt button{
width: 60%;
height: 35px;
border-radius: 25px;
border: 1px solid #73dde1;
background-color: #d0edee;
color: #15b4f4;
font-size: 14px;
}
</style>
</head><body>
<div class="order_box">
<div class="bussiness_avt">
<img id="b_avt" src="https://xxxxxx"
alt="">
<div class="text">您的订单支付完成</div>
<button onclick = 'toOrder()' >返回查看订单</button>
</div>
<!-- <div class="b_name" id="b_name">
默认广告占位
</div> -->
</div>
<script type="text/javascript">
function toOrder(){
var mchData = {
action: 'jumpOut',
jumpOutUrl: 'https://xxxxxx' //跳转的页面
}
var pData = JSON.stringify(mchData);
parent.postMessage(pData, 'https://payapp.weixin.qq.com')
}
</script>
</body></html>这里想问大家一个问题怎么拿到回调地址 jumpOutUrl？
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
