Embedded Integration

Embedded storefronts contain checkout processes, order processes, or other customer self-service features that appear 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 embedded 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 embedded 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.

Designate a space on your web page where the frame will appear.

To do so, add the following <div> to your page in the area where the Cleverbridge checkout should appear. Define the size of this wrapper element by the parent element that you place it in.

<div id="cbOrderForm"></div>

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": "embed",
        "width": "100%",
        "height": "100%",
        "style": "border:0;"
      }
    });
  });
</script>

Define values for the following elements in the init function:

Element	Description
`cbOrderForm`	Unique ID of your designated checkout area. See the `div` element you added on your page.
`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=base_iframe_19&showcart=false')">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 - Embedded Checkout

For a working example of an embedded checkout process, see the Embedded Demo Page.

Additional Information

To build your own logic on top of the embedded 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 embed the storefront on your website.