Pop-Up Integration
Pop-up storefronts contain checkout processes, order processes, or other customer self-service features that "pop up" when a customer clicks an action button. They allow you to host your own, integrated cart on your web page, while still utilizing our platform to collect customer payment information and process transactions. They also enable you to present a smooth, minimalistic cleverbridge checkout experience on your website.
How to Integrate

To do so, create a hidden DIV element on your web page that has a unique name as an ID attribute.
<div id="myUniqueDivIdForPopUp"></div>

To do so, insert the following code into your page header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://static-cf.cleverbridge.com/mycontent/1/cbFrameCheckout-client-v1.0.js"></script>
<script language="JavaScript" type="application/javascript">
$(document).ready(function(){
Cleverbridge.init("myDivId", {
"debug": true,
"storeDomain": "hostname.yourdomain.com",
"iframe": {
"width": 600,
"height": 650
}
});
});
</script>
Important
You must include a version of jQuery on your page for the pop-up checkout process to work.
You must define values for the following elements in the init
function:
Element | Description |
---|---|
myDivId
|
Unique name of your designated pop-up area. See step 1 above. |
debug
|
Set to |
storeDomain
|
hostname.yourdomain.com |
iframe.width
|
Width of your pop-up. For a perfect fit, contact Client Experience. |
iframe.height
|
Height of your pop-up. For a perfect fit, contact Client Experience. |

To do so, complete the following:
-
Add the following "click event" to your page. This tells the cleverbridge JavaScript library to start loading the pop-up once a customer clicks your action button.
<button onclick="buyNowClickFunction(this)" data-checkouturl="https://www.cleverbridge.com/1290/?scope=checkout&cart=220246&cfg=cb_popup&x-review=showreview">Buy Now</button>
- Replace the checkout link with your cleverbridge buy links for the products in the cart.
-
Define the following function in your JavaScript code:
<script> function buyNowClickFunction(button) { var checkoutLink = button.dataset.checkouturl; Cleverbridge.handleCTAClick(checkoutLink); }; </script>
When the user clicks your action button, the cleverbridge library will activate
handleCTAClick
, which will build the pop-up and add it to your page in the designated area. If your pop-up was already showing, then our library will update the current session data in the pop-up with the new cart data.

To build your own logic on top of the pop-up solution, take a look at the following:

The cleverbridge pop-up checkout process (pop-up order process) and our JavaScript library generate events at certain key moments. The following are the event types that are currently available:
Event Name | Description |
---|---|
frameloading
|
The pop-up element is appended to the myDivId element on your web page, and the
content of the pop-up has started loading. This is typically the point when you display the
pop-up to the customer. |
frameready
|
The content of the pop-up has finished loading and is ready to be displayed. |
pageload
|
The pop-up loaded a new page. |
prevsessionfound
|
While loading your web page, our library found some session data in the browser of the customer. This could be because the customer refreshed your web page after the pop-up was already displayed. You can use this event to automatically load the pop-up again, or wait until the customer clicks the action button again. |
purchasecomplete
|
The customer completed the purchase and sees the confirmation pageThe confirmation page is displayed after a customer makes a purchase. The confirmation page contains the order confirmation and delivery information.. |
updateReady
|
The current session is updated with new information. |
error
|
There was an error. You can print eventData to record the error message on the
developer console. |
You can overwrite these functions and define what needs to happen when these events occur. To do so, see the following JavaScript syntax:
Cleverbridge.on("eventName", function() {
// your code here
});
Example
The following is an example overwrite of an event:
Cleverbridge.on("prevsessionfound", function() {
// if the pop-up isn't visible yet, let's resume the previous session
if (!Cleverbridge.isIframeLoaded()) {
Cleverbridge.buildIframe(Cleverbridge.getFrameSrc());
}
});

