How to implement jump payment in react

React method to implement jump payment: 1. Execute "const div = document.createElement('div')div.innerHTML = res document.body.appendChild(div);document.forms[0]. submit();" statement to implement the jump; 2. Use "qrcode.react" to generate the QR code, and then jump to the page.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to implement jump payment in react?

react backend returns html, UnionPay payment front-end page jump and return link

I encountered such a problem when doing UnionPay in the past few days. The backend returned a complete html, which requires Jump to the UnionPay payment page on the front end

Code execution of the jump page⬇️

              const div = document.createElement('div')
              div.innerHTML = res //后台返回接收到的html数据
              document.body.appendChild(div);
              document.forms[0].submit();

You can implement it by executing the above four steps

If the link is returned, you can directly Execute ⬇️

window.location.href = res//链接地址

If the returned form is a QR code, you can jump to the page

history.push({pathname: "/Movie/Pay"})

react uses qrcode.react to generate the QR code

Installation

npm install qrcode.react --save
import QRCode from 'qrcode.react'
//code_url这个是后端返回的链接
//返回格式 code_url:"weixin://wxpay/bizpayurl?pr=5dDc2T1zz"
<div style={{marginTop: 10}}>
    <QRCode 
value={code_url}
size={180}
fgColor="#000000"/>
</div>

Two ways to jump to the react page

1.params form, after the route jumps, the parameters will be displayed in the address bar

The jumping method is to use: history.push({pathname: '/personal', search: 'test=22222'})

2. Using the state form, the page refresh will not lose data, and the address bar I can’t see the data either

The way to jump is to usehistory.push({pathname: '/personal', state: {test: 'dashboard'}})

Recommended learning: "react video tutorial"

The above is the detailed content of How to implement jump payment in react. For more information, please follow other related articles on the PHP Chinese website!