# 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:
- API call to /checkout-link endpoint
- 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',
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 | Custom string to be saved as a part of the charge object Note: we recommend encoding 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 |