多合一收款二维码原理及实现(源码)

mengkun 86.8K 102

最近芝麻二维码的“收款码合并”火了，它能将微信收款码和支付宝收款码合并为一个二维码！听上去感觉很神奇，其实原理非常简单！

无论是支付宝还是微信的收款码，其本质上是一个包含了收款链接的二维码。所以我们的思路是：检测如果是支付宝浏览页面，就给出支付宝的付款链接、如果是微信，就给出微信链接……

那么问题来了，如何进行判定呢？

很好办，根据 UA 就能进行判定了！不懂什么是 UA？请参照 浏览器野史 – UserAgent列传 这篇博文。

这部分的代码如下：

  1. if(navigator.userAgent.match(/Alipay/i)) {
  2.     // 支付宝
  3. } else if(navigator.userAgent.match(/MicroMessenger\//i)) {
  4.     // 微信
  5. } else if(navigator.userAgent.match(/QQ\//i)) {
  6.     // QQ
  7. } else {
  8.     // 其它
  9. }

理论上来说，进行判定后直接给跳转到对应的收款页面就行了，然而实际测试发现在QQ和微信中并不能直接调用付款功能，只有支付宝能直接进行付款。

这里就只能用一个折中的办法：如果是QQ或微信扫的码，就再放出一个二维码的界面，让用户通过长按识别二维码进入支付流程。

最终完成的效果如下：

多合一收款二维码原理及实现(源码)

你可以用 QQ 或是微信或是支付宝中的任意一个扫描这个二维码进行测试(当然如果还打个款就再好不过了，哈哈哈哈…… [憨笑] )

成品源码下载(单文件纯 html 实现，需上传至网站空间使用)：

Github 直链下载

注：请将代码中的收款链接按以下教程修改为自己的。

请用专门的 Html 编辑器(如 notepad++)进行编辑，切勿直接用记事本编辑，否则可能出现中文乱码！

收款链接获取方法

以下以微信为例，QQ、支付宝的获取方法类似。

打开微信，点击右上角>收付款

多合一收款二维码原理及实现(源码)

找到“二维码收款”

多合一收款二维码原理及实现(源码)

将得到的收款二维码保存(截图)

多合一收款二维码原理及实现(源码)

用二维码识别工具(如 https://cli.im/deqr/) 上传二维码图片并获取到二维码中的收款链接。

多合一收款二维码原理及实现(源码)

将获取到的收款链接粘贴并替换源码中的链接即可。

多合一收款二维码原理及实现(源码)

本文作者为mengkun，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

  1. 豆馅
    豆馅 Lv 1

    不知道怎么回事,三个收款链接都更换了,支付宝和QQ可以,就是微信有问题,微信出来就不是我的收款链接,应该还是站长你的吧?微信端二维码我识别了,确定不是我的.

    #60 2022-04-20 16:19 回复
  2. 可爱
    可爱 Lv 1

    2021年1月23日使用发现微信扫码后长按不会在下方出现支付给xx，之前是正常的，可能是微信机制更新了

    #59 2022-01-23 17:44 回复
  3. linzf
    linzf Lv 1

    在安卓APP弹出收款码，怎么验证别人支付成功了,这个流程怎么弄的

    #58 2021-07-06 18:30 回复
  4. 一夕茵yixiyin.com
    一夕茵yixiyin.com Lv 1

    怎么验证别人支付成功了,这个流程怎么弄的

    #57 2020-10-17 00:21 回复
  5. 随缘
    随缘 Lv 1

    孟总，怎么不写成，别人可以自己上传他的收款码，然后生成他自己的三码合一图。自己拿去用！

    #56 2020-06-09 01:38 回复
  6. z\'z\'z\'z
    z\'z\'z\'z Lv 1

    博主有办法把云闪付加进去不[aru_1]

    #55 2020-05-19 11:29 回复
  7. 安德风
    安德风 Lv 1

    博主这种方法有点鸡贼啊，原理挺简单的

    #54 2020-05-07 00:34 回复
  8. nzj88
    nzj88 Lv 3

    支付宝app扫描404错误，我用的商家收款码

    #53 2020-05-04 15:05 回复
  9. 66
    66 Lv 1

    部署到本地服务器不行吗？

    #52 2020-03-09 00:16 回复
  10. 66
    66 Lv 1

    为什么会闪退呢？

    #51 2020-03-09 00:11 回复
  11. 瓦刀
    瓦刀 Lv 1

    为啥显示QQ被封号[aru_4]

    #50 2020-02-26 15:19 回复
    • mengkun
      mengkun 站长

      @瓦刀是我的 QQ 被封号了，无法使用 QQ 收款。所以【演示地址】暂时去掉了 QQ [aru_15]

      2020-02-26 19:35 回复
      • 瓦刀
        瓦刀 Lv 1

        @mengkun是咋被封的，不是因为这个收款二维码封号的吧[aru_19][aru_16]

        2020-02-26 19:43 回复
      • mengkun
        mengkun 站长

        @瓦刀与这个收款码无关。多合一码并不会篡改原版收款二维码，无任何安全性问题。可以放心使用。

        2020-02-27 20:27 回复
      • ac
        ac Lv 1

        @mengkun博主 apple和andriod下载地址的二合一二维码也是这样做吗

        2021-05-10 19:04 回复
  12. WWW
    WWW Lv 1

    你的代码已经被人放在淘宝上出售了，链接 https://item.taobao.com/item.htm?spm=a230r.1.14.27.43e936b9efWru7&id=608434916713&ns=1&abbucket=2#detail

    还有别放在网站上出售的：https://www.qingyuanma.com/yuanma-3674-1-1.html

    #49 2020-02-10 13:43 回复
    • mengkun
      mengkun 站长

      @WWW谢谢！这类太多了，我也无能为力……

      2020-02-11 22:08 回复
      • lanhuasoft
        lanhuasoft Lv 1

        @mengkun你好，我想做一个收款链接，html或集成的，然后我们ERP可以跳转让操作者付款后，得到付款成功后的信息

        2022-03-20 09:51 回复
  13. 花边
    花边 Lv 1

    博主您好，请问银联云闪付的二维码可以加进去吗，请问一下银联云闪付的UA是哪个，我用了银联云闪付app扫你那个检测UA的，在app里面直接跳浏览器了，找不到UA，没办法测试

    #48 2019-12-23 22:19 回复
    • mengkun
      mengkun 站长

      @花边这种情况没法做收款码合并。因为就算取到了 UA，然后做成了合并后的码，到时扫一下还是会直接跳到浏览器打开……

      2019-12-25 08:20 回复
  14. 啊哈
    啊哈 Lv 1

    QQ扫码出现非官方链接 没办法支付

    #47 2019-09-20 20:42 回复
  15. 徐
    徐 Lv 1

    二维码链接替换后，手机扫描二维码闪退，怎么回事啊？帮忙解决一下

    #46 2019-08-31 13:45 回复
    • 徐
      徐 Lv 1

      @徐我是用notepad++替换链接保存后，直接打开扫的！

      2019-08-31 14:04 回复
    • 徐
      徐 Lv 1

      @徐无法跳转到支付页面，直接闪退！

      2019-08-31 15:48 回复
    • 徐
      徐 Lv 1

      @徐试了好久，实在是跳转不过去啊！

      2019-08-31 16:11 回复
      • Thuscom
        Thuscom Lv 1

        @徐需要把这个网页部署到主机或者对象存储才行，因为万能码页面用了搜狐快站的二维码API，你放在本地的话，api返回的二维码链接就是本地链接，支付宝当然扫不了，也跳转不到支付宝付款的页面，或者你把里面的代码改了，不用api生成二维码，直接用生成好的二维码图片。

        2020-02-24 02:31 回复
  16. 叶惜
    叶惜 Lv 1

    为什么微信会跳转到一个新的窗口再次扫描，怎么解决？

    #45 2019-08-09 15:31 回复
  17. 王小亮
    王小亮 Lv 1

    NORKSOFT官网 友链打不开 哥··

    #44 2019-06-09 10:09 回复
  18. 王小亮
    王小亮 Lv 1

    坤哥，默默地能不能教教我，小白也是很懵逼啊，但是看着这操作6的飞起

    #43 2019-06-09 09:17 回复
  19. 追忆
    追忆 Lv 1

    我按你的教程搞的 可是出来是个白页面 查看图片

    #42 2019-04-28 09:35 回复
    • mengkun
      mengkun 站长

      @追忆QQ 的收款链接里面换行了。双引号中的内容不要有换行

      2019-04-28 17:37 回复
  20. x240
    x240 Lv 1

    微信的失效了,显示的是网址

    #41 2019-03-31 20:38 回复
  21. 佳程网络
    佳程网络 Lv 1

    QQ的失效了

    #40 2019-03-14 14:38 回复
  22. 小吾
    小吾 Lv 1

    二维码保存到手机相册，再扫一扫里打开相册找不到二维码，或者弹出提示未发现二维码

    #39 2019-02-24 23:07 回复
  23. 小眼瓜
    小眼瓜 Lv 1

    按您的教程。全部替换了。最终生成的二维码，微信，QQ都正常有效。但是支付宝的却没有替换，跳转的还是您的支付宝。问题可能出在哪？

    #38 2019-01-31 15:57 回复
    • mengkun
      mengkun 站长

      @小眼瓜可能是你的网站用了 CDN，缓存没更新
      也可能是你的浏览器缓存没更新
      还可能是你的支付宝收款链接贴错了

      2019-01-31 15:59 回复
      • 小眼瓜
        小眼瓜 Lv 1

        @mengkun刷新后，解决了。感谢。

        2019-01-31 16:19 回复
  24. 迷弟
    迷弟 Lv 1

    微信扫码后提示非官方网页咋整 大佬？

    #37 2019-01-28 19:16 回复
  25. 洲
    洲 Lv 1

    用不了啊，怎么办

    #36 2018-12-04 00:35 回复
  26. 展展
    展展 Lv 1

    有了网站空间之后该怎么整[aru_3]

    #35 2018-11-14 22:42 回复
  27. 兰染
    兰染 Lv 1

    get新技能[aru_1]

    #34 2018-10-12 16:17 回复
  28. Virgo
    Virgo Lv 1

    多写分享，用hexo本地运行的时候竟然不行，我还以为失效了[aru_1]，部署好就可以了

    #33 2018-08-22 23:24 回复
  29. ACG资源
    ACG资源 Lv 1

    相当不粗哦的哈。。

    #32 2018-07-19 20:50 回复
  30. java
    java Lv 1

    你好，有了支付宝付款码链接，如下脚本直接可以调转到支付宝支付页面？本地试了不行，

    if(navigator.userAgent.match(/Alipay/i)) {
    // 支付宝
    window.location.href = setting.aliUrl;
    }

    #31 2018-05-24 11:16 回复
    • mengkun
      mengkun 站长

      @java只有在支付宝客户端内该代码才有效。作用是唤出付款界面。在支付宝外无效

      2018-05-24 15:49 回复
      • java
        java Lv 1

        @mengkun是指通过支付宝扫描（客户端）的聚合码（链接）跳转到有该代码aliUrl才起作用，是这样理解吧?

        2018-05-24 17:14 回复
分享