JavaScript Storefront Library

Use the following events and JavaScript documentation to build your own logic on top of the pop-up or embedded solution.


The Cleverbridge checkout processes and JavaScript library generate events at certain key moments. The following event types are available:

Event NameDescription
frameloadingThe Cleverbridge frame element is appended to the wrapper element on your web page, and the content of the frame has started loading.
frameloadedThe Cleverbridge frame content has finished loading and is ready to be displayed to the customer.
showframeThe Cleverbridge frame is shown to the customer.
closeframeThe Cleverbridge frame is hidden from the customer.
frameunloadThe Cleverbridge frame is starting to load a new page by unloading the correct page. This is where Cleverbridge starts showing a loading animation, if you've enabled it.
updatecompleteThe Cleverbridge frame has updated the current session. This is where Cleverbridge removes the loading animation, if you've enabled it.
showloadinganimationThe loading animation started and is displayed to the customer.
removeloadinganimationThe loading animation is hidden from the customer again.
pageloadThe Cleverbridge frame loaded a new page.
initThe Cleverbridge frame init function has been completed.
prevsessionfoundWhile loading your web page, our library found some session data in the customer's browser. This can happen if the customer refreshed your web page after the frame was already displayed. You can use this event to automatically load the frame again, or you can wait until the customer clicks the action button again.
purchasecompleteThe customer completed the purchase and now sees the confirmation page.
updateReadyThe current session is updated with new information.
errorAn error occurred. You can print eventData to save the error message on the developer console.

If you want to overwrite these functions and define what happens when these events occur, use the following JavaScript syntax:

Cleverbridge.on("eventName", function() {
    // your code here

Example - JavaScript Function Definition

Cleverbridge.on("purchasecomplete", function() {
  alert('thanks for your purchase! We are redirecting you to your MyAccount area in 5 seconds ...');

JavaScript Documentation

The Cleverbridge JavaScript library contains the following functions that you can call directly from JavaScript code. These functions allow you to build custom integrations with our checkout:

Event NameParametersDescription
Cleverbridge.initmyDivId, optionsDefine the designated area where your iframe will be located and initialize the library with your options.
Cleverbridge.buildIframecheckout linkBuilds an iframe and appends it to the Div tag you specifies in the init function.
Cleverbridge.updateSessioncheckout linkUpdates the session with the data from the checkout link that you pass to the new product ID in the link, quantity change, or another relevant aspect.
Cleverbridge.handleCTAClickcheckout linkAllows you to specify whether to build a new iframe or update the current session. This is the recommended function to use when the user clicks the Buy Now button.
Cleverbridge.refreshIframenoneReloads the current page in the iframe.
Cleverbridge.getPurchaseIdnoneGets the purchase ID of the current session in the iframe.
Cleverbridge.getSessionIdnoneGets the ID of the current session in the iframe.
Cleverbridge.getFrameSrcnoneGets the frame source of the current session in the iframe.
Cleverbridge.getCurrentScopenoneGets the scope of the current session in the iframe.
Cleverbridge.getCurrentPagenoneGet the page of the current session in the iframe, or null if there is no frame generated yet.
Cleverbridge.getIframeElementnoneGets a reference to the iframe element, or null if there is no iframe generated yet.
Cleverbridge.isIframeLoadednoneReturns true if the iframe element is appended to your page, false if not.