微信公众号支付完成后页面出现了闪退,直接退出了业务界面,直接来到了公众号的入口页面,纳尼,这是哪里的问题?毕竟在测试公众号上是正常的.怎么在生产上就出现这个问题?
本着发现问题,解决问题的态度,打工人果断去微信支付社区遨游了一圈,果不其然!官方社区下边一片哀嚎,官方也给出了解决方案:
您好，微信支付服务商平台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,原本支付页面的能力官方回收了,现在统一由官方新出的'点金计划'来承载,那我们就先看看这个所谓的'点金计划'是什么?
点金计划是微信支付官方提供的支付后回调能力的升级计划。
1、产品简介：微信支付平台提供支付后页面模板，支持账单展示、服务性内容展示、流量位推广等功能。其中，流量位推广指接入微信广告平台；
2、服务商收益：服务商提供点金计划相关技术服务，由微信支付向服务商支付返佣奖励；
3、服务商管理工具：可在服务商平台对特约商户开通/关闭点金计划，以及为特约商户配置同业过滤标签，过滤所选行业的广告。同时，对于有需要的特约商户，服务商可为其开通商家小票功能，即可在点金计划官方页面上方嵌入商家服务性内容，例如展示取餐码、停车时长等。
4、产品形态：服务商为特约商户开通点金计划之后，特约商户的JSAPI支付（除小程序场景）完成后的页面将仅展示点金计划官方页面，同时发起支付的服务商H5页面将被关闭。
服务商可根据特约商户情况，自行选择是否为特约商户开通商家小票功能：
1）若仅为特约商户开通点金计划，未开通商家小票功能，该商户JSAPI支付后会展示官方小票样式；
2）若为特约商户开通点金计划时，已开通了商家小票功能且已按开发文档完成接入，该商户JSAPI支付后会展示商家小票样式。
注：官方小票指平台自动生成的电子账单，仅展示订单金额等基础信息；商家小票指商家为用户提供的订单详情，可展示不同业务场景下的服务性内容，例如取餐码、停车时长等。
----找到原因后,我们就来操作一下
1. 已打开特约商户的商家小票及点金计划开关(此处只需要联系服务商将对应开关开启即可)
2. 商家小票页面需调用父页面“onIframeReady事件”的jsapi，请查看商家小票开发指引
外跳JSapi
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.官方给了一个调试的入口,毕竟测试只能才生产调试,这个工具可以模拟支付后的页面,调试起来还是相对比较便捷的.
上图的小票链接是以 'https:www.heiheihaha.cn/payCallBack.html'此形式为例--可以单独写一个页面放在生产环境前端代码的根目录,还需要将商家小票上述的txt文件放在同一位置,输入商户号,商家订单号,还有微信支付订单号后,点击生成测试二维码 就可以看到你的自定义支付页面(支付微信号和扫码微信号必须是同一个)
调试过程中导致调试页面展示失败的原因
自定义页面调试成功
官方提示:小票链接页面正常是会在后边拼接相应的订单信息(我们可以可以通过获取到对应的参数,来配合后端给出的api接口来查询页面想要展示的自定义信息)
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)
总结:点金计划的整个流程基本已经总结完毕,希望能帮助到大家.
