반응으로 점프 결제를 구현하는 방법

반응에서 점프 결제 구현 방법: 1. "const div = document.createElement('div')div.innerHTML = res document.body.appendChild(div);document.forms[0].submit(); 실행 2. "qrcode.react"를 사용하여 QR 코드를 생성한 후 페이지로 이동합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응에서 점프 결제를 구현하는 방법은 무엇입니까?

react 백엔드가 html을 반환하고, UnionPay 결제 프런트엔드 페이지가 점프하고 링크가 반환됩니다.

지난 며칠 동안 UnionPay를 수행할 때 이러한 문제가 발생했습니다. 백엔드가 완전한 html을 반환했고, UnionPay 결제로 점프해야 했습니다. 페이지 on the frontend

점프 페이지 코드 실행⬇️

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

위의 4단계를 실행하면 가능합니다

링크가 반환되면 바로 실행 가능⬇️

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

링크가 양식으로 반환되는 경우 QR 코드의 경우 페이지를 이동할 수 있습니다

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

React는 qrcode.react를 사용하여 QR 코드를 생성합니다

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>

경로 점프 후 반응 페이지

1.params 형식으로 이동하는 방법에는 두 가지가 있습니다. , 매개변수가 주소 표시줄에 표시됩니다

점프 방법은 history.push({pathname: '/personal', search: 'test=22222'})history.push({pathname: '/personal', search: 'test=22222'})

2.使用state的形式，页面刷新不会丢失数据，并且地址栏也看不到数据

跳转的方法是使用history.push({pathname: '/personal', state: {test: 'dashboard'}})

2를 사용하는 것입니다. . 상태 양식을 사용하면 페이지를 새로 고칠 때 데이터가 손실되지 않으며 주소 표시줄이 표시되지 않습니다. data

로 이동하는 방법은 history.push({pathname: '/ personal', 상태: {테스트: 'dashboard'}})

추천 학습: "🎜react 비디오 튜토리얼 🎜》🎜

위 내용은 반응으로 점프 결제를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!