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
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} />;
};
Contributors
License
MIT
