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. |
Updated over 1 year ago