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

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

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

背景

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

目录

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

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

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

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

解决1:只要涉及到研发工作,业务需通知研发团队需同时和服务商对接,这样研发团队可以尽早了解到相关风险

一开始和服务商聚合支付对接H5的支付功能,只有业务参与了。待业务敲定后再通知研发团队要使用服务商支付服务,接着研发团队和服务商研发团队 对接技术方案,研发完成上线

直到小程序被封第一次,研发团队才知道聚合支付服务是免费的,且服务商聚合支付并没有完全被微信支付官方认可 所以,当小程序被封后,服务商解决问题的态度是不积极的

踩坑2:对接第三方服务时,不要被对方的方案牵着走

解决2:使用第三方服务过程中,若方案需要调整,内部需要及时同步并坚定自身方案和立场

H5应用最先方案是和服务商进行H5支付对接,但在对接过程中,H5支付走不通。对方未告知具体原因的情况下,让我们换成小程序支付,内部研发团队没有经过统方案调整同步的情况下,服务商私自更改了对接方案;固内部整个研发团队被推动着改变了支付方案,使后续开发进行方案调整非常被动

具体分步解决

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

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

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

解决3:不再通过服务商对接,小程序应用直接和微信小程序支付对接。

项目上线后。腾讯突然直接把小程序封了,没有任何预警通知,直接封。

聚合支付底层用的还是微信支付那一套系统,所以开发小程序对接使用的是微信小程序载体,那同时得遵守微信支付的规则

小程序被封后,官方发出的公告指出我们存在利用技术绕开审核的行为。并指引我们查看到以下图中内容

但询问微信内部人员,给出真正理由是:使用了聚合支付,违背了微信费率规则

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

 

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

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

解决4:改用微信H5支付

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

小程序确实只有三个页面:登录页面、支付页面,支付完成页面

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

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

具体分步解决:

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

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

解决5:功能层面要规划脱离依赖外部能力的备选方案

一开始没有备选方案的意识。被封后,导致业务受阻

当小程序相继两次被封后,我们意识到需要有过渡方案:预备脱离线上支付交易受阻,如何不影业务工作的方案

本应用实现的备选方案:手动切换线上线下支付交易方案,当微信支付能正常使用时,就走常规的线上交易流程。当微信支付发生意外,被封被禁后能快速启动线下支付备选方案,保障业务不受影响

三、  对接微信H5支付踩坑

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

解决6:商户申请H5支付权限

由于之前对接小程序支付给接入准备已经走过一遍了,小程序支付不需要商户申请支付权限,只需要把商户号和公众号绑定上就行

所以没有意识到商户需要申请H5支付权限,且忽略了接入前准备-H5支付 | 微信支付商户平台文档中心最后一行小字。这直接引出了坑7,并且需要花费比较长的时间解决

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

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

解决7:为H5应用申请域名并进行ICP备案

商户申请H5支付权限必须要遵守商户申请H5支付权限需要注意哪规则?,发现支付域名和网站域名的主体和商户号的主体不一致,由于企业内部架构的原因:

H5网页的域名的ICP注册主体是A公司

需要申请H5支付权限的商户号主体是B公司

且A公司和B公司的关系不在以下4种范围中,那只能为H5网页单独申请域名

记录--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事件无法满足微信支付状态回调查询
  1. 在ios系统中,企业微信浏览器上跳转微信H5支付,会换起微信应用打开H5支付控件,这样客户端页面的所有数据和状态都会保留,所以依然可以用visibilitychange事件监听

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

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

记录--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支付 | 微信支付商户平台文档中心

总结

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

本文转载于:

https://juejin.cn/post/7273301807709896762

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

 

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件举报,一经查实,本站将立刻删除。

本文链接:https://www.f2er.com/3188623.html

大家都在看

  • 飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索

    本篇文章从数据中心,事件中心如何协议工作、不依赖环境对vue2.x、vue3.x都可以支持、投产页面问题定位三个方面进行分析。
    2023-11-16 博文
  • 如何优雅使用 vuex

    大纲 本文内容更多的是讲讲使用 vuex 的一些心得想法,所以大概会讲述下面这些点: Q1:我为什么会想使用 vuex 来管理数据状态交互? Q2:使用 vuex 框架有哪些缺点或者说副作用? Q3:我是如何在项目里使用 vuex 的? 初识 vuex 对于 vuex,有人喜欢,有人反感 喜欢的人觉
    2023-11-16 博文
  • 第三方组件及计算属性传参的问题解决方式

    1. 前言 唉,好想玩滋嘣。 2. 计算属性直接传参接收不到 表格数据某一列需要用的计算属性时,模板中使用计算属性 fullName 就会直接调用 fullName 函数,而在模板中 fullName(item) 相当于fullName()(item),此处为函数柯里化。 <el-table-
    2023-11-16 博文
  • 记录--Vue3基于Grid布局简单实现一个瀑布流组件

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 在学习Grid布局之时,我发现其是CSS中的一种强大的布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,在刷某书和某宝首页时,我们发现其展示方式就是一种瀑布流,是一种流行的网站页面布局,视觉表……
    2023-11-16 博文
  • 用强数据类型保护你的表单数据-基于antd表单的类型约束

    接口数据类型与表单提交数据类型,在大多数情况下,大部分属性的类型是相同的,但很少能做到完全统一。我在之前的工作中经常为了方便,直接将接口数据类型复用为表单内数据类型,在遇到属性类型不一致的情况时会使用any强制忽略类型错误。后来经过自省与思考,这种工作模式会引起各种隐藏bug,一定有更……
    2023-11-16 博文
  • pinia的使用

    前言 最近新开了个项目,以前老项目都是vue2+vuex开发的,都说用vue3+pinia爽得多,那新项目就vue3+pinia吧。这里记录一下pinia的使用。 使用方法 安装pinia: npm i pinia main.js中引入pinia: //main.js import { create
    2023-11-16 博文
  • 记录--让我们来深入了解一下前端“三清”是什么

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前端“三清” 在前端开发中,我们经常听到关于“三清”的说法,即 window、document、Object。这三者分别代表了 BOM(浏览器对象模型)、DOM(文档对象模型)以及 JS 的顶层对象。在这个体系中,我们通过 JavaScr
    2023-11-16 博文
  • 记录--啊?Vue是有三种路由模式的?

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 众所周知,vue路由模式常见的有 history 和 hash 模式,但其实还有一种方式-abstract模式(了解一哈~) 别急,本文我们将重点逐步了解: 路由 + 几种路由模式 + 使用场景 + 思考 + freestyle 路由概念
    2023-11-16 博文