支付二维码整合 - 三码合一支持支付宝、QQ、微信

1. 前提：获取各个二维码的具体内容

在写代码前，我们需要先获取不同支付方式的二维码内容。很简单，只需要打开各个支付码，截图，然后随便找个可以扫码的工具把各个码的内容给扫出来，得到文本内容即可。下面是我的内容：

支付宝：

https://qr.alipay.com/tsx108134acakckixsivtd4

微信：

wxp://f2f0kIl6qSrlWNFuIo8t8rXCU7Si7CC7ucQs

QQ：

https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=CAEQi5uqmQMY8Y-T_wU%3D_xxx_sign&u=QQ号&n=昵称

2. 方法一：使用Nginx 分发内容

可以看到各个支付方式都是甚于带参跳转协议，所以我们可以用一个固定的网址，让它去检测不同的网站进而跳转不同的链接。这一步可以用后台程序跳转，也可以用Nginx 这样的服务器去做，因为只需要能对请求的内容做区分就可以了。

用Nginx 可以这样写：

location /pay {
    if ( $http_user_agent ~* "AlipayClient" ) { return 302 "https://qr.alipay.com/tsx108134acakckixsivtd4"; }
    if ( $http_user_agent ~* "MicroMessenger" ) { return 302 "wxp://f2f0kIl6qSrlWNFuIo8t8rXCU7Si7CC7ucQs"; }
    if ( $http_user_agent ~* "QQ" ) { return 302 "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=CAEQi5uqmQMY8Y-T_wU%3D_xxx_sign&u=QQ号&n=昵称"; }
    return 400 "不支持的类型";
}

经测试，发现QQ, 微信不可以用😢 可能是腾讯为了安全规避了由跳转过来的调用吧。

3. 方法二：使用独立的二维码1

由于不能使用跳转去完全支持三种支付方式了。这里我们小改一下，首先用二维码生成工具生成样式统一的二维码，因为原生那个三家的码都长得不太一样会影响美观。

QQ:

微信：

Wechat

然后小改一下上面的Nginx 配置，改成如果是这两个的话跳转到对应的页面。

~~删减1~~

上面这个页面，如果你是从微信浏览器打开的应该会看到微信的支付码，如果是QQ 浏览器中打开应该会看到QQ 的支付码。如果是从其他浏览器或者PC 则什么码都看不到。

此时的Nginx 的配置：

location /donate {
    root /www/pages/build/donate;

    if ( $http_user_agent ~* "AlipayClient" ) { return 302 "https://qr.alipay.com/tsx108134acakckixsivtd4"; }
    if ( $http_user_agent ~* "MicroMessenger" ) { rewrite ^/(.*) /wechat.html break; }
    if ( $http_user_agent ~* "QQ" ) { rewrite ^/(.*) /qq.html break; }
    return 302 "https://www.pulsgarney.com/";
}

4. 方法三：使用独立的二维码2

做到这里了基本能实现功能了。

但如果用户是直接从手机的客户端里打开那其实那个体验还是不太好。因为那样他们就等于是得扫码，打开对应的页面，然后再长按一次扫码才能看到收银台。这个步骤体验也很糟糕。可以怎么优化一下呢？我们把前端页面的代码修改一下：如果是在手机客户端中打开的那我们就直接显示对应的支付码就好了，不要再显示那个中转页面的二维码了。

这部分的改动就看你用的是什么前端程序了，应对改就行了。下面是我这个博客的部分代码：

const [qrCode, setQrCode] = React.useState('');

React.useEffect(() => {
  const ua = window.navigator.userAgent || '';

  if (ua.includes('AlipayClient')) {
    setQrCode(process.env['REACT_APP_DONATE_ALIPAY'] || '');
  } else if (ua.includes('MicroMessenger')) {
    setQrCode(process.env['REACT_APP_DONATE_WECHAT'] || '');
  } else if (ua.includes('QQ')) {
    setQrCode(process.env['REACT_APP_DONATE_QQ'] || '');
  } else {
    setQrCode(process.env['REACT_APP_DONATE_INDEX'] || '');
  }
}, []);

因为我的博客使用了同构的SSR. 所以需要将浏览器的代码用 React.useEffect 给包起来，否则在服务器渲染时会报错。另外各个不同的二维码内容用环境变量加载起来，这样如果需要替换内容可以不动这部分代码。

经测试，微信正常，但支付宝内好像不让加载JS 文件？页面是加载了，但JS 的功能全废了。。QQ 的二维码好像太复杂没识别出来…… 😭😭

5. 总结

折腾的过程很有意思，但没有和他们合作的能力靠Hack 的方式实现最终的实用性还是槽点满满的，所以，要真有刚需的还是接第三方的服务吧~