Pop-Up Integration

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

🚧
Our pop-up storefront uses iFrames to display our checkout within your website. Some payment methods, such as iDEAL, do not allow displaying their pages inside iFrames. Therefore, Cleverbridge can’t guarantee that all available payment methods can be supported through this pop-up storefront.

How to Integrate

Prerequisite

Before you embed the storefront on your page, Cleverbridge needs to create an appropriate design for your shop. Contact Client Experience to adjust the layout of your storefront.

Add the Cleverbridge JavaScript library to your web page.

Insert the following snippet into your HTML page header between <head> ... </head>.

<script src="https://static-cf.cleverbridge.com/mycontent/1/cbFrameCheckout-client-v1.05.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function(){
    // initialize the Cleverbridge library with your preferred options
    Cleverbridge.init('cbOrderForm', {
      "debug": true,
      "storeDomain": 'cleverbridge.com',
      "showLoadAnimation" : "true",
      "iframe": {																
        "mode": "popup",
        "width": "100%",
        "height": "100%",
      }
    });
  });
</script>

Define values for the following elements in the init function:

Element	Description
`debug`	Set to `true` to see extra information printed out in the browser developer console. This is useful for troubleshooting issues.
`storeDomain`	Your Cleverbridge shop host, for example: `hostname.yourdomain.com`
`showLoadAnimation`	Set to `true` to use the Cleverbridge loading animation when the iframe loads.
`iframe.width`	Use 100% to completely fill up your `cbOrderForm` placeholder.
`iframe.height`	Use 100% to completely fill up your `cbOrderForm` placeholder.

Connect your action button to the JavaScript library.

Add the following button with the onclick event attribute to your page. This tells the Cleverbridge JavaScript library to start loading a base iframe checkout form once a customer clicks your action button.

<button onclick="Cleverbridge.handleCTAClick('https://www.cleverbridge.com/1290/?scope=checkout&cart=220246&cfg=popup_checkout2&x-review=showreview&x-cart=showcart&recommendation=freesupport,addproduct')">Buy Now</button>

Replace the base checkout link with your Cleverbridge checkout link for the products in the cart.

Example - Action Button

The following is an example of an action button. Adjust the text according to your needs (Buy Now, Proceed to Checkout, Complete Your Purchase, etc.).

Example - Pop-Up Checkout

For a working example of a pop-up checkout process, see Pop-Up Demo Page.

Additional Information

To build your own logic on top of the pop-up solution, use the events and JavaScript documentation, see JavaScript Storefront Library.

For ready code snippets, see Storefront Use Cases.

Consider the following Best Practices when you apply the pop-up storefront on your website.