What is a Payment Widget?

Our Payment Widget is a pre-built JavaScript UI that allows you to embed payments directly into your custom website without extensive development work. An example is as follows:

Benefits

It allows you to begin accepting payments faster.
It’s simple and easy to integrate into your current website.
You can customise the widget to the style that best suits your needs.
It takes care of the entire transaction process, including the collection of payment information and the security of sensitive data. This reduces your compliance requirements and lets you focus on your business.

How to integrate a Payment Widget

In order to integrate the payment widget on your website, you simply need to include the widget.js script on your payment page.

<script src="https://finrock.io/widget/widget.js"></script>

Then, you need the following lines of code to integrate the payment form on your web page.

<div id="finrock-widget"></div>
<script src="https://finrock.io/widget/widget.js"></script>
<script>
let res = loadWidget({
  widget_id: "XXXXXXXXXXXXX"
}).then(res => {
  console.log(res);
}, err => {
  console.error(err);
});
</script>

Customisations

The payment widget allows you to customize certain properties on the card display. Listed below are the available optional configuration properties. If you wish to use other than the default ones, you should provide them to the loadWidget method.

These variables are handy when your frontend application can inject several values to prefill the widget fields to adjust the user's experience.

Variable	Data Type	Description	Example Values
fiat_amount	decimal	to prefill local currency value, e.g. $50	50.00
crypto_amount	decimal	to prefill cryptocurrency value, e.g. BTC 0.001	0.001
crypto_asset	string	Asset Name for cryptocurrency,	BTC
payer_name	string	Sender's full name
payer_email	string	Sender's email address
payer_mobile	integer	Sender's mobile number
desc	string	Note to the merchant. can be used for invoice numbers, item names, plan names etc.

You can find crypto_asset names here => https://finrock.io/assets