微信支付点金计划和商家小票的开发教程

微信支付成功的跳转页面，点金计划和商家小票的开发教程

最近和一家企业合作，考虑怎么流量互换，于是就有了微信支付完后的跳转页面，利用微信的点金计划，展示商家小票的功能，作为初步方案。

直接进入主题，下面详细介绍代码开发方面需要注意的点（坑）：

1、微信支付后跳转展示的页面，叫点金计划，能够展示商家小票。商家小票就是展示自己写的内容。

2、官方的开发指引： https://http://wx.gtimg.com/pay/download/goldplan/goldplan_developer_guideline_v1.pdf?download
官方文档基本都说的很详细了，也挺简单的，重点要注意几点。

ps1: 调试时，扫描二维码的微信号，与支付该笔测试订单的微信号要一样。否则不会出来商家小票，显示无法获取订单号。

ps2：外跳新页面（jumpOut 事件）外跳事件，暂不支持跳转小程序，原本计划点击商家小票，利用 <wx-open-launch-weapp> 跳转到小程序的,发现不支持，只能跳到新的html 页面，用户还得再次点击才能跳转小程序（非常影响用户体验，更别提转化了）

ps3：商家小票不显示，一片空白（注意不是无法获取订单信息哦），这是几乎都会遇到的坑，我们引入 VConsole.js 就能在微信打开调试器，找到问题所在，问题出在 html 的 fon-size = 0；所以导致使用了rem 的元素都无法显示。（下面会介绍怎么用VConsole.js，超简单，超好用）

上图：类似小程序的调试器

ps4：使用商家小票必须引入官方的这个js,否则会受到处罚

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

ps5: 因为商家小票页面不能动态获取屏幕宽高，所以直接设置。
// 解决进入商家小票 html的font-size = 0的问题(商家小票无法动态获取屏幕宽)，请勿随意改动
document.querySelector(‘html’).style.fontSize = “10px”;

ps6：调试需要将写好的页面发布到线上，因为要用https链接。

打开调试器：VConsole.js
第一步引用js:

<script src="https://http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>

第二部，初始化：
// 调试专用，vconsole
const vConsole = new VConsole();
然后就可以了，跟之前一样，使用console.log()打印，当在微信打开网页时，就会看到和微信小程序一样的调试器了。

下一期将会带大家一起使用开放标签，微信内，h5页面跳转到小程序的功能。

如果有哪里不明白或者更好的建议的小伙伴可以一起讨论哦！最下面会附上代码片段。

基本代码块：<div class="jumpnjfMiniProgram">
<img src="http://...." class="btn" id="tojumpbtn"/>
</div>// 初始化
$(function() {
// 加载商家小票
let mchData ={action:'onIframeReady',displayStyle:'SHOW_CUSTOM_PAGE'};
let postData = JSON. stringify(mchData);
parent.postMessage(postData,'https://payapp.weixin.qq.com');//注册点击事件
document.getElementById("tojumpbtn").onclick = function () {
let mchData = {
action: 'jumpOut',
jumpOutUrl: "https://...." // 外跳链接
};
let postData = JSON.stringify(mchData);
parent.postMessage(postData, 'https://payapp.weixin.qq.com');
}
});还有就是获取微信传过来的商家号，订单号那些信息：
//获取返回页面参数
function getshangjiaxinxi(name) {
let querys = window.location.search.substring(1);
let admins = querys.split("&");
for (let i = 0; i < admins .length; i++) {
let hasddf = admins [i].split("=");
if (hasddf [0] == name) {
return hasddf [1];
}
}
return null;
};//获取参数
let sub_mch_id = getshangjiaxinxi("sub_mch_id"); //特约商户号
console.log("sub_mch_id == ",sub_mch_id)
let out_trade_no = getshangjiaxinxi("out_trade_no"); //商户订单号
console.log("out_trade_no == ",out_trade_no)
let check_code = getshangjiaxinxi("check_code"); //md5 校验码
console.log("check_code == ",check_code)// 至于校验md5，就要后台配合完善了。 其它业务逻辑也可以开展啦。

微信支付点金计划和商家小票的开发教程相关推荐

iPhone 12 或10月13日发布；微信支付正计划加码存款市场；Swift正式登陆Win 10 | 极客头条
整理 | 郑丽媛头图 | CSDN 下载自东方 IC 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 国内 ...
php微信商务平台红包调用,微信平台红包接口怎么调用？微信支付商户平台红包发放接口调用图文教程[多图]...
微信平台红包接口怎么调用?估计很多商家都还不太会操作吧?别着急,下面是友情小编搜集相关资料整理出来的微信支付商户平台红包发放接口调用图文教程,希望可以帮到大家,现在就跟随小编一起看看吧!!! 首先,商 ...
微信群控SCRM客服系统SDK定制开发教程
微信群控SCRM客服系统SDK定制开发教程!出自秋天不穿秋裤,天冷也要风度的程序猿之手,必属精品! 今天给大家介绍如何使用聚播群控sdk(微信二次开发SDK)快速开发一个群控客服系统!使用此SDK也可 ...
腾讯微信支付支持全量商家小程序场景开通云闪付功能
为持续推进支付生态开放及合作,腾讯宣布与银联云闪付互联互通再次取得重大进展: 微信支付于12月15日开始逐步升级商家小程序支持云闪付付款功能,微信商家小程序已全面开通云闪付.该功能升级后,用户即可在已 ...
微信支付商户平台－配置密钥/API安全教程
我们在做小程序获取微信开发时,难免会用到微信支付,我们做微信支付时,商户id和密匙是必不可少的.商户id很容易就能获取到.但是这个密匙的配置就相对而言麻烦了一点.今天就来教大家如何配置位置支付的密匙. ...
android微信支付后返回第三方页面,微信支付后怎么返回指定界面 ios开发
满意答案 timerise 2015.09.07 采纳率:40% 等级:10 已帮助:671人在以下两个方法中实现(AppDelegate) //弃用的返回 - (BOOL)applicati ...
微信支付如何降低费率？
微信支付如何降低费率? ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200623224622119.png?x-oss-process=image/water ...
微信jsapi支付，跳转到微信支付成功结果页，没有返回商家按钮
一开始是这样的在确保参数,比如回调地址有传给微信的情况下,如果没有显示,那么需要开通微信的点金计划,同时因为我连的是第三方的,比如首信易,还需要微信公众号js接口安全域名的MP_verify_*.t ...
微信支付服务器商模式,微信支付分正式支持服务商模式！
支付之家网(ZFZJ.CN)7月21日,微信支付推出<微信支付成长计划-智慧经营系列课堂>,同时对外透露,微信支付智慧经营产品支付分正式宣布支持服务商模式. 首期"政策与产品能力 ...

微信支付点金计划和商家小票的开发教程

微信支付点金计划和商家小票的开发教程相关推荐

最新文章

热门文章