Often friends ask me how I created a multi-purpose QR code payment system on my blog. In fact, there are many open-source solutions available online to solve this problem. Here, I will share a simple method.

ShouKuanLa

ShouKuanLa is an open-source tool that combines payment QR codes from Alipay, WeChat Pay, and QQ Pay into a single QR code. Payments made through this QR code are directly deposited into your account without any transaction fees.

Visit the ShouKuanLa website: https://qr.52ecy.cn/. Upload your own QR codes to combine them. This tool is open-source and relatively secure. If you are still concerned about security, you can download the source code and deploy it on your own.

ShouKuanLa source code: https://github.com/178146582/qr

OneQRCode

OneQRCode is a purely static QR code payment tool. The code is open-source and its functionality is similar to ShouKuanLa. It also supports combining QR codes from Alipay, WeChat Pay, and QQ Pay. However, some modifications are required before it can be used.

1. Visit: https://github.com/mengkunsoft/OneQRCode/archive/master.zip and download the latest source code. Extract the downloaded file. The only file you need is index.html.

2. Open index.html with a text editor and modify the qqUrl/wechatUrl/aliUrl to your corresponding payment addresses, as shown in the screenshot below.

3. Take WeChat Pay as an example. Open WeChat Pay, go to the "收付款" (Receive/Pay) section, and select "二维码收款" (QR Code Payment). Save the QR code.

4. We need to extract the content from the QR code for configuration. Open the QR code scanner https://cli.im/deqr, upload the WeChat Pay QR code you just saved, and record the scanning result.

5. Fill in the scanning result in the wechatUrl option in index.html. The configuration method is the same for Alipay and QQ Pay. After modifying index.html, upload it to your website and you're done.

Payment Principle

The payment principle of ShouKuanLa, OneQRCode, and other similar multi-purpose payment tools is the same. They all retrieve the UserAgent from the client-side and then redirect to different URLs or display corresponding QR codes based on the UserAgent. For example, if the client-side is Alipay, it will be redirected to the Alipay link. The UserAgent for each tool is as follows:

• Alipay: Alipay
• MicroMessenger: WeChat
• QQ: QQ or TIM

Some Issues

• Alipay: The QR code from Alipay returns an HTTPS link, which can be directly redirected to initiate the payment on Alipay.
• WeChat: WeChat uses its own protocol wxp://, which cannot directly initiate payments. It can only return a QR code for WeChat to recognize and complete the payment.
• QQ/TIM: The QR code from QQ/TIM returns an HTTPS link, which cannot directly initiate payments. It also requires a QR code to be recognized for payment.

Testing

Once you understand the principle, you can create your own multi-purpose QR code payment system. If you don't want to create one from scratch, you can use one of the existing open-source solutions mentioned above. Below is an example of a QR code payment system created by myself, which is a simplified version of the aforementioned solutions.

• Test URL: https://dwz.ovh/donation
• When accessed on a PC, users can choose which QR code to scan for payment.
• When accessed on a mobile browser, the QR code for Alipay payment is directly displayed.
• When accessed on WeChat, the QR code for WeChat payment is displayed, which needs to be recognized and scanned for payment.
• When accessed on QQ/TIM, the QR code for QQ payment is displayed, which needs to be recognized and scanned for payment.

Conclusion

At the bottom of this article, you can find the QR codes for donations to Little Z's blog. Feel free to click and try out the payment experience.