This package allows to render and send form to rendered iframe.
It can be used to render payment pages on your page.
Written on TypeScript
Using npm
npm i react-iframe-formFor example, rendering Portmone.com payment form:
import * as React from "react"
import * as IFrame from "./src";
export const PaymentView: React.FunctionComponent = () => {
const url = "https://www.portmone.com.ua/gateway/";
const method = "post";
const data = {
bodyRequest: {
order: {
description:"191237564",
shopOrderNumber: "SHP-00000111",
billAmount: 100,
billCurrency: "UAH",
},
},
typeRequest: "json"
};
return <IFrame.Form name="paymentForm" config={{ url, method, data }} />;
};Will render:
<form target="paymentForm" action="https://www.portmone.com.ua/gateway/" method="post">
<input
type="hidden"
name="bodyRequest"
value="{"order":{"description":"191237564","shopOrderNumber":"SHP-00000111","billAmount":100,"billCurrency":"UAH"}}"
/>
<input type="hidden" name="typeRequest" value="json" />
</form>
<iframe name="paymentForm" />In followed example form will be sent to iframe on component mount.
If your form configuration have to be loaded async, you may use Promise and AsyncForm:
import * as React from "react"
import * as IFrame from "./src";
export const PaymentView = () => {
const fetchConfig = fetch("https://your-api.com/payment")
.then((response): IFrame.Config => response.json());
return <IFrame.AsyncForm name="paymentForm" fetchConfig={fetchConfig} />;
};