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