微信点金计划商家小票对接踩坑记录

一、前言

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

1. 服务商没有为特约商户开通点金计划：微信支付完成后，发起支付的H5页面将被直接关闭

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

官方点金计划文档（包含商家小票对接）：wx.gtimg.com/pay/downloa…

二、商家小票对接注意事项

这里对于前期服务商为特约商户所做的配置不做过多的赘述，在官方点金计划文档中都有引导。

下面针对官方提供的排查点结合我自己遇到的问题做一下分析

请检查以下几点：

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
<script>
  const mchData = {action: 'onIframeReady', displayStyle: 'SHOW_CUSTOM_PAGE'};
  const postData = JSON.stringify(mchData);
  parent.postMessage(postData, 'https://payapp.weixin.qq.com');
</script>

3. 调试时，扫描二维码的微信号和支付该笔测试订单的微信号需为同一个

微信官方会提供一个商家小票调试工具，首先在微信中支付一笔订单，然后将对应的订单信息交给服务商，让他们帮忙配置后生成二维码，扫描二维码即可查看商家小票页面效果了，调试时，扫描二维码的微信号和支付该笔测试订单的微信号需为同一个。

另外还有一个点就是，如果说项目有两套环境（线上，测试环境）的话，这里的商家小票链接可以配置成测试环境的，通常测试环境通常会配置vconsole来方便在手机端查看调试信息。之前因为和服务商一些沟通上的问题，一度以为这里的商家小票链接要与最开始让服务商添加的商家小票链接保持一致，于是就导致了调试上的困难，遇到问题都无法定位，基本靠猜，每次还需要改一下发个包，太愚蠢了哈哈。后来微信开放平台里的一位老大哥提醒了我，立马联系服务商给我配置了测试链接，vconsole调试信息一看就找到问题啦。

4. 确保访问的商家小票在调试手机的微信上能正常打开

在使用商家小票调试工具之前，可以先在手机上访问配置的小票链接，确保可以正常打开。

5. 检查商家小票请求的Response Headers中X-Frame-Options是否允许payapp.weixin.qq.com访问

这点比较重要，如果没有按照要求配置好，也会导致不能访问到商家小票页面

具体如何配置可以参考如下链接：

cloud.tencent.com/developer/s…

6. ios无法加载商家小票，商家小票链接需要https

商家小票功能需要通过https进行访问，并且该域名需要由正式的证书，不能是自己生成的不安全的证书。

document.querySelector('html').style.fontSize = `${Math.min(document.documentElement.clientWidth, 1280) / 10}px`

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`
}