微信支付点金计划—支付完成后自定跳转页面

最新推荐文章于 2023-06-28 09:57:02 发布

IT侠客行

最新推荐文章于 2023-06-28 09:57:02 发布

阅读量4.2k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_35622189/article/details/119456806

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

最近遇到一件比较糟心事，给客户上线快两年的微信在线商城，最近决定升级，结果到支付完成后点击完成按钮无法直接返回商家...我检查了自己传的参数，发现并无问题，老版本是可以跳转的，当时很是懵逼，因为这个项目是直接对接的第三方支付公司（通联）；我就联系通联相关的技术人员，告知我可能是因为微信退出的点金计划的原因，然后我就去度娘了一下，果然是...然后看文档跟着配置与自定义小票页面。

小票的主要原理就是内嵌一个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>
   <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？有知道朋友请留言谢谢...

IT侠客行

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信支付点金计划—支付完成后自定跳转页面

最近遇到一件比较糟心事，给客户上线快两年的微信在线商城，最近决定升级，结果到支付完成后点击完成按钮无法直接返回商家...我检查了自己传的参数，发现并无问题，老版本是可以跳转的，当时很是懵逼，因为这个项目是直接对接的第三方支付公司（通联）；我就联系通联相关的技术人员，告知我可能是因为微信退出的点金计划的原因，然后我就去度娘了一下，果然是...然后看文档跟着配置与自定义小票页面。小票的主要原理就是内嵌一个iframe，进行通信。我们填写的连接地址也是嵌套在iframe框上的s...
复制链接

扫一扫