记录--H5页面对接微信支付踩坑杂记

周文达

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

背景

• 应用背景：vite搭建的vue3项目
  
• 需求背景：功能都涉及了支付业务，故需要和外部支付系统对接
  
• 外部支付系统：聚合支付、微信小程序支付、微信H5支付
  

目录

读完本文，你将会对以下几个坑点有所了解：

• 对接第三方服务商过程踩坑
  
• 对接小程序支付踩坑
  
• 对接微信H5支付踩坑
  
• 关于客户端页面的H5支付踩坑
  

一、  对接第三方服务商过程踩坑

踩坑1：业务前期对接第三方服务商，一开始完全是由业务和服务商对接，研发团队没有参与，技术风控风险没能及时发现

解决1：只要涉及到研发工作，业务需通知研发团队需同时和服务商对接，这样研发团队可以尽早了解到相关风险
一开始和服务商聚合支付对接H5的支付功能，只有业务参与了。待业务敲定后再通知研发团队要使用服务商支付服务，接着研发团队和服务商研发团队 对接技术方案，研发完成上线
直到小程序被封第一次，研发团队才知道聚合支付服务是免费的，且服务商聚合支付并没有完全被微信支付官方认可 所以，当小程序被封后，服务商解决问题的态度是不积极的
踩坑2：对接第三方服务时，不要被对方的方案牵着走

解决2：使用第三方服务过程中，若方案需要调整，内部需要及时同步并坚定自身方案和立场
H5应用最先方案是和服务商进行H5支付对接，但在对接过程中，H5支付走不通。对方未告知具体原因的情况下，让我们换成小程序支付，内部研发团队没有经过统方案调整同步的情况下，服务商私自更改了对接方案；固内部整个研发团队被推动着改变了支付方案，使后续开发进行方案调整非常被动
具体分步解决

• 研发方案有变动，内部应同步并统一变动方案
  
• 统一方案后再与第三方平台对接
  

二、  对接微信小程序支付踩坑

踩坑3：使用了聚合支付，聚合支付的费率是3‰，而微信支付商户规定费率是6‰，被微信支付风控判定为窜费率而封禁

解决3：不再通过服务商对接，小程序应用直接和微信小程序支付对接。
项目上线后。腾讯突然直接把小程序封了，没有任何预警通知，直接封。
聚合支付底层用的还是微信支付那一套系统，所以开发小程序对接使用的是微信小程序载体，那同时得遵守微信支付的规则
小程序被封后，官方发出的公告指出我们存在利用技术绕开审核的行为。并指引我们查看到以下图中内容
但询问微信内部人员，给出真正理由是：使用了聚合支付，违背了微信费率规则

 

被腾讯封的小程序，基本是捞不回来了，所以要重新申请程序重新认证，重新绑定商户号 经过微小改动，直接对接小程序支付成功上线。但过了两天，小程序它又双叒叕被封了！

踩坑4：这次他们给的原因是：小程序页面没有实质和服务的内容，不符合规则。

解决4：改用微信H5支付

这次被封，官方发出的公告依然指出我们存在利用技术绕开审核的行为。和上次给出的理由一样。但询问微信内部人员，给出真正理由是：小程序页面没有实质和服务的内容
小程序确实只有三个页面：登录页面、支付页面，支付完成页面

前后两次被封的小程序关联的都是同一个主体，微信规定，同一个商户号下的小程序被封两次后，该主体就会被拉入黑名单中

具体分步解决：

• 争取把主体从小黑屋中救出来
  
• 主体从黑名单中放出来后，申请新的支付载体
  
• 新的支付载体选择公众号
  

踩坑5：使用外部平台能力时，功能层面没有备选方案

解决5：功能层面要规划脱离依赖外部能力的备选方案
一开始没有备选方案的意识。被封后，导致业务受阻
当小程序相继两次被封后，我们意识到需要有过渡方案：预备脱离线上支付交易受阻，如何不影业务工作的方案
本应用实现的备选方案：手动切换线上线下支付交易方案，当微信支付能正常使用时，就走常规的线上交易流程。当微信支付发生意外，被封被禁后能快速启动线下支付备选方案，保障业务不受影响
三、  对接微信H5支付踩坑

踩坑6：商户需要申请H5支付权限

解决6：商户申请H5支付权限
由于之前对接小程序支付给接入准备已经走过一遍了，小程序支付不需要商户申请支付权限，只需要把商户号和公众号绑定上就行
所以没有意识到商户需要申请H5支付权限，且忽略了接入前准备-H5支付 | 微信支付商户平台文档中心最后一行小字。这直接引出了坑7，并且需要花费比较长的时间解决

踩坑7：支付域名和网站域名的ICP注册主体与申请商户号的主体必须一致

