JavaScript Storefront Library

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

Events

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

Event Name	Description
`frameloading`	The Cleverbridge frame element is appended to the wrapper element on your web page, and the content of the frame has started loading.
`frameloaded`	The Cleverbridge frame content has finished loading and is ready to be displayed to the customer.
`showframe`	The Cleverbridge frame is shown to the customer.
`closeframe`	The Cleverbridge frame is hidden from the customer.
`frameunload`	The 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.
`updatecomplete`	The Cleverbridge frame has updated the current session. This is where Cleverbridge removes the loading animation, if you've enabled it.
`showloadinganimation`	The loading animation started and is displayed to the customer.
`removeloadinganimation`	The loading animation is hidden from the customer again.
`pageload`	The Cleverbridge frame loaded a new page.
`init`	The Cleverbridge frame init function has been completed.
`prevsessionfound`	While 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.
`purchasecomplete`	The customer completed the purchase and now sees the confirmation page.
`updateReady`	The current session is updated with new information.
`error`	An 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 Name	Parameters	Description
`Cleverbridge.init`	myDivId, options	Define the designated area where your iframe will be located and initialize the library with your options.
`Cleverbridge.buildIframe`	checkout link	Builds an iframe and appends it to the Div tag you specifies in the init function.
`Cleverbridge.updateSession`	checkout link	Updates 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.handleCTAClick`	checkout link	Allows 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.refreshIframe`	none	Reloads the current page in the iframe.
`Cleverbridge.getPurchaseId`	none	Gets the purchase ID of the current session in the iframe.
`Cleverbridge.getSessionId`	none	Gets the ID of the current session in the iframe.
`Cleverbridge.getFrameSrc`	none	Gets the frame source of the current session in the iframe.
`Cleverbridge.getCurrentScope`	none	Gets the scope of the current session in the iframe.
`Cleverbridge.getCurrentPage`	none	Get the page of the current session in the iframe, or null if there is no frame generated yet.
`Cleverbridge.getIframeElement`	none	Gets a reference to the iframe element, or null if there is no iframe generated yet.
`Cleverbridge.isIframeLoaded`	none	Returns true if the iframe element is appended to your page, false if not.