# Integration

In order to redirect a user to checkout page you should use xanpay-sdk-1.0.0.js. This library constructs checkout page url as well as provides checkout buttons that you can add on your website.

  <script src="https://cdn.xanpay.com/sdk/xanpay-sdk-1.0.0.js"></script>
    async function checkout() {
        const orders = [{ 
          id: 'kun1Ja2', 
          name: "iPhone", 
          quantity: 1, 
          amount: 151
      const options = {
        apiKey: 'a04668f6e299280a7485e0002ce9729c',
        apiKeySecret: '0f37463afff161028ef495d9035ccdc053a036f5e57fee7a720c89dfedc55131',
        currency: 'HKD', 
        amount: 151, 
        environment: XanPaySDK.Environment.Sandbox, 
        redirectUrl: 'https://xanpay.com/',
        notifyUrl: 'https://webhook.site/7f014519-30dc-4f0f-9fd8-d03798e69ff7',
        notifyPayload: 'Some payload',
        customer: {
            email: "test@test.test",
            firstName: "Test",
            lastName: "Tester",
            phone: {
                code: "+65",
                phone: "12345678901"
      const url = await XanPaySDK.constructCheckoutUrl(options);
      window.open(url, '_blank');
<button onclick="checkout()">Checkout</button>

# Checkout options

Construct function requires an option object with the following parameters.

Parameter Required Description
apiKey Required A unique key identifying a partner generated in dashboard
apiKeySecret Required A unique secret key generated in dashboard
currency Required Currency in which you set the amount.
amount Required Amount to be charged
orders Optional A list of orders
paymentMethods Optional An object of payment methods
environment Optional Either production or sandbox. Default is production
notifyUrl Optional The specified url will be notified as POST request when charge is completed
notifyPayload Optional Any payload you want to include in request after successful completed charge. Will be encoded in base64
redirectUrl Optional Enables a button that takes the customer back to the specified url
customer Optional Can be used to autofill some of the fields of the widget for the customer

# Order object

You can provide a list of orders for each charge, they will be displayed in the final invoice.

Parameter Required Description
id Required Merchant's order id
name Required Order's name
quantity Required Quantity
amount Required Amount for the order

# Payment methods

You can specify payment methods available for each country in options.

      const paymentMethods = {
          'TH': ['prompt-pay', 'alipay-hk'],
          'HK': ['fps'],

Countries and payment methods are available in XanPay API

# Demo