Installation:

XPay Widget - used to popup the payment gateway at the current page itself.

Use this script tag to get access to the widget.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>

Implementation:

Steps:-

1. Create or open an html file.

2. Add a button with the id paynow. It is used to call the xpay by on click event.

<button id="paynow">paynow</button>

3. Add a div tag with the id xpay-ftb-web-widget at the last or beginning of the body tag. It is used to display the xpay module with the help of this id.

<div id="xpay-ftb-web-widget"></div>

4. Add a Script tag to the head tag or body tag. And use the latest version.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>

5. Next, add the script tag at a necessary place. But add below the widget script.

<script>
	const config = {
		baseurl: string,
		showPopup: boolean,
		delayTime: number,
		maximumFractionDigits: number,
		sessionid: string,
		paymenttokenid: string,
		merchantName: string,
		onResponse: function (data) {},
		onError: function (data) {},
		onPopupClose: function (data) {}
	};

	var container = document.getElementById('paynow');

	container.addEventListener('click', function () {
		xpay.XpayWidget(config);
	});
</script>

Here, the config variable is used to pass the data. And the container variable is to get the dom element of the id paynow button and added to the event listener. It checks if the button is clicked and sends the config object data to the xpay. xpay.XpayWidget(config)

Note:-

• baseurl should pass as a string value. It is used as the base URL for API calls.
• showPopup is used to pass a boolean value ( true or false ). To toggle the xpay popup.
• delayTime should pass a number as seconds to close the popup.
• maximumFractionDigits should pass a number for digits to display amount not compulsory.
• sessionid and paymenttokenid should pass as a string value. It is used all over the xpay.
• merchantName is used to display the merchant name at xpay. And pass it as a string value.
• onResponse is a callback function. It is getting called when the API gives a successful response. Return data is an object with its API endpoint and result.
• onError is a callback function. It is getting called when the API gives an error message. Return data is an object with its API endpoint and result.
• onPopupClose is a callback function. It is getting called when the popup gets closed or session gets expired. Return data is an object with its action and result.