王旭阳个人博客

WXY

支付宝和微信收款码二合一(图层合并)

2025-01-09

开源免费通过图层合并实现的.纯前端项目

使用截图

2025-01-09-fkieylrb.png

在线地址

https://www.wxy97.com/ali-wechat-pay

上传收款码,微调支付宝清楚区域即可!

主要合并方式实现有三种:

  • 通过 UA 判断

  • 图片合并

  • 第三方支付平台接入


UA(User Agent)判断

原理

根据访问者的 User Agent 信息判断访问者使用的 App(支付宝或微信)。

  • 如果检测到 User Agent 包含微信标识,则跳转微信收款链接。

  • 如果检测到 User Agent 包含支付宝标识,则跳转支付宝收款链接。

优点

  • 实现简单:只需一个中间页面进行 UA 判断并跳转。

    可以纯前端,把两个链接都包含在二维码中.

    也可以把数据放后端

缺点

  • UA 可能变更:微信和支付宝的 User Agent 格式可能会更新。

  • 微信不支持直接拉起:需要客户长按识别二维码。

  • 不稳定:需要中间页面的服务器响应。服务器挂了就没办法使用

  • 不安全: 跑路还好,最多不能用.如果后台恶意修改代码,钱就没了


第三方支付平台接入

原理

通过接入第三方支付平台,使用它们提供的 API 同时支持支付宝和微信支付。

优点

  • 功能丰富:支持更多支付方式(如银联、信用卡)。

  • 自动化程度高:无需自行维护逻辑。

缺点

  • 成本较高:需要支付服务费或分成。

  • 依赖第三方服务:平台不可用时可能影响业务。

二维码合并

2025-01-09-plljoekx.png

原理

通过二维码的纠错机制,即使有一部分二维码被覆盖,也能正确解析.

支付宝的链接是https://qr.alipay.com/xxx

微信的链接是wxp://xxxx

微信识别二维码偏向于从左到右识别,支付宝不搭理微信的链接wxp://xxxx

其实不限于支付,其他微信/支付宝扫码都可以这个搞

所以可以这么实现:

  • 把链接解析出来,然后用最高容错H(30%纠错),重新生成二维码

  • 把微信作为底层,支付宝放在上层的右下角

  • 顺时针旋转支付宝180°,防止微信优先识别支付宝二维码

  • 删除支付宝的一部分,防止微信优先识别支付宝二维码

优点

  • 简单易用:纯物理方式。没有服务器,不担心安全问题

缺点

  • 兼容性有限:就能两个,3个(比如)都实现不了。

  • 抗污能力差:如果涂黑了一部分,很容易导致用不了,不再像原生二维码那样有强大纠错能力。

  • 微信拉起失败:极少部分情况下微信还是会打开支付宝的链接

Github地址

https://github.com/pzx521521/parap-tool

原帖地址: https://www.52pojie.cn/thread-1997987-1-1.html