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

2023-09-15 18:49 由林恒发表于 #前端开发

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

背景

应用背景：vite搭建的vue3项目
需求背景：功能都涉及了支付业务，故需要和外部支付系统对接
外部支付系统：聚合支付、微信小程序支付、微信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事件来进行逻辑编写即可

document.addEventListener('visibilitychange', function() {

// 用户息屏、或者切到后台运行 （离开页面

if (document.visibilityState === 'hidden' ) {

// 一些业务逻辑：比如开始倒计时开始，倒计时完微信支付状态回调查询

// some code

console.log('hidden')

}

// 用户打开或回到页面

if (document.visibilityState === 'visible') {

// 一些业务逻辑

// some code

console.log('visible')

}

})

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

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

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

2.1：支付完成后回到客户端页面，查询订单状态所需要的订单信息会丢失如何保留当前订单信息 2.2：微信支付回调是异步任务，前端请求http是同步任务如何正确延时发http请求

3.自定义拼接跳转中间页的redirect_url就可以解决这两个问题，支付完成后微信会重定向回我们自定义的url,在url上加上业务需要的信息，重定向回客户端后，就可以拿到状态和数据了

// 自定义拼接redirect_url

const setToPayURL = (res:string)=>{

let redirectUrl = `${myurl}?订单id=payResultId&页面状态=1`

redirectUrl = encodeURIComponent(redirectUrl)

window.location.href = `${res}&redirect_url=${redirectUrl}`

}

五、微信支付相关

小程序支付对接

小程序提供了获取小程序短链的开放能力，H5页面可以直接触发跳转到微信小程序，在小程序中唤起支付控件

详情查看相关文档：获取 URL Scheme | 微信开放文档

● 前期准备：开小程序账号并认证、开商户号、然后商户号和小程序需要关联。商户号和微信小程序认证都需要绑定具有合规经营的主体。

详情查看小程序支付接入前准备：接入前准备-小程序支付 | 微信支付商户台文档中心

● 开发流程：开发指引-小程序支付 | 微信付商户平台文档中心

H5支付对接

● 前期准备：开小程序账号并认证、开商户号、然后商户号和小程序需要关联。商户号和微信小程序认证都需要绑定具有合规经营的主体。

详情查看H5支付接入前准备：接入前准备-H5支付 | 微信支付商户平台文档中心

● 开发流程：开发指引-H5支付 | 微信支付商户平台文档中心

总结

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

本文转载于:

https://juejin.cn/post/7273301807709896762

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