合并支付宝与微信的收款二维码

本文介绍如何将支付宝、微信的收款码合并成同一个二维码。

准备

在支付宝和微信的手机客户端中保存两张收款二维码图片。

扫描支付宝二维码,获得内容,例如 https://qr.alipay.com/xxxxxxxxxxxxxxxxxx

在博客或网站根目录下创建一个目录 pay

PS 得到的微信二维码,修改提示为长按扫描。

将此图片命名为 wechat_pay_qrcode.jpg 放于 pay 目录下。

创建网页文件

pay 目录下创建 index.html 文件,以作为跳转的网址。本文通过判断浏览器的 user-agent 来区分支付宝客户端和微信客户端。创建文件示例,请修改其中的支付宝链接为你之前得到的自己的链接,修改其中的 paypal 跳转至你想在均非支付宝、微信情况下扫码应跳转到的页面:

index.html
1
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