Using IFrame In React - With HTTP HTTP Request
I have a requirement to open the system widget appearance in an iFrame on my component. I am using React for UI Code. The external system gave me a POST request with a form-data payload that I need to submit, and then I get a 302 (Moved Temporarily) status code in the response, and in the Response Header field I get the URL for the IDC iFrame. The problem is that it gets called automatically after the POST call, so when I assign it to the props components and call it from the iFrame src, it is a re-call and I am trying to avoid it. In the simulator I got from external system (jsp simulator) they did this by filling in the form attributes with the action and the target iFrame -
<form id="data_form" action="SubmitInit.jsp" target="payment_frame" method="post">
In my case, I call the action in:
componentWillMount() {
this.setIFrameContext();
}
setIFrameContext() {
const {customerId} = this.props;
const parentDomain = 'http://localhost:8091';
const reqData = {customerId, parentDomain};
this.props.dispatch(this.paymentActions.loadAddInstrumentScreen(reqData));
}
and -
render() {
const {responseURL} = this.props;
return (
<div>
<iframe
name="payment_frame"
id="payment_frame"
src={responseURL} />
<br />
</div>
);
}
I tried using srcDoc with the response I get from the automatic invocation, but it didn't work. Any idea how I can display the POST response directly to the iFrame?
source to share