WeChat (payment) QR code generation (front-end direction)

Take csdn's WeChat login as an example

1. Initiate a request to obtain the QR code of the WeChat QR code

This request generally returns two fields 

   QR url   （）

    order number/token ()

Then generate a QR code (two-dimensional code) through the QR url, and use a certain library to generate it.

2. After the QR code is generated, keep polling the backend, bring the order number/token in the second field, and the backend will return the status to confirm whether the QR code has been scanned, or whether the payment is successful

What is the data flow of the full-stack WeChat (payment, login) QR code? 

You can go to the developer documentation of WeChat. Let me briefly recall here. 

The backend calls the WeChat API to generate a QR code by signing the app id, etc., and then sends it to the frontend. 

The front-end keeps polling, and after the back-end receives the code-scanning success message sent by WeChat, it returns the scanned code and other information to the front-end.

--------------------------------------------------------

Concrete example:

{     "codeUrl": "weixin://wxpay/bizpayurl?prepay_id=wx1219935b473f6e6ed567&package=193643\",     "tradeNo": "DHXWYCD-DP9HRQ" //order number }

This string is a link in WeChat Pay, which contains relevant parameters for jumping to the mobile web page. Specifically:

mwebUrl: Indicates that the link is designed for the mobile version (Mobile Web); prepay_id: Indicates the ID of the prepaid order, which is one of the WeChat payment certificates; : packageIndicates the payment-related information required for the next step, and the merchant sends a prepayment request to WeChat when carrying.

import QRCode from 'qrcode';

 const generateQrCode = () => {
   QRCode.toDataURL(qrCodeInfo.generateCharacter).then((url)=>{
        // 这个就是 二维码图
    })
 }


const runTimerJump = () => {
    timeChange = setInterval(() => pollPayResult(), 3000);
  };

// generateQrCode （） 这个执行完后发起轮询，带上 tradeNo 参数，csdn是Token，判单该订单，或者该用户是否扫码