微信支付的点金计划实现与踩坑

前一篇文章提到了微信授权和微信支付，本以为支付已经ok了，没想到这周测试出了重要且很紧急的问题。

上线之后，用户微信支付成功点击完成按钮之后页面直接关闭了，我们支付是后端调起的支付，并没有按照回调地址跳转。在测试线已经测试过了没有问题，上到正式线就成这样了，并且我司在另外的域名有一套一样的代码也没任何问题。经过排查，这套代码的环境和另外一套代码环境做对比，发现是微信支付模式不一样，一个采用的是直连模式，出问题的采用的是服务商模式。

通过微信社区发现，微信升级了支付后跳转指定页面（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_partner/open/pay/chapter3_5_1.shtml，在开发文档最底部有个点金计划产品文档，按照步骤完成就好了）：

前端具体实现：

一、页面部分：需要一个单独的页面（所谓的商家小票），这个页面会以iframe的形式嵌入到回调中，支付完的回调链接中会有个out_trade_no参数，拿这个参数去获取详情的信息，页面主要调用下边这两个方法。注意：还要引入文档中提到的一个js否则会受到什么惩罚。

//初始化展示小票,请求完数据后，调用这个方法，

 var initData = {
          action: 'onIframeReady',
          displayStyle: 'SHOW_CUSTOM_PAGE',
          //height:600px,不知道为什么没有生效        
   }
          var initPostData = JSON.stringify(initData)
          // parent.postMessage(initPostData, 'https://payapp.weixin.qq.com')
          parent.postMessage(initPostData, '*')



//跳转外联
 let mchData = {
       action: 'jumpOut',
       jumpOutUrl: entryUrl //跳转的页面
 };
 var postData = JSON.stringify(mchData)
 // parent.postMessage(postData, 'https://payapp.weixin.qq.com') 之前用这个地址，但是无法显示小票，又迫于后台无法将这个网址添加到ng中，所以就试了下边这个方法，果然可以。
  parent.postMessage(postData, '*')

二、微信支付点金计划开通。

登录微信支付服务商平台， 服务商功能 → 点金计划，先添加https的小票链接，然后按照后台提供的实际订单信息可以在商家小票调试工具中进行调试，如果能正常展示一般就说明没有什么问题（测试扫码的微信号一定与支付的微信号是同一个，否则不能正常显示）

调试页面如果能正常显示就能去开通点金计划了，打开点金计划和商家小票，然后在更多中一定要配置商家小票的链接地址，否则微信会走官方的小票模板。

三、注意。

跟着文档一路开发和配置，但是还是有很多坑需要特殊注意一下：

1、vue项目中，不能把这两个方法应用到ceated声明周期中，调了好久才发现，深坑。

2、parent.postMessage(postData, 'https://payapp.weixin.qq.com') 一直报错域名不允许访问，我们后台无法把域名放到ng中，所以 用了这个方法 parent.postMessage(postData, '*')，可行。

3、小票页面一片空白，什么都不显示，建议打开vconsole查看下html的font-size是否为0，部分苹果手机显示白屏，这个也坑了很久。

如果这些都没有问题可以看看官方给出的链接（还是在社区中挖到的 --||），反正一步一个坑，很多文档上都没有，需要去社区去挖一挖。

https://developers.weixin.qq.com/community/develop/doc/000ae6b1a98cc099e64ba71f456009?highLine=%25E7%2582%25B9%25E9%2587%2591%25E8%25AE%25A1%25E5%2588%2592