I have a requirement to open an external system widget in an iFrame on my component. I'm using React for the UI Code. The external system supplied to me a POST request with form-data payload that I need to send, and then in the response I get status code of 302 (Moved Temporarily) and in the response header 'location' I get the URL for the iFrame src. The issue is that it is being invoked automatically after the POST call so when I'm assigning it to the component props and calling it from the iFrame src it's a repeated call and I'm trying to avoid it. In the simulator I got from the external system (jsp simulator) they did it by filling 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'm invoking 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'm getting from the automated call but it didnt work. Any idea how can I display the POST response directly in the iFrame?