XZ

Xiao Z's blog

Learn, build, share

Unified QR Code Payment Solution for Alipay, WeChat Pay, and QQ

multi-payment QR codeAlipay WeChat QQ mergeopen source donation toolOneQRCode收款啦
Published·Modified·

Many friends often ask how I created the multi-payment QR code for my blog. In fact, there are many open-source solutions available online to solve this, so I'll simply share a few here.

Shoukuanla

Shoukuanla is an open-source tool that merges QR codes for Alipay, WeChat Pay, and QQ into a single code. Payments go directly to your account with no transaction fees.

Visit the Shoukuanla official website: https://qr.52ecy.cn/ to upload your own QR codes for merging. Since the tool is open-source, it is relatively secure. If you are still concerned about security, you can download the source code and deploy it yourself.

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

OneQRCode

OneQRCode is a pure static payment tool with open-source code. Its functionality is the same as Shoukuanla, supporting the merging of Alipay, WeChat Pay, and QQ payment QR codes, but you need to modify it yourself to use it.

  1. Visit https://github.com/mengkunsoft/OneQRCode/archive/master.zip to download the latest source code and unzip it. You only need the single-page index.html.

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

  1. Taking WeChat Pay as an example, open WeChat Pay - Collect Money - QR Code Payment, then save the QR code.

  1. We need to identify the content in the QR code for configuration. Open the CLI QR Code Scanner https://cli.im/deqr, upload the saved WeChat payment QR code, and record the scan result.

  1. Fill the scan result into the wechatUrl option in index.html. The configuration methods for Alipay and QQ payments are the same, so they will not be repeated. After modifying index.html, upload it to your website to access it.

Payment Principle

Shoukuanla, OneQRCode, and other multi-payment tools online work on the same principle: they obtain the client's UserAgent and then redirect to different addresses or display the corresponding QR code based on the UserAgent. For example, if your client comes from Alipay, it redirects to the Alipay link. Below are the UserAgents for the three tools:

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

Some Issues

  • Alipay: The Alipay QR code returns an HTTPS link, which can directly initiate payment in Alipay.
  • WeChat: WeChat uses its own protocol wxp://, which cannot directly initiate payment. It returns a QR code for WeChat to scan and pay.
  • QQ/TIM: Returns an HTTPS link, which cannot directly initiate payment and requires scanning a QR code to pay.

Testing

After understanding the principle, you can create your own multi-payment QR code. If you don't want to tinker, you can use the existing open-source solutions mentioned above. Below is the donation QR code I created, which is a simple optimization based on the above.

  • Test address: https://dwz.ovh/donation
  • PC access: Allows users to choose their preferred payment method.
  • Mobile browser access: Directly initiates Alipay donation.
  • WeChat access: Displays the WeChat payment QR code, requiring scanning to donate.
  • QQ/TIM access: Displays the QQ payment QR code, requiring scanning to donate.

Final Thoughts

The donation QR code for Xiaoz's blog is below. Feel free to click and try donating!