解决7：为H5应用申请域名并进行ICP备案
商户申请H5支付权限必须要遵守商户申请H5支付权限需要注意哪规则？，发现支付域名和网站域名的主体和商户号的主体不一致，由于企业内部架构的原因：
H5网页的域名的ICP注册主体是A公司
需要申请H5支付权限的商户号主体是B公司
且A公司和B公司的关系不在以下4种范围中，那只能为H5网页单独申请域名

四、  关于前端的H5支付踩坑

踩坑8：在客户端页面打开支付中间页的事件上，安卓系统和ios系统表现不同

解决8：根据业务需要自定义拼接redirect_url

• 前情提要：
  

微信支付回调是异步任务，前端请求http是同步任务，但微信的支付回调我们是没办法得知触发时间
例如：当用户在支付中间页完成支付后切回业务页面，我们要查询当前订单的支付状态，不能即刻查询 借鉴其他支付交易的交互，H5页面利用的是倒计时交互实现虚拟异步

• 小程序支付中支付中间页与客户端页面之间的跳转，在安卓、苹果、鸿蒙系统的行为表现是一致，统一监听visibilitychange事件来进行逻辑编写即可
  

1. document.addEventListener('visibilitychange', function() {
3. // 用户息屏、或者切到后台运行 （离开页面
5. if (document.visibilityState === 'hidden' ) {
7. // 一些业务逻辑：比如开始倒计时开始，倒计时完微信支付状态回调查询
9. // some code
11. console.log('hidden')
13. }
15. // 用户打开或回到页面
17. if (document.visibilityState === 'visible') {
19. // 一些业务逻辑
21. // some code
23. console.log('visible')
25. }
27. })

复制代码

• 而H5支付，安卓、苹果、鸿蒙系统的行为表现不一致，再通过统一监听visibilitychange事件无法满足微信支付状态回调查询
  

• 在ios系统中，企业微信浏览器上跳转微信H5支付，会换起微信应用打开H5支付控件，这样客户端页面的所有数据和状态都会保留，所以依然可以用visibilitychange事件监听
  

 2. 在安卓和鸿蒙系统，企微浏览器换起H5支付中间页，是直接在当前浏览器窗口替换了客户端页面，所以支付完成返回客户端页面后，页面所有的状态和原有数据都会被清空。如图，这会造成两个问题：

2.1：支付完成后回到客户端页面，查询订单状态所需要的订单信息会丢失如何保留当前订单信息 2.2：微信支付回调是异步任务，前端请求http是同步任务如何正确延时发http请求
3.自定义拼接跳转中间页的redirect_url就可以解决这两个问题，支付完成后微信会重定向回我们自定义的url,在url上加上业务需要的信息，重定向回客户端后，就可以拿到状态和数据了

1. // 自定义拼接redirect_url
3. const setToPayURL = (res:string)=>{
5. let redirectUrl = `${myurl}?订单id=payResultId&页面状态=1`
7. redirectUrl = encodeURIComponent(redirectUrl)
9. window.location.href = `${res}&redirect_url=${redirectUrl}`
11. }

复制代码

五、  微信支付相关

小程序支付对接

小程序提供了获取小程序短链的开放能力，H5页面可以直接触发跳转到微信小程序，在小程序中唤起支付控件
详情查看相关文档： 获取 URL Scheme | 微信开放文档
● 前期准备：开小程序账号并认证、开商户号、然后商户号和小程序需要关联。商户号和微信小程序认证都需要绑定具有合规经营的主体。
详情查看小程序支付接入前准备：接入前准备-小程序支付 | 微信支付商户台文档中心
● 开发流程：开发指引-小程序支付 | 微信付商户平台文档中心
H5支付对接

● 前期准备：开小程序账号并认证、开商户号、然后商户号和小程序需要关联。商户号和微信小 程序认证都需要绑定具有合规经营的主体。
详情查看H5支付接入前准备：接入前准备-H5支付 | 微信支付商户平台文档中心
● 开发流程：开发指引-H5支付 | 微信支付商户平台文档中心
总结

• 对接第三方服务商坑总结：一旦涉及研发工作量，研发团队需尽早和第三方服务商对接
  
• 小程序支付坑总结：内容的管控比较严格，需有闭环的业务场景；费率最好不要用低于微信官方的，特别还是“免费”的
  
• H5支付坑总结：对内容管控相对宽松，但商户申请支付权限相对严格，需要域名备案、三体一致
  
• 其他：需要时刻关注平台管控；风控的规则一般不会那么明显，所以最好能找到服务机构和内部人员；功能层面要规划支付被封后的过渡方案
  

本文转载于:

https://juejin.cn/post/7273301807709896762

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

 

来源:https://www.cnblogs.com/smileZAZ/p/17705743.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！