【微信点金计划】做微信支付的时候因为需求让支付后跳转自家项目的页面,发现支付点击完成之后直接退出项目返回到了微信公众号页面,上网查了一下,发现已经不支持这种自定义了,需要参加微信的点金计划,这样支付成功之后会跳转到小票页面,分为两种一种商家小票,一种是官方小票,我这里用的是商家小票。访问这个地址可以查看关于点金计划的文档和配置教程:点金计划。
---> 首先配置商家小票链接:需要先把自己的页面文件上传到服务器,我的是上传了一个html文件,然后把该html文件对应的链接填写到商家小票链接input框就行了,微信的支付成功页面会把该链接填进ifram标签里面,这样自己的页面就嵌入微信的支付成功页了,代码会放在下面。
---> 这样所有的东西配置好之后就能在商家小票的调试工具进行调试了,填写好对应的参数扫描生成的二维码就可以。
文章图片
然后就是嵌入页面的代码,这个也是我网上借鉴的,改了自己的样式就能用:
支付完成测试 - 锐客网 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;
}支付成功查看支付详情
最后,我支付成功点击完成出现的页面是这样的:
文章图片