Payment QR code integration – three code in one support alipay, QQ, wechat

1. Premise: Obtain the specific content of each QR code

Before we can write the code, we need to get the QR code content of the different payment methods. Very simple, just need to open each payment code, screenshots, and then find a random scan code tool to scan out the content of each code, get the text content. Here’s what I said:

Pay treasure:

https://qr.alipay.com/tsx108134acakckixsivtd4
Copy the code

WeChat:

wxp://f2f0kIl6qSrlWNFuIo8t8rXCU7Si7CC7ucQs
Copy the code

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 = nicknameCopy the code

2. Method 1: Distribute content using Nginx

As you can see, each payment method is more than a jump protocol, so we can use a fixed url, and have it detect different websites and jump to different links. This step can be done using a daemon or a server like Nginx, as it only needs to be able to distinguish between the requested content.

Nginx can be written like this:

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 = nickname"; }
    return 400 "Unsupported types";
}
Copy the code

After testing, found that QQ, wechat can not use 😢 may be Tencent to avoid the call from the jump for security.

3. Method 2: Use independent QR code 1

Because you can’t use jump to fully support all three payment methods. Here we make a small change, the first use of TWO-DIMENSIONAL code generation tools to generate a unified style of two-dimensional code, because the original three codes are not the same long will affect the appearance.

QQ:

WeChat:

Then modify the above Nginx configuration to go to the corresponding page for these two.

Subtract 1

In the above page, if you open it from the wechat browser, you should see the wechat payment code; if you open it from the QQ browser, you should see the QQ payment code. If it’s from another browser or PC you won’t see any code.

The configuration of Nginx is as follows:

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/";
}
Copy the code

4. Method 3: Use independent QR code 2

So here we are and we’re basically able to implement the function.

But if the user opens it directly from the phone’s client, it’s not a very good experience. Because then they have to scan the code, open the corresponding page, and then long swipe the code again to see the cashier. The experience of this step is also terrible. How can you optimize it? Let’s modify the code of the front page: if it is opened in the mobile client, we can directly display the corresponding payment code, instead of the TWO-DIMENSIONAL code of the transfer page.

The change of this part is what front end program that sees you to use, should change to go. Here is part of the code for my blog:

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'] | |' '); }} []);Copy the code

Because my blog uses isomorphic SSR, I need to wrap the browser code with React.useEffect, otherwise the server rendering will report an error. In addition, the different content of the QR code is loaded with environment variables, so that if you need to replace the content, you can leave this part of the code intact.

After testing, wechat normal, but pay treasure does not seem to let the load JS file? The page is loaded, but the JS function is completely disabled. QQ’s QR code seems to be too complex to recognize… 😭 😭

5. To summarize

The process is interesting, but without the ability to cooperate with them and achieve the ultimate practicality by hacking, it is still full, so if you really need a third party service ~