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