支付二维码整合 - 三码合一支持支付宝、QQ、微信
支付二维码整合 - 三码合一支持支付宝、QQ、微信
1. 前提:获取各个二维码的具体内容
在写代码前,我们需要先获取不同支付方式的二维码内容。很简单,只需要打开各个支付码,截图,然后随便找个可以扫码的工具把各个码的内容给扫出来,得到文本内容即可。下面是我的内容:
支付宝:
https://qr.alipay.com/tsx108134acakckixsivtd4
wxp://f2f0kIl6qSrlWNFuIo8t8rXCU7Si7CC7ucQs
https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&f=wallet&a=1&ac=CAEQi5uqmQMY8Y-T_wU=_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=_xxx_sign&u=QQ号&n=昵称"; }
return 400 "不支持的类型";
}
经测试,发现QQ, 微信不可以用😢 可能是腾讯为了安全规避了由跳转过来的调用吧。
3. 方法二:使用独立的二维码1
由于不能使用跳转去完全支持三种支付方式了。这里我们小改一下,首先用二维码生成工具生成样式统一的二维码,因为原生那个三家的码都长得不太一样会影响美观。
然后小改一下上面的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 的方式实现最终的实用性还是槽点满满的,所以,要真有刚需的还是接第三方的服务吧~
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfgaefi
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13