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

支付二维码整合 - 三码合一支持支付宝、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:

QQ

微信:

Wechat

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

<s>删减1</s>

上面这个页面,如果你是从微信浏览器打开的应该会看到微信的支付码,如果是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 的方式实现最终的实用性还是槽点满满的,所以,要真有刚需的还是接第三方的服务吧~

7 声望
2 粉丝
0 条评论
推荐阅读
一个奇怪的 Bug
一个奇怪的 Bug非常感谢小赵同学给我反馈的这个 Bug 🙌🙌在开始讲解前先考考你们 Javascript 基础,单看代码你觉得它会输出什么内容?答案后面揭晓。 {代码...} 话说某一天我突然收到一封邮件,一位同学跟我说我的...

阿兵阅读 729

封面图
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.6k评论 2

封面图
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...

chokcoco19阅读 1.7k评论 1

封面图
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.6k

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting14阅读 652评论 3

封面图
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.7k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图
7 声望
2 粉丝
宣传栏