- 微信点金计划商家小票对接踩坑记录
一、前言 目前微信支付完成后的回调能力被陆续回收,由点金计划来替代。 服务商没有为特约商户开通点金计划:微信支付完成后,发起支付的H5页面将被直接关闭服务商为特约商户开通了点金计划:微信支付完成后,将会跳转到微信的点金计划页面,如果服务商没有为特约商户开通商家小票功能,则点金计划页面默认展示官方小票,反之则展示商家小票官方点金计划文档(包含商家小票对接):https://wx.gtimg.com/pay/download/goldplan/goldplan_product_description_v2.pdf [图片] 二、商家小票对接注意事项 这里对于前期服务商为特约商户所做的配置不做过多的赘述,在官方点金计划文档中都有引导。 下面针对官方提供的排查点结合我自己遇到的问题做一下分析 请检查以下几点: 1. 已打开特约商户的商家小票及点金计划开关 [图片] 此处只需要联系服务商将对应开关开启即可 2. 商家小票页面需调用父页面“onIframeReady事件”的jsapi,请查看商家小票开发指引 [图片] 在商家小票页面渲染完成后,调用父页面的‘’onIframeReady‘’事件的JSAPI,并且从加载商家小票页面开始到调用’onIframeReady‘’事件的JSAPI之间的用时不可超过3s,否则会提示无法获取订单信息。 // react useEffect(() => { const mchData = {action: 'onIframeReady', displayStyle: 'SHOW_CUSTOM_PAGE'}; const postData = JSON.stringify(mchData); parent.postMessage(postData, 'https://payapp.weixin.qq.com'); },[]) // vue mounted(){ const mchData = {action: 'onIframeReady', displayStyle: 'SHOW_CUSTOM_PAGE'}; const postData = JSON.stringify(mchData); parent.postMessage(postData, 'https://payapp.weixin.qq.com'); } // javascript const mchData = {action: 'onIframeReady', displayStyle: 'SHOW_CUSTOM_PAGE'}; const postData = JSON.stringify(mchData); parent.postMessage(postData, 'https://payapp.weixin.qq.com'); 3. 调试时,扫描二维码的微信号和支付该笔测试订单的微信号需为同一个 微信官方会提供一个商家小票调试工具,首先在微信中支付一笔订单,然后将对应的订单信息交给服务商,让他们帮忙配置后生成二维码,扫描二维码即可查看商家小票页面效果了,调试时,扫描二维码的微信号和支付该笔测试订单的微信号需为同一个。 另外还有一个点就是,如果说项目有两套环境(线上,测试环境)的话,这里的商家小票链接可以配置成测试环境的,通常测试环境通常会配置vconsole来方便在手机端查看调试信息。之前因为和服务商一些沟通上的问题,一度以为这里的商家小票链接要与最开始让服务商添加的商家小票链接保持一致,于是就导致了调试上的困难,遇到问题都无法定位,基本靠猜,每次还需要改一下发个包,太愚蠢了哈哈。后来微信开放平台里的一位老大哥提醒了我,立马联系服务商给我配置了测试链接,vconsole调试信息一看就找到问题啦。 [图片] [图片] 4. 确保访问的商家小票在调试手机的微信上能正常打开 在使用商家小票调试工具之前,可以先在手机上访问配置的小票链接,确保可以正常打开。 5. 检查商家小票请求的Response Headers中X-Frame-Options是否允许payapp.weixin.qq.com访问 这点比较重要,如果没有按照要求配置好,也会导致不能访问到商家小票页面 具体如何配置可以参考如下链接: https://cloud.tencent.com/developer/section/1190032 6. ios无法加载商家小票,商家小票链接需要https 商家小票功能需要通过https进行访问,并且该域名需要由正式的证书,不能是自己生成的不安全的证书。 7. 关于md5校验 [图片] 出于安全考虑,还是要做一下md5校验的。md5校验完之后,只需要控制页面上显示的内容,仍旧在当前页面,无需跳走。成功:显示商家小票的信息 失败:展示错误提示内容即可 8. 检查商家小票页是否有重定向oauth鉴权 项目的其他页面都是要重定向去后台做oauth鉴权的,但是如果商家小票页做了重定向的话,则可能会导致跳出微信的iframe框架从而无法响应微信提供的JSAPI或者是商家小票页面无法正常加载 9. 商家小票页面加载出来了,但是内容是空白的 这个问题是我自己遇到的一个坑,在扫描调试二维码的页面中,商家小票页面是加载出来了(如何判定是加载了页面?如果商家小票页面加载失败的话,页面上是会提示无法加载订单信息这几个字的),但是页面却是空白的,后来在vconsole里查看dom结构,发现html的font-size是0px,大写的囧啊!!! 这里说一下,因为项目里用到了px2rem去做移动端的自适应,所以需要动态的设置根节点html的font-size 原来的代码是这样的,会去动态获取clientWidth动态计算font-size document.querySelector('html').style.fontSize = `${Math.min(document.documentElement.clientWidth, 1280) / 10}px` 现在将代码改成了这样,加了个判断,如果是进入商家小票页面,则把html标签的font-size设置成36px if (location.pathname.includes('bill-back')) { document.querySelector('html').style.fontSize = '36px' } else { document.querySelector('html').style.fontSize = `${Math.min(document.documentElement.clientWidth, 1280) / 10}px` } 总结: 联调的时候可以先在页面上写一些静态的信息,然后先响应“onIframeReady事件”的jsapi,保证商家小票可以加载出来之后,再在页面上增加一些自定义的信息。然后就是仔细阅读官方的开发文档就好啦!以上的内容是我自己的一些总结,初衷是能够给后面有点金计划开发需求的小伙伴一个指引,如果有错误或者不严谨的地方,还请大家指出纠正,遗漏的地方,大家可以补上。
2021-04-22 - 微信小程序能直接调用微信接口打开微信钱包【收付款】界面吗?
目前遇到的问题: 我现在实在一家零售行业,做了一个小程序,现在问题是,每次用户进行付款时,再小程序里,需要先出示用户的会员码,然后再暂退出小程序后,手动进入微信钱包【收付款】页面进行支付。但这样用户体验极差! 需求的场景描述:点击按钮调用钱包的收付款码页面。 看到有些小程序可以点击按钮直接调用用户的钱包收付款页面,请问这个有提供api吗,如何实现?
2019-09-23 - 小程序直播新增优惠券功能
各位微信开发者: “小程序直播” 新增优惠券功能,具体产品介绍和接入指引请参考《小程序直播优惠券配置操作指引》。 优惠券功能是直播间重要的营销功能,主播可在直播期间推送限量优惠券,提升直播间购物氛围,促转化。 注意:仅1.0.7及以上版本直播组件支持优惠券。目前小程序直播最新的版本是1.0.15,建议更新到最新版。 【具体配置步骤】 一、创建微信支付优惠券批次 小程序直播支持派发【微信支付-代金券】与【微信支付-商家券】,创建微信支付优惠券请登录微信支付商户平台。 如有疑问请参考详细版《小程序直播优惠券配置操作指引》。 二、创建优惠券批次与小程序授权关系 2.1创建授权关系 目前有两种方式创建授权: 1)微信支付账号登录商户平台,在“营销中心>营销授权>APPID营销授权”创建授权 2)具备开发能力的商家,可选择 API接口创建授权 2.2 创建授权关系校验规则 批次与APPID创建时候,验证以下3条关系,命中一条,即可创建授权关系 - 批次创建商户号与小程序APPID有绑定关系 - 如代金券,代金券可核销商户号与小程序APPID有绑定关系 - 如商家券,商家券归属商户号与小程序APPID有绑定关系 若需要创建或查询绑定关系,请点击直连商户或服务商模式。 三、小程序直播管理端配置投放优惠券Step1 添加优惠券 登陆https://mp.weixin.qq.com,进入直播间控制台,点击"创建优惠券活动",输入上一步授权过的优惠券批次号并添加。 [图片] Step2 上架优惠券 添加好的优惠券只有"上架"才会被观众看到,最多同时上架三张。(商家可随时进行上架和取消上架操作) [图片] Step3 推送优惠券 直播中,可在【mp控制台】或【主播端】对上架的优惠券进行推送,推送后优惠券会在直播间弹出,观众点击即可领取。 [图片]
2020-06-11