The Booqable checkout scripts framework

Learn the essential documentation outlining the methods, events, and properties that can be used in the Booqable checkout scripts framework.

Herman avatar
Written by Herman
Updated over a week ago

If you wish to customize the Booqable online checkout, read the following article below to gain a thorough understanding of the Booqable checkout scripts framework.

How it works

1. Methods

Booqable.loadScript(url: string)
Loads an external script from an URL. Also makes sure the script is only loaded once.  

Booqable.jQuery(callback: function)
Loads jQuery 3.3.1 from the official CDN. Whenever you want to use jQuery, wrap your code inside the callback of this method. Inside, you can use $  normally.

Booqable.setupGoogleAnalytics(trackingId: string, defaultPageTracking = true, defaultEvents = false) 

This sets up Google Analytics with the given tracking ID.

Afterward, you can use gtag() . With the default page tracking, we set triggers for the information, payment & completed steps. With the default events, we set up triggers for information, completed, payment & page-change.

Booqable.setupFacebook(fbId: string, defaultEvents = true)
Sets up Facebook Ads with the given Facebook ad ID. This is also called Facebook Pixel. With the default events, we set up tracking for the InitiateCheckout, AddPaymentInfo & Purchase events. 

Booqable.setupIntercm(appId: string)

Sets up the Intercom widget in your checkout & hosted shop.

Booqable.on(event: string, callback: function, context?: object)
Executes the callback when the event is triggered. You can find the events below.

2. Private methods

Booqable._once(func: function)
Executes the given function exactly once, even when the code is executed multiple times.

Booqable._defer(condition: function, method: function, attempt?: integer)

Waits with executing the method parameter until the condition parameter returns true. attempt is a private parameter to keep track of the waiting time. The method keeps trying for 10 seconds in intervals of 50 milliseconds. If the condition is still false after that, it stops without executing the method parameter.

3. Events

page-change  Is triggered when the page changes or is first loaded.

information  Is triggered when the information step of the checkout is shown.

payment  Is triggered when the payment step of the checkout is shown.

completed  Is triggered when the success message is shown. The user has completed the checkout. Here is an example:

    Booqable.on('completed', function () {
// your code here

Simple tracking on (‘completed’):


Available keys:

cartId, orderId, deposit, couponDiscount, toBePaid, totalDueLater, grandtotal, grandTotalWithTax, tax, coupon, items, currency

4. Properties

Booqable.location: string The relative URL of the page that the store is currently on.

Booqable.origin: string  The origin defined in the URL of the checkout. Can be used for tracking, or to modify the branding of the checkout. 

You're all set!

If you need assistance with checkout scripts please contact our Support team at [email protected]

Did this answer your question?