Pop-Up Integration

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>

You must define values for the following elements in the init function:

To do so, complete the following:

1. 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>

2. Replace the checkout link with your cleverbridge buy links for the products in the cart.

3. 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:

Events

The cleverbridge pop-up/embedded checkout processes 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 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 being 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 being 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 browser of the customer. This could be because the customer refreshed your web page after the frame was already displayed. You can use this event to automatically load the frame 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("purchasecomplete", function() {
  alert('thanks for your purchase! We are redirecting you to your MyAccount area in 5 seconds ...');
});

Public Functions

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.