Comment implémenter le paiement anticipé en réaction

Comment implémenter le paiement anticipé dans React : 1. Exécutez "const div = document.createElement('div')div.innerHTML = res document.body.appendChild(div);document.forms[0].submit(); " pour réaliser le saut ; 2. Utilisez "qrcode.react" pour générer le code QR, puis accédez à la page.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Comment implémenter le paiement sauté dans React ?

Le backend de réaction renvoie le HTML, la page frontale du paiement UnionPay saute et renvoie les liens

J'ai rencontré un tel problème lors de l'utilisation d'UnionPay ces derniers jours. Le backend a renvoyé un code HTML complet et j'ai dû passer au paiement UnionPay. page sur le frontend

Exécution du code de la page de saut⬇️

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

Cela peut être réalisé en exécutant les quatre étapes ci-dessus

Si le lien est renvoyé, il peut être exécuté directement⬇️

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

Si le lien est renvoyé sous le formulaire du code QR, la page peut être sautée

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

React utilise qrcode.react pour générer des codes 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>

Il existe deux façons d'accéder à la page de réaction

1.formulaire params Après les sauts d'itinéraire. , les paramètres seront affichés dans la barre d'adresse

La méthode de saut consiste à utiliser : history.push({pathname: '/personal', search: 'test=22222'})history.push({pathname: '/personal', search: 'test=22222'})

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

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

2 . En utilisant le formulaire d'état, les données ne seront pas perdues lors de l'actualisation de la page et la barre d'adresse ne sera pas visible. La façon d'accéder aux données

est d'utiliser history.push({pathname: '/. personnel', état : {test : 'dashboard'}})

Apprentissage recommandé : "🎜Tutoriel vidéo React 🎜》🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!