本文介绍如何将支付宝、微信的收款码合并成同一个二维码。
准备
在支付宝和微信的手机客户端中保存两张收款二维码图片。
扫描支付宝二维码,获得内容,例如 https://qr.alipay.com/xxxxxxxxxxxxxxxxxx
。
在博客或网站根目录下创建一个目录 pay
。
PS 得到的微信二维码,修改提示为长按扫描。
将此图片命名为 wechat_pay_qrcode.jpg
放于 pay
目录下。
创建网页文件
在 pay
目录下创建 index.html
文件,以作为跳转的网址。本文通过判断浏览器的 user-agent 来区分支付宝客户端和微信客户端。创建文件示例,请修改其中的支付宝链接为你之前得到的自己的链接,修改其中的 paypal 跳转至你想在均非支付宝、微信情况下扫码应跳转到的页面:
index.html1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
| <!DOCTYPE html> <html> <head> <title></title> <style> .responsive { max-height: 100%; max-width: 100%; } </style> </head> <body> <img src="./wechat_pay_qrcode.jpg" id="pid" style="visibility:hidden;" class="responsive"/> <script> function is_alipay(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/AlipayClient/i)=="alipayclient") { return true; } else { return false; } }
function is_weixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return false; } }
if (is_alipay()) { window.location.href='https://qr.alipay.com/fkx05073uyexvogydhhzsb5'; } else if (is_weixin()) { document.getElementById("pid").style.visibility = 'visible'; } else { window.location.href='https://www.paypal.me/zhaosi'; } </script> </body> </html>
|
制作新的二维码
在线寻找工具制作二维码,内容为 http(s)://网站域名/pay/
,例如 https://dreamcreator108.com/pay/
至此,二合一二维码已经制作完毕。
References
Hexo 博客添加打赏功能
JavaScript 函数调用
微信支付和支付宝使用同一个二维码
一码付,同一个二维码支持微信和支付宝同时扫码支付?
hexo 摸爬滚打之进阶教程
芝麻收款码合并
微信、手 Q、QQ 浏览器 userAgent 记录
js 跳转页面方法
JavaScript if…Else 语句
自己搭建服务器,把微信与支付宝的收款码安全地合二为一
How to align a HTML image to the center
How TO - Responsive Images