Pop-Up Integration

Pop-up storefronts contain checkout processes, order processes, or other customer self-service features that "pop up" 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 pop-up solution, take a look at the following:

Developer Use Cases

Example

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

Additional Information

The following is some additional information to consider in case you decide to use the pop-up 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 pageClosed The 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 make sure 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, avoid showing your own legal terms close to the frame. For example, you could place 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.