一、前言

目前微信支付完成后的回调能力被陆续回收，由点金计划来替代。

1. 服务商没有为特约商户开通点金计划：微信支付完成后，发起支付的H5页面将被直接关闭
2. 服务商为特约商户开通了点金计划：微信支付完成后，将会跳转到微信的点金计划页面，如果服务商没有为特约商户开通商家小票功能，则点金计划页面默认展示官方小票，反之则展示商家小票

官方点金计划文档（包含商家小票对接）：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，保证商家小票可以加载出来之后，再在页面上增加一些自定义的信息。然后就是仔细阅读官方的开发文档就好啦！以上的内容是我自己的一些总结，初衷是能够给后面有点金计划开发需求的小伙伴一个指引，如果有错误或者不严谨的地方，还请大家指出纠正，遗漏的地方，大家可以补上。