Our JavaScript library contains the following public functions that you can call directly. They allow you to build more custom integrations with our pop-up checkout process (pop-up order process).
Event Name | Parameters | Description |
---|---|---|
Cleverbridge.init
|
myDivId ,
options |
Defines the designated area where your pop-up will go and initializes the library with your options. |
Cleverbridge.buildIframe
|
Checkout link | Builds a pop-up and appends it to the
designated DIV that you defined in the init function. |
Cleverbridge.updateSession
|
Checkout link | Assumes that the pop-up is already open, and updates that session with the data from the checkout link that you pass to this function. This could be a new product ID in the link or a quantity change. |
Cleverbridge.handleCTAClick
|
Checkout link | Decides if it should build the pop-up or update the current session. This is the recommended function to use if the user clicks a Buy Now button. |
Cleverbridge.refreshIframe
|
None | This functions reloads the current page in the pop-up. |
Cleverbridge.getPurchaseId
|
None | Get the purchase ID of the current session in the pop-up, or null if there is no purchase ID generated yet. |
Cleverbridge.getSessionId
|
None | Get the session ID of the current session in the pop-up, or null if there is no session ID generated yet. |
Cleverbridge.getFrameSrc
|
None | Get the frame source of the current session in the pop-up, or null if there is no pop-up generated yet. |
Cleverbridge.getCurrentScope
|
None | Get the scope of the current session in the pop-up, or null if there is no pop-up generated yet. |
Cleverbridge.getCurrentPage
|
None | Get the page of the current session in the pop-up, or null if there is no pop-up generated yet. |
Cleverbridge.getIframeElement
|
None | Get a reference to the pop-up element, or null if there is no pop-up generated yet. |
Cleverbridge.isIframeLoaded
|
None | True if the pop-up element is appended to your page, false if not. |
Example Pop-Up
For a working example of a pop-up checkout process, see the Cloudbit Demo Page.
Additional Information
The following is some additional information that you should consider when you decide to use the pop-up integration method:
Best Practices
The following are some best practices when integrating the popup checkout process:
-
Build the pop-up only after the user has clicked an action button. If you want to build the pop-up as soon as the visitor lands on your page, for example to improve loading times, contact Client Experience to discuss this.
- Don't try to include cross-sell/up-sell/promotional banners or/and "Don’t Leave Layers" in the pop-up. The pop-up was designed for a quick and simple checkout experience once the customer commits to a purchase. If you want to include these marketing tools on your web page, do so before the pop-up is loaded.
- To avoid distracting the customer during the checkout process, we suggest applying discounts before the pop-up is opened. You can apply a coupon code when opening the checkout by adding
&coupon=code
to the checkout link.
Note
You should consider the following points before integrating the pop-up checkout process into your website:
- cleverbridge always shows the final purchase price inside the pop-up. This will either occur on the review pageThe review page contains summary information about the purchase a customer is about to make. (in 3-4 step checkouts) or on the checkout page (in configurations without a review page). As a result, you should ensure that the price you display on your web page matches the cleverbridge cart price. You can use our Pricing API to sync the price in your system with the price cleverbridge displays in the checkout process.
- cleverbridge always confirms the final product selection inside the pop-up, either on the review page (in 3-4 step checkouts) or on the checkout page itself (in configurations without a review page). As a result, you should make sure that the product(s) in the cleverbridge Buy Now link match the product(s) that you displayed to the customer on your website prior to loading the checkout pop-up.
- cleverbridge always displays our terms & conditions and privacy policy in the footer of the pop-up. To avoid confusing the customer, please avoid showing your own legal terms close to the pop-up. For example, you could put them in the footer of your website, but you should not display them directly below the pop-up.
- You should avoid placing any of your elements on top of the pop-up (including banners, windows, pop-ups, etc.) while the pop-up is visible to the customer. Otherwise, you may hide important elements.
Note
Do not trigger the pop-up checkout for customers using Internet Explorer 8, 9, or 10. These browsers are not supported by cleverbridge due to security concerns.
Did you find this helpful?
Sorry about that
Why wasn't this helpful? (check all that apply)
Great!
Thanks for taking the time to give us some feedback.