Pay QR code integration – three codes in one support Alipay, QQ, WeChat

1 premise: get the specific content of each two-dimensional code

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

Pay treasure:

https://qr.alipay.com/tsx108134acakckixsivtd4

WeChat:

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 = nickname

2. Method 1: Use NGINX to distribute content

We can see that each payment method is more than a referrer protocol, so we can use a fixed URL, let it check different sites and jump to different links. This can be done either with a daemon or with a server like Nginx, because all you need to be able to do is differentiate the content of the request.

With Nginx we can write:

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 type "; }

Through the test, found that QQ, WeChat can not use 😢 may be Tencent for safety to avoid by the jump over the call.

3. Method 2: Use a separate QR code 1

Unable to use Jump to fully support all three payment methods. Here we change a little, first of all, use the two-dimensional code generation tool to generate the two-dimensional code of a unified style, because the original three code are not quite the same will affect the beauty.

QQ:

WeChat:

Then change the above Nginx configuration to redirect to the corresponding page for these two.

1 < / s > < s > cuts

The above page, if you open it from WeChat browser, you will see the payment code of WeChat, if you open it from QQ browser, you will see the payment code of QQ. If you are from another browser or PC, you will not see any code.

The configuration of Nginx at this time:

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. Method 3: Use a separate QR code 2

Do here can realize the function basically.

But if the user opens it directly from the phone’s client, the experience is not so good. Because then they have to scan the code, go to the corresponding page, and then press a long scan again to get to the checkout counter. This step is also a terrible experience. How can we optimize it? We will modify the code of the front page: if it is opened in the mobile phone client, we will directly display the corresponding payment code, do not show the QR code of the transit page.

This part of the change depends on what you use the front-end program, to deal with the change on the line. Here’s 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'] || ''); }} []);

Because my blog uses a homogeneous SSR, I need to wrap the browser code with React. UseEffect, otherwise it will report an error when the server renders. In addition, the different QR code contents are loaded with environment variables, so that if the content needs to be replaced, this part of the code can be left untouched.

Via test, WeChat is normal, but does it seem that pay treasure inside does not let load JS file? The page is loaded, but the JS function is completely useless. QQ’s QR code seems too complicated to recognize… 😭 😭

5. To summarize

The process is very interesting, but I don’t have the ability to cooperate with them. The final practicality is still full of slots. Therefore, if you really need it, you should pick up third-party services ~