Making a Three-in-One Tipping Link
Machine-translated (anthropic, claude-haiku-5-5) from the Chinese original. Read the original in 中文
Recently, while browsing blogs, I noticed that many of them come with a tipping feature. Although few people may actually tip, it is still a gesture of goodwill. It lets the blogger know that their writing has been useful and has helped someone. So I wanted to add a tipping feature too~
But after browsing around on GitHub, I found that tipping plugins are pretty much all the same: QQ scan / WeChat scan / Alipay scan.
Some display every payment code all at once:
Scan this one for WeChat, that one for Alipay. Not only does it load multiple QR codes, but it also needs CSS/JS to make it look nice. For a lazy programmer who doesn't want to write any of that, that just won't do.
So, could we merge QQ, WeChat, and Alipay into one, so that only a single payment code needs to be scanned?
This involves a knowledge point: the User-Agent. The webviews of major tech companies include their own app's UA information. For example:
QQ:
MQQBrowser/6.2TBS/043221Safari/537.36QQ/7.0.0.3135WeChat:
MQQBrowser/6.2 TBS 043220 Safari/537.36 MicroMessenger/6.5.8.1060NetType/4GLanguage/zh_CNAlipay:
UCBrowser/11.5.0.939UCBS/2.10.1.6Mobile Safari/537.36AliApp(AP/10.0.15.051805)AlipayClient/10.0.15.051805 Language/zh-HansThis makes it easy to tell whether a scan comes from QQ, WeChat, or Alipay:
That's the analysis done, so let's get to work.
User-Agent containing QQ/ means QQ
User-Agent containing MicroMessenger means WeChat
User-Agent containing AlipayClient means Alipay
Since we can distinguish each app, we can build a URL of our own. After a QR code pointing to this URL is scanned, the server checks the browser's UA and serves different payment codes accordingly.
The general flow is:
Client scans code -> server determines client type from User-Agent -> returns different handling for each type
First, decoding: you can go here to decode
QQ:
https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&a=1&u=17878127&ac=E04BE442991E7FFED28B3B5C3E187148F063DC3C6DACAD2983C87B482FC9E7AD&n=薛定谔的猫&f=wallet(https protocol, cannot wake up QQ)
Alipay:
HTTPS://QR.ALIPAY.COM/FKX03549OW666ME7BXWF7A(https protocol, can directly wake up the Alipay APP)
WeChat:
wxp://f2f09hjzo72AAYEITIBaolV-3cvGrDjE0q7k(WeChat's own payment protocol, cannot wake up WeChat)
Now we can write the code directly. If the User-Agent is Alipay, redirect directly to the Alipay link; if it is QQ or WeChat, redirect to the QQ or WeChat link.
However, since QQ and WeChat cannot be woken up directly, we simply output a QQ and WeChat QR code, and users long-press to scan it and complete the payment.
The code is as follows:
<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if (strpos($ua, 'MicroMessenger')) {
$type = 'wepay';
$name = '微信支付';
//你的微信支付链接
$url = 'wxp://f2f09zG5DQPSOuUPNNMrMyxwFPagCJUzo30v';
$icon_img = '<img src="http://ww2.sinaimg.cn/large/005zWjpngy1fojrwgr20oj303k03kglg.jpg" width="48px" height="48px" alt="'.$name.'">';
}elseif (strpos($ua, 'AlipayClient')) {
//你的支付宝链接
$url = 'HTTPS://QR.ALIPAY.COM/FKX05405VRFBWPNF4WJ98E';
header('location: ' . $url);
}elseif (strpos($ua, 'QQ/')) {
$type = 'qq';
$name = 'QQ钱包支付';
//你的QQ钱包支付链接
$url = 'https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&a=1&u=1242251966&ac=EBF630D218693B4D2D518335739288674D54816FED8990141085439E9F9715B4&n=%E6%80%BB%E5%88%86%E4%B8%8D%E4%B8%8A600%E4%B8%8D%E6%94%B9%E5%90%8D&f=wallet';
$icon_img = '<img src="http://ww2.sinaimg.cn/large/005zWjpngy1fojrvmp427j303k03kjrb.jpg" width="48px" height="48px" alt="'.$name.'">';
}else {
$type = 'other';
$name = '打赏作者';
$url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$icon_img = '<img src="http://ww2.sinaimg.cn/large/005zWjpngy1fojs089x6tj303k03kjr6.jpg" width="48px" height="48px" alt="'.$name.'">';
}
$qr_img = '<img src="http://qr.liantu.com/api.php?text='.urlencode($url).'">';?><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?=$name?></title>
<style type="text/css">
* {margin: auto;padding: 0;border: 0;}
html {-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%}
body {font-family: -apple-system, SF UI Text, Arial, Microsoft YaHei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;color: #333;}
img {max-width: 100%;}
h3 {padding: 10px;}
.container {text-align: center;}
.title {padding: 2em 0;background-color: #fff;}
.content {padding: 2em 1em;color: #fff;}
.wepay {background-color: #23ac38;}
.qq {background-color: #4c97d5;}
.other {background-color: #ff7055;}
</style>
</head>
<body class="<?=$type?>">
<div class="container">
<div class="title"><?=$icon_img?><h1><?=$name?></h1></div>
<div class="content"><?=$type=='other'?$qr_img.'<h3>请使用支付宝、微信、QQ客户端扫码付款</h3>':$qr_img.'<h3>扫描或长按识别二维码，向TA付款</h3>'?></div>
</div>
</body>
</html>Feel free to tip the author, hehe (smirk)
Demo page: demo
Comments