微信h5 使用jssdk支付成功后,点击完成页面关闭了,引出微信“点金计划“

news2024/10/6 4:01:21

可能会迷惑为啥我们之前没有碰见过这种情况!
这样的情况只有两种情况,就是

你只是普通商户不是微信特约商户
你的支付跳转功能还未被微信回收

那么怎么才能支付成功重新跳回自己的网站页面
刚开始经历这种情况的童鞋, 可能有点懵逼先看个微信的之前发的一个公告吧
微信支付公告飞机票

看完之后有点懵懵懂懂的感觉
大概意思就是,微信告诉你,你不能像以前那样了,支付成功进入成功的回调函数,进行成功的事件处理,如果想跳回你的网站的话,得参与这个“点金计划,得按照我们微信的意思来,”

本质上可能算是给微信引流吧

进入主题如何能跳回我们的网站呢

这个引入了另一个话题就是点金计划中的商家小票

微信h5支付成功后, 先跳转到商家小票页面,通过商家小票页面,可以跳回去我们的自己得网站

注意哈, 商家小票页面分为两种: 1 微信自己的 2 我们可以自定义页面

有的童鞋可能有足够的时间,或者自己想挑战下自己去摸索,这里我给出文档,文档中描述的很清晰
商家小票开发文档飞机票

如果有的童鞋比较忙,没有时间去研究的话 ,就继续往下看

作为前端童鞋的话,其实自定义商家小票的页面,开发完成后,你放到服务器,然后: 【登录微信支付服务商平台 → 服务商功能 → 点金计划】。在“商家小票链接
配置”模块中，点击“添加商家小票链接”：

这个商家小票的页面,最终会展示到下面图片中的那个黄色圆圈中.
所以注意好高度哦, 适配好
在这里插入图片描述
tips: 这个提个醒吧,这个商家小票页面, 如果你的项目是用vue开发或者react 可以在你的项目中开发一个页面即可也可以单独搞一个html文件也成

然后在页面里面搞一个按钮跳转回你的网站页面就好了

这个玩意必须加上哈, 放在head中

 <script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js">
  </script>

因为我的项目是vue开发。所以就拿vue举例子了。

我的页面很简单, 就一个支付成功, 然后跳回首页

只要你后台添加了商家小票地址, 并且开启了点金计划下面的页面在微信支付成功后, 点击完成就会看到小票页面

至于为啥是postMessage这种方式,是前端的童鞋可能都知道,就是他这个小票页面是被嵌套在一个iframe中所以才用这个方式通信

// 如果你想对这个页面进行定制化开发,其实也可以,他跳转过来是会带上商家订单号,你可以拿这个订单号去请求接口,然后展示一些更加详细的数据,这都是看你们自己的产品需求了

<template>
  <div class="pay-result">
    <div class="text">支付成功</div>
    <van-button type="primary" @click="JumpToHome">返回商家</van-button>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
// 微信商家小票
const wxInit = () => {
  //初始化小票
  var initData = {
    action: "onIframeReady",
    displayStyle: "SHOW_CUSTOM_PAGE",
  };
  var initPostData = JSON.stringify(initData);
  parent.postMessage(initPostData, "https://payapp.weixin.qq.com");
};
onMounted(() => {
  wxInit();
});
//注册点击事件(去首页)
const JumpToHome = () => {
	let homePage = "https://www.baidu.com"
  var mchData = {
    action: "jumpOut",
    jumpOutUrl: homePage, //跳转的页面
  };
  var postData = JSON.stringify(mchData);
  parent.postMessage(postData, "https://payapp.weixin.qq.com");
};
</script>

<style lang="less" scoped>
.pay-result {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
  .text {
    margin-bottom: 50px;
    font-weight: 600;
    font-size: 18px;
    color: green;
  }
}
</style>