Common problems

This document lists common integration issues encountered with Kustom Checkout (KCO), categorized by frequency. It's not an exhaustive list but a summary of key problems observed.

Re-initializing KCO

Do not re-initialize KCO without reloading the page. Use the suspend/resume method instead for order updates. Re-initialization prevents cleanup of listeners and iframes, leading to errors.

Injecting the snippet

Ensure the Kustom Checkout snippet, obtained from the backend, is injected into the main page/frame. Failure to do so can cause UI/UX and functionality issues.

Detaching iframes

Re-creating or detaching iframes from the DOM can disrupt message passing between iframes, causing issues. Important information is passed via iframe URLs.

Using outdated libraries

Avoid modifying built-in browser functions, particularly with older libraries like Prototype.js. Directly modifying these functions can cause Kustom Checkout to malfunction. Use local functions if necessary to replicate browser functionality.

Styling iframes

Kustom Checkout iframes use inline styles, which have high specificity. Merchants should avoid applying global styles to all iframes, especially using !important, as this can conflict with Klarna's styles and prevent full functionality.

Modifying iframe URLs

Modifying the iframe URLs used by Kustom Checkout can break the parsing of important information.

Using transform on body

Applying the transform property to the body element can disrupt the positioning of the fullscreen iframe, causing issues with viewport coverage and content visibility.