Convert HTML with JSP expression syntax into React component?
Convert HTML with JSP expression syntax <%= %> into React component?
Inside my react project I am integrating a backend server API to make web application work.
While working on the API's, I came across an API which returns the HTML page which has JSP expression syntax in it.
My job is to convert that response into React Component so that it can be integrated into the web app.
Check the below-given response I get from the API.
<html>
<head>
<title>Food Payment Check-Out</title>
</head>
<body>
<center>
<h1>Please do not refresh this page...</h1>
</center>
<form method="post" action="https://pguat.paytm.com/oltp-web/processTransaction" name="paymentForm">
<input type="hidden" name='<%= REQUEST_TYPE %>' value='<%= DEFAULT %>'>
<input type="hidden" name='<%= MID %>' value='<%= ToboxV6s4007205996403 %>'>
<input type="hidden" name='<%= ORDER_ID %>' value='<%= 5b399a05cbe05c66cesd4c8f9f %>'>
<input type="hidden" name='<%= CUST_ID %>' value='<%= 5b2e2e412fas2e43f3887a4fc %>'>
<input type="hidden" name='<%= TXN_AMOUNT %>' value='<%= 225 %>'>
<input type="hidden" name='<%= CHANNEL_ID %>' value='<%= WEB %>'>
<input type="hidden" name='<%= INDUSTRY_TYPE_ID %>' value='<%= Retail %>'>
<input type="hidden" name='<%= WEBSITE %>' value='<%= WEB_STAGING %>'>
<input type="hidden" name='<%= CALLBACK_URL %>' value='<%= https://sandboxapi.abcd.com/api/food/paytmpayment/process %>'>
<input type="hidden" name='<%= MOBILE_NO %>' value='<%= 90284546604 %>'>
<input type="hidden" name='<%= EMAIL %>' value='<%= %>'>
<input type="hidden" name='<%= CHECKSUMHASH %>' value='<%= AZ5PIVwjxk6aDwKC3XOsGDqt6C1f3/5qszPnR++PLNIWy5mk76PRzzkhVwhGxO4WrztRsNaaL2nX4UKaghrmF3Kj55U6/h7QY= %>'>
<script type="text/javascript">
document.paymentForm.submit();
</script>
</form>
</body>
</html>
I want this to be converted to the react component like the below one.
import React from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import {toggleLoader} from './../../actions/loaderActions';
import loader from './../../images/web-images/loading.gif';
class RedirectPG extends React.Component {
inputFields = ;
componentWillMount() {
const {pgdata} = this.props;
!pgdata.redirectUrl ? this.props.history.push('/user-details') : '';
}
componentDidMount() {
const {pgdata,paytminfo} = this.props;
this.props.toggleLoader(false);
for(var key in paytminfo) {
this.inputFields.push(<input type='hidden' name={key} value={paytminfo[key]} />);
}
setTimeout(() => {
pgdata.pg === 'paytm' ? document.payment.submit() : '';
pgdata.pg === 'sodexo' ? window.location.assign(pgdata.redirectUrl) : '';
}, 1200);
}
render() {
const {pgdata} = this.props;
return (
<div style={{textAlign:'center'}}>
<img src={loader} width="120px"/>
<h4>Please wait while we are redirecting you to the payment page...</h4>
<form method="post" action={pgdata.redirectUrl} name="payment">
<input type="hidden" name="REQUEST_TYPE" value="DEFAULT" />
<input type="hidden" name="MID" value="ToboxV6400720sdf5996403" />
<input type="hidden" name="ORDER_ID" value="5b3995a1cbe05sdfc66ce4c8f99" />
<input type="hidden" name="CUST_ID" value="5b2e2e412fa2sdfe43f3887a4fc" />
<input type="hidden" name="TXN_AMOUNT" value="225" />
<input type="hidden" name="CHANNEL_ID" value="WEB" />
<input type="hidden" name="INDUSTRY_TYPE_ID" value="Retail" />
<input type="hidden" name="WEBSITE" value="WEB_STAGING" />
<input type="hidden" name="CALLBACK_URL" value="https://sandboxapi.food.com/api/food/paytmpayment/process" />
<input type="hidden" name="MOBILE_NO" value="9028034343604" />
<input type="hidden" name="EMAIL" value="" />
<input type="hidden" name="CHECKSUMHASH" value="qzCnQqmeZkC0YyChVfKTfOOwbcltBFN4j6ySpMnF2lcBQNBdF7J7/EczZoIibDqC2Y5z0jORQLpoSyIkSbzeK8/vKsdfXC3H8PWO883NMaIVM8=" />
</form>
</div>
);
}
}
export default withRouter(connect(state => state.paymentpage,{toggleLoader})(RedirectPG));
Above react component is ready, but I want the elements inside <form></form> should be populated based on the response of the API.
<form></form>
I am not getting a single clue to get started on this. Help is appreciated.
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
