博客

微信点金计划，开通商家小票，微信支付完成后页面跳转

  • Post author:
  • Post category:其他


今天有个需求，修改uniapp微信公众号h5页面的微信点金商家小票，并设置按钮跳转首页。

（下面我要写的内容，我感觉比较通用，不仅适用我的这个uniapp需求，还适用小程序）


一、


为啥会有微信点金计划这个需求，因为对于微信支付成功之后，跳转到指定页面，微信目前已经关闭了该通道，具体通知请参看：https://pay.weixin.qq.com/index.php/public/cms/content_detail?platformType=1&lang=zh&id=121505

根据通知提示，要显示支付成功页面，必须开通其点击计划，并开通商家小票功能。


官方文档

  1. 点金计划管理文档：https://pay.weixin.qq.com/wiki/doc/apiv3/wxpay/goldplan/chapter3_1.shtml

  2. 商家小票管理文档：https://pay.weixin.qq.com/wiki/doc/apiv3/wxpay/goldplan/chapter3_2.shtml

最详细的文档：


微信点金pdf文档

https://wx.gtimg.com/pay/download/goldplan/goldplan_product_description_v2.pdf


小票的主要原理就是内嵌一个iframe，进行通信。


看了半天文档，发现就上面那个pdf文档写的最详细。实际上不用写太多东西，

你直接自己写个html文件就行了，其余的都是在微信支付服务商平台设置的。


由于我这个需求是临时添加的，项目不是我写的，所以后台也就没写商家小票支付详情接口。我直接写了个 支付完成，返回首页。

准备工作

首先要申请成为特约商户，具体看文档，是我同事申请的，然后要打开点金计划和商家小票功能，还要配置链接

1.申请成为特约商户并打开开关

在这里插入图片描述

2.配置商家小票链接，就是下面我写的html，还要将配置文件放到同级目录才能配置成功

在这里插入图片描述


代码


//payCalllback.html 

<!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>
    <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://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <style>
        body {
            font-family: PingFang SC, "Helvetica Neue", Arial, sans-serif;
        }

        .order_box {
            text-align: center;
        }

        .b_name {
            font-size: 14px;
            font-weight: 500;
            color: #333333;
            margin-top: 6px;
        }

        .col_box {
            margin-top: 35px;
        }

        .col_box .col {
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            font-size: 14px;
            color: #333;
            margin-bottom: 14px;
        }


        .btns {
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            margin-top: 31px;
        }

        .btns .btn {
            width: 147px;
            height: 35px;
            line-height: 35px;
            font-size: 14px;
            border-radius: 39px;
            border: 1px solid #CD2314;
            box-sizing: border-box;
            color: #CD2314;
            margin: 0px auto;
        }
    </style>
</head>

<body>
    <div class="order_box">
       
        <div class="b_name" id="b_name" style="margin-top: 35px; font-size: 25px;">
            扫码充电
        </div>
        <div class="col_box">
            <div class="col">
                <div class="lab" style="width: 400px;">支付完成</div>
            </div>
        </div>
        <div class="btns">
            <div id="backHome" class="btn home" onclick="shouye()">返回首页</div>
        </div>
    </div>

    <script>
        var homeLink = "https://www.24r/h5_recharging/#/pages/my";//首页（例子）
        function init(){
             //初始化小票
             var initData = {
                action: 'onIframeReady',
                displayStyle: 'SHOW_CUSTOM_PAGE'
            }
            var initPostData = JSON.stringify(initData)
            parent.postMessage(initPostData, 'https://payapp.weixin.qq.com')

            
            console.log("初始化");
           
            
        }
        init();

        //注册点击事件(去首页)
        function shouye() {
            var mchData = {
                action: 'jumpOut',
                jumpOutUrl: homeLink //跳转的页面
            }
            var postData = JSON.stringify(mchData)
            parent.postMessage(postData, 'https://payapp.weixin.qq.com')
            console.log("首页");

        }
    </script>
</body>

</html>


主要步骤

:

1、首先初始化小票

2、点击事件

3、配置商家小票链接（如果出问题，看是不是上面没配置好）

在这里插入图片描述

如果你测试的时候出现（

Failed to execute ‘postMessage’ on ‘DOMWindow’

），不用担心,只是跨域了。测试时不用管。等你在微信支付平台配置好（上面配置步骤），就不会报错了。

可以参考https://blog.csdn.net/monkindey/article/details/23659387


参考



二、


我这边想，如果它以后要添加功能（如订单金额和充电时间），可以让后台再写个接口，用来请求数据，但时候直接渲染。


可以参考



点金小票多个数据

在这里插入图片描述


需要注意的地方


1.进入页面后会带三个参数在链接上，代码中我都取出来了，可选择合适自己的字段

2.代码中的渲染可以忽略，vconsole也可以注释掉，我当时调试用的，

3.初始化要在页面渲染完后调用，如果你们要求不需要请求接口直接写死页面的话就可以调用

4.displayStyle: ‘SHOW_CUSTOM_PAGE’ //代表使用自定义小票

5.跳转的链接要拼上https://(http://)

6.如果配置没问题，但是小票一直显示不出来，可能就是你的代码里面有报错导致小票无法显示。


无法展示小票页面原因


调试时需确认以下事项：

1，已打开特约商户的商家小票及点金计划开关

2，商家小票页面需调用父页面“onIframeReady事件”的jsapi，请查看商家小票开发指引

3，从加载商家小票到调用JSAPI之间的用时不可超过3s

4，调试时，扫描二维码的微信号和支付该笔测试订单的微信号需为同一个

5，确保访问的商家小票在调试手机的微信上能正常打开

6，检查商家小票请求的Response Headers中X-Frame-Options是否允许payapp.weixin.qq.com访问

7，ios无法加载商家小票，商家小票链接需要https

参考链接：https://blog.csdn.net/CrazBarry/article/details/108790227


版权声明：本文为pipizhou16原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。