react-iframe-form
v1.0.4
Published
React iFrame Form
Downloads
3,565
Maintainers
Readme
React IFrame Form
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
Installation
Using npm
npm i react-iframe-form
Usage
For 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.
AsyncForm
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} />;
};