Installation:

XPay Redirection - used to show the payment gateway at the another page.

Use this script tag to get access to the xpay redirection.

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

Implementation:

Steps:-

1. Create two HTML files like index.html and xpay.html.

2. Add a button or anchor tag at index.html to redirect to the xpay.html page.

<a href="./xpay.html">paynow</a>

3. At xpay.html. Add a div tag with the id xpay-ftb-web-redirect at the body tag. It is used to display the xpay module with the help of this id.

<div id="xpay-ftb-web-redirect"></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 source script.

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

	xpayftb.XpayRedirect(config);
</script>

Here, the config variable is used to pass the data as an object to the xpayftb. xpayftb.XpayRedirect(config)

Note:-

• baseurl should pass as a string value. It is used as the base URL for API calls.
• sessionid and paymenttokenid should pass as a string value. It is used all over the xpay.
• delayTime should pass a number as seconds to close the popup.
• maximumFractionDigits should pass a number for digits to display amount not compulsory.
• merchantName is used to display the merchant name at xpay. And pass it as a string value.
• merchantUrl should pass as a string value. It is used to return the merchant back to the checkout page or any URL or # .
• 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 user cancels the transaction or on close of payment success or session gets expired. Return data is an object with its action and result.