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

微信:

然后小改一下上面的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 的方式实现最终的实用性还是槽点满满的,所以,要真有刚需的还是接第三方的服务吧~

支付二维码整合 - 三码合一支持支付宝、QQ、微信的更多相关文章

  1. 微信支付之01------获取订单微信支付二维码的接口------Java实现

    [ 前言:以前写过一个获取微信二维码支付的接口,发现最近公司新开的项目会经常用到,现在我又翻出代码看了一遍,觉得还是把整个代码流程记下来的好 ] 借鉴博客: 他这篇博客写得不错,挺全的:https:/ ...

  2. 通过生成支付二维码来实现微信支付的解决方案 - EasyWechat版(转)

    上一篇我们讲了在微信浏览器内实现微信支付的功能,它特别适合于一些基于微信公众号的h5站点等,支付流程也相当流畅,但是... 还有一种情况,比如现在北哥兄弟连PC版,是生成了一个二维码,这个二维码是专属 ...

  3. PHP实现一个二维码同时支持支付宝和微信支付

    实现思路 生成一个二维码,加入要处理的url连接 在用户扫完码后,在对应的脚本中,判断扫码终端,调用相应的支付 若能够扫码之后能唤起相应app,支付宝要用手机网站支付方式,微信要使用jsapi支付方式 ...

  4. 微信web端生成支付二维码

    授权获取二维码类: <?php /** * Trade类 * @author xyyphp * @date 2016/10/10 */ abstract class TradeControlle ...

  5. springboot微信支付,支付二维码生成

    https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_1 微信扫码支付开发者文档,里面会有支付流程的教程 接口链接 URL地址:htt ...

  6. asp.net mvc PC端二维码支付实例(微信二维码支付)

    一.微信支付方式介绍 微信提供了各种支付方式,试用于各种不同的支付场景,主要有如下几种: 1.刷卡支付 刷卡支付是用户展示微信钱包内的“刷卡条码/二维码”给商户系统扫描后直接完成支付的模式.主要应用线 ...

  7. JAVA实现的微信扫描二维码支付

    吐槽一下 支付项目采用springMvc+Dubbo架构实现,只对外提供接口. 话说,为什么微信支付比支付宝来的晚了那么一点,一句话,那一阵挺忙的,然后就没有时间整理,最近做完支付宝支付,顺便也把微信 ...

  8. (用微信扫的静态链接二维码)微信native支付模式官方提供的demo文件中的几个bug修正

    native支付模式一demo(用微信扫的静态链接二维码)BUG修复,一共4个BUG 1.native_call_qrcode.php这个文件中的代码无法生存native支付的短地址2.WxPayPu ...

  9. 微信支付生成带logo的二维码

    利用到一个qrcode类 比较简洁 原作者没有加入二维码嵌入logo的功能 在这里我进行了小小的修改 可以实现生成微信支付二维码时打上logo 生成png格式的利用到该类中的png方法(我已经改好了) ...

随机推荐

  1. 视频处理器为电池供电的设计提供4K视频编码

    视频处理器为电池供电的设计提供4K视频编码 Video processor enables 4K video coding for battery-powered designs OmniVision ...

  2. C#后台定义一个DataTable并手动写入静态数据(测试数据)

    //创建一个DataTable,并为之添加数据(自定义DataTable) DataTable dtz = new DataTable(); //添加Table中的列 DataColumn dc1 = ...

  3. Java IO学习笔记一:为什么带Buffer的比不带Buffer的快

    作者:Grey 原文地址:Java IO学习笔记一:为什么带Buffer的比不带Buffer的快 Java中为什么BufferedReader,BufferedWriter要比FileReader 和 ...

  4. Pandas高级教程之:Dataframe的合并

    目录 简介 使用concat 使用append 使用merge 使用join 覆盖数据 简介 Pandas提供了很多合并Series和Dataframe的强大的功能,通过这些功能可以方便的进行数据分析 ...

  5. robotframework常用关键字

    robotframework关键字 可以将关键字看作是处理数据的方法.robotframework的关键字和测试数据组成了测试用例. robotframework关键字包括系统关键字和用户关键字.用户 ...

  6. 每日三道面试题,通往自由的道路5——JVM

    茫茫人海千千万万,感谢这一秒你看到这里.希望我的面试题系列能对你的有所帮助!共勉! 愿你在未来的日子,保持热爱,奔赴山海! 每日三道面试题,成就更好自我 昨天既然我们聊到了JVM,那我们继续这一个话题 ...

  7. 使用jsonp实现跨源请求

    jsonp 该技术用来实现跨源请求,即向协议.域名.端口号不同的服务器发送请求 通过使用 script 标签的 src 向服务器发送GET请求http://xxx/xxx?callback=callb ...

  8. 【原创】Ingress-Nginx-Controller的Metrics监控源码改造简析

    一.背景 目前我们的生产环境一层Nginx已经容器化部署,但是监控并不完善,我们期望其具有Ingress-Nginx-Controller组件上报监控的数据.这样可以建立请求全链路的监控大盘.有利于监 ...

  9. hdu 6030 矩阵快速幂

    大致题意: 一条长度为n的项链,由红色珠子和蓝色珠子(分别用1和0表示)组成,在连续的素数子段中,红色珠子的个数不能少于蓝色珠子.问组成这个项链有多少种方案,求方案数模1000000007 分析: 首 ...

  10. sonarqube 8.9版本配置项目访问权限

    soanrqube设置项目权限 admin->项目->要设置的项目 进行项目权限配置 选择权限 权限配置(公开,私有)如果是公司项目建议选择私有 根据项目团队成员的角色需求,进行勾选配置 ...