Embedded widget | XanPay Documentation

Integrating via the XanPay widget is an easy way to accept payments on your websites using a pre-built XanPay interface.

If you want to provide a custom interface, please refer to our API documentation.

There are two ways of creating the widget to be embedded into your website.

In the dashboard (opens new window), you can select the look and feel that fits best with your platform. When you click on Generate widget, the code for the widget is generated. You can copy this code and inject it into your website.

If you would prefer to configure the widget in code, you can use the following code as a guide. This web page integrates XanPay widget with necessary base configuration.

<html>
<head>
</head>
<body>
    <div style="display: flex; justify-content: center" id="xanpay-widget"></div>
</body>
<script src="https://cdn.xanpay.com/widget/1.widget.js"></script>
<script>
    (function (w, d, s, o, f, js, fjs) {
      w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
      js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
      js.id = o; js.src = f; js.async = 0; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', '_hw', 'https://cdn.xanpay.com/widget/widget.js'));
    _hw('init', {
      apiKey: '138682006413bdbf13ac7905eb0fe3c8',
      currency: 'SGD',
      amount: 355
    });
</script>
</html>

Things to note in the example:

We create a div container with id "xanpay-widget". This is where our widget will be displayed.
We add XanPay widget libraries "widget.js" and "1.widget.js".
We initialize the widget after the page has been loaded.
Here we specify only base necessary options, but the widget is highly customisable. Additional options are described below.

Widget's constructor requires an option object with the following parameters.

Parameter	Required	Description
apiKey	Required	A unique key identifying a partner
currency	Required	Currency in which you set the amount
amount	Required	Amount to be charged
isSandbox	Optional	Default is false
subscriptionMode	Optional	Default is false
darkMode	Optional	Default is false
paymentStyles	Optional	`list` or `grid`. Default - `list`
widgetSize	Optional	`regular` - 448px, `large` - 650px, `fit` - 100% parent width. Default - `regular`
orders	Optional	A list of orders
paymentMethods	Optional	Permitted payment methods
notifyPayload	Optional	Data to be sent with order status changes to registered webhooks
redirectUrl	Optional	Enables a button that takes the customer back to the specified url
customer	Optional	Used to autofill some of the fields of the widget for the customer

# Demo

Here is an example of what XanPay's widget looks like:

# Embedded widget

# Creating the widget

# Generate widget

# Manually configure widget

# Widget options

# Demo