XanPay Documentation

# Checkout page

Fullpage checkout allows you to redirect a user to a separate page without injecting XanPay widget into your website.

There are two ways of programmatically obtaining a link to the checkout page:

  1. API call to /checkout-link endpoint
  2. Calling the constructCheckoutUrl function in our JavaScript SDK in your webpage. This method is described below.

# JavaScript integration

In order to redirect a user to checkout page you would use the XanPay SDK (opens new window). This library constructs the checkout page URL to which you can direct your users.

Here is an example of how this can be done:

<html>
<head>
  <script src="https://cdn.xanpay.com/sdk/xanpay-sdk-1.0.0.js"></script>
  <script>
    async function checkout() {
        const orders = [{ 
          id: 'kun1Ja2', 
          name: "iPhone", 
          quantity: 1, 
          amount: 151
      }];
        
      const options = {
        apiKey: 'a04668f6e299280a7485e0002ce9729c',
        apiKeySecret: '0f37463afff161028ef495d9035ccdc053a036f5e57fee7a720c89dfedc55131',
        currency: 'HKD', 
        amount: 151, 
        orders,
        environment: XanPaySDK.Environment.Sandbox, 
        redirectUrl: 'https://xanpay.com/',
        notifyPayload: {"orderId": "251"},
        customer: {
            email: "test@test.test",
            firstName: "Test",
            lastName: "Tester",
            phone: {
                code: "+65",
                phone: "12345678901"
            }
        }
      };
      const url = await XanPaySDK.constructCheckoutUrl(options);
      window.open(url, '_blank');
    }
  </script>
</head>
<body>
<button onclick="checkout()">Checkout</button>
</body>
</html>

# Checkout options

The constructCheckoutUrl function requires an options 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 Permitted payment methods
environment Optional Either production or sandbox. Default is production
notifyPayload Optional Data to be sent with order status changes to registered webhooks Note: 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

# Demo