This describes how you can open the Checkout or Gift window through Xola's JavaScript checkout API.

This document assumes you have a the following HTML:

<div class="xola-checkout xola-custom" data-button-id="my-button-id">Book Online</div>

You can get the button ID by calling GET /api/buttons?seller=<seller-id>, see the api end point for more details.

The Xola checkout.js script should also be loaded. Once it is loaded you have access to a xola object that has methods you can invoke to launch the checkout application.

Method 1 - Quick & Easy

Use xola.onClick(domElement)

Call the onClick method and pass in a reference to the div/button element.

Assuming you have the following HTML:

<div class="xola-checkout xola-custom" data-button-id="my-button-id">Book Online</div>

Running the below code will open up the application referenced by the attributes described in the div. This is an easy method that will work on kind of Xola button (checkout, gift etc)

var domElement = document.querySelectorAll(".xola-checkout[data-button-id='my-button-id']")[0];
xola.onClick(domElement); // This will open up the checkout app referencing the appropriate button

Method 2 - More control, more work

The second method is has a higher programmatic overhead, but has the advantage that you don't need a div or button element present. You can launch the checkout window based on any event occurring within your app.

The methods are:

1. xola.checkout(data, options)
2. xola.gift(data)

Using these methods requires forehand knowledge if you want to launch the checkout window or the gift window. It also depends on creating a specific data structure to the methods.

Open the Checkout window using a button ID

var options = {button: 'my-button-id'};
xola.checkout(options);

Open the Checkout window using a seller ID

var data = {seller: 'my-seller-id', type: 'seller'};
xola.checkout(data);

This method will use the ID of the actual seller account. This ID will be a 24 character alphanumeric ID that you can retrive by making an API call to https://xola.com/api/users/me

Open the Gift window using a button ID

var data = {button: 'my-button-id'};
xola.gift(data);

Open the Gift window using a seller ID

This method will use the ID of the actual seller account. This ID will be a 24 character alphanumeric ID that you can retrive by making an API call to https://xola.com/api/users/me

var data = {seller: 'my-seller-id', type: 'gift'};
xola.gift(data);

Closing the Checkout/Gift Window

Close the Checkout window

xola.checkoutClose();

Close the Gift window

xola.giftClose();