微信公众号支付完成'闪退'处理之'点金计划'

微信公众号支付完成后页面出现了闪退,直接退出了业务界面,直接来到了公众号的入口页面,纳尼,这是哪里的问题?毕竟在测试公众号上是正常的.怎么在生产上就出现这个问题?

question.jpg

本着发现问题,解决问题的态度,打工人果断去微信支付社区遨游了一圈,果不其然!官方社区下边一片哀嚎,官方也给出了解决方案:

您好，微信支付服务商平台6月底就发了公告，服务商jsapi支付后回到商家页面的能力，会陆续回收，由点金计划来承载。

如果没有开通点金计划的服务商，支付后就会直接关闭商家页面。详情可查看公告说明：

https://pay.weixin.qq.com/index.php/public/cms/content_detail?platformType=1&lang=zh&id=121505

另外，点金计划相关接口可参考这个文档

https://pay.weixin.qq.com/wiki/doc/apiv3/wxpay/goldplan/chapter1_1.shtml

soga,原本支付页面的能力官方回收了,现在统一由官方新出的'点金计划'来承载,那我们就先看看这个所谓的'点金计划'是什么?

fenxi.jpg

点金计划是微信支付官方提供的支付后回调能力的升级计划。

1、产品简介：微信支付平台提供支付后页面模板，支持账单展示、服务性内容展示、流量位推广等功能。其中，流量位推广指接入微信广告平台；

2、服务商收益：服务商提供点金计划相关技术服务，由微信支付向服务商支付返佣奖励；

3、服务商管理工具：可在服务商平台对特约商户开通/关闭点金计划，以及为特约商户配置同业过滤标签，过滤所选行业的广告。同时，对于有需要的特约商户，服务商可为其开通商家小票功能，即可在点金计划官方页面上方嵌入商家服务性内容，例如展示取餐码、停车时长等。

4、产品形态：服务商为特约商户开通点金计划之后，特约商户的JSAPI支付（除小程序场景）完成后的页面将仅展示点金计划官方页面，同时发起支付的服务商H5页面将被关闭。

dianjinjihua.png

服务商可根据特约商户情况，自行选择是否为特约商户开通商家小票功能：

1）若仅为特约商户开通点金计划，未开通商家小票功能，该商户JSAPI支付后会展示官方小票样式；

2）若为特约商户开通点金计划时，已开通了商家小票功能且已按开发文档完成接入，该商户JSAPI支付后会展示商家小票样式。

注：官方小票指平台自动生成的电子账单，仅展示订单金额等基础信息；商家小票指商家为用户提供的订单详情，可展示不同业务场景下的服务性内容，例如取餐码、停车时长等。

----找到原因后,我们就来操作一下

dagongren.png

1. 已打开特约商户的商家小票及点金计划开关(此处只需要联系服务商将对应开关开启即可)

dianjinPlan.png

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

image.png

外跳JSapi

image.png

js代码

    window.onload=function(){  //dom加载完成

      var vConsole = new VConsole(); //移动端调试工具 Vconsole方便定位问题
      var initData ={action:'onIframeReady',displayStyle:'SHOW_CUSTOM_PAGE'}; //display可以展示官方的,也可以展示自定义的

      var initPostData = JSON.stringify(initData);

      parent.postMessage(initPostData,'https://payapp.weixin.qq.com'); //父页面的交互  这一行很重要
      document.querySelector('.btn').onclick = function(e) {
        var mchData = {action:'jumpOut',jumpOutUrl:'想要跳转的url链接'};
        var postData = JSON.stringify(mchData);
        parent.postMessage(postData,'https://payapp.weixin.qq.com')
      }
    }

3.官方给了一个调试的入口,毕竟测试只能才生产调试,这个工具可以模拟支付后的页面,调试起来还是相对比较便捷的.

image.png

image.png

上图的小票链接是以 'https:www.heiheihaha.cn/payCallBack.html'此形式为例--可以单独写一个页面放在生产环境前端代码的根目录,还需要将商家小票上述的txt文件放在同一位置,输入商户号,商家订单号,还有微信支付订单号后,点击生成测试二维码 就可以看到你的自定义支付页面(支付微信号和扫码微信号必须是同一个)

调试过程中导致调试页面展示失败的原因

image.png

自定义页面调试成功

image.png

官方提示:小票链接页面正常是会在后边拼接相应的订单信息(我们可以可以通过获取到对应的参数,来配合后端给出的api接口来查询页面想要展示的自定义信息)

image.png

url参数获取代码

        function getQueryString(name) {
            var query = window.location.search.substring(1);
            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 is " + sub_mch_id)
        var out_trade_no = getQueryString("out_trade_no"); //商户订单号
        console.log("out_trade_no is " + out_trade_no)
        var check_code = getQueryString("check_code"); //md5 校验码
        console.log("check_code is " + check_code)

总结:点金计划的整个流程基本已经总结完毕,希望能帮助到大家.

work.png