Programmatic Access
Launch the Checkout window through JavaScript
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:
xola.checkout(data, options)
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();
Updated less than a minute ago