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 our platform to collect customer payment information and process transactions. They also enable you to present a smooth, minimalistic cleverbridge checkout experience on your website.

How to Integrate

Build Your Own Logic

To build your own logic on top of the embedded solution, take a look at the following:

Developer Use Cases

Example

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

Additional Information

The following is some additional information that you should consider when you decide to use the embedded integration method:

Best Practices

The following are some best practices when integrating the frame checkout process:

  • Build the frame only after the user has clicked an action button. If you want to build the frame as soon as the visitor lands on your page, for example to improve loading times, contact Client Experience to discuss this.

  • Don't try to include cross-sell/up-sell/promotional banners or/and "Don’t Leave Layers" in the frame. The frame was designed for a quick and simple checkout experience once the customer commits to a purchase. If you want to include these marketing tools on your web page, do so before the frame is loaded.
  • To avoid distracting the customer during the checkout process, we suggest applying discounts before the frame is opened. You can apply a coupon code when opening the checkout by adding &coupon=code to the checkout link.

Note

You should consider the following points before integrating the frame checkout process into your website:

  • cleverbridge always shows the final purchase price inside the frame. This will either occur on the review pageClosedThe review page contains summary information about the purchase a customer is about to make. (in 3-4 step checkouts) or on the checkout page (in configurations without a review page). As a result, you should ensure that the price you display on your web page matches the cleverbridge cart price. You can use our Pricing API to sync the price in your system with the price cleverbridge displays in the checkout process.
  • cleverbridge always confirms the final product selection inside the frame, either on the review page (in 3-4 step checkouts) or on the checkout page itself (in configurations without a review page). As a result, you should make sure that the product(s) in the cleverbridge Buy Now link match the product(s) that you displayed to the customer on your website prior to loading the checkout frame.
  • cleverbridge always displays our terms & conditions and privacy policy in the footer of the frame. To avoid confusing the customer, please avoid showing your own legal terms close to the frame. For example, you could put them in the footer of your website, but you should not display them directly below the frame.
  • You should avoid placing any of your elements on top of the frame (including banners, windows, pop-ups, etc.) while the frame is visible to the customer. Otherwise, you may hide important elements.

Note

Do not trigger the cleverbridge frame for customers using Internet Explorer 8, 9, or 10. These browsers are not supported by cleverbridge due to security concerns.