XanPay Documentation

# Embedded widget

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.

# Creating the widget

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

# Generate widget

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.

# Manually configure widget

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 options

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

# Autofill

If you are redirecting customers from an online store, you may already have some of their personal information. For instance, you may already have a verified email for a logged in customer. To remove the need for these users to enter this information, you can pass some or all of the following fields in this format:

const customer = {
    email: "test@test.test",
    firstName: "John",
    lastName: "Doe",
    phone: {
        code: "+66",
        phone: "12345678901"
    }
};

# Demo

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