Klarna Checkout – Optimizing your WooCommerce cart/checkout when using an Iframe-based checkout

Optimizing can be very powerful when it’s properly configured but when using a Iframe-base checkout such as Klarna Checkout, Klarna Payments, Nets Easy, Collector Checkout, Ecster Pay, Payson Checkout etc. there can be compatibility issues.

Common issues:

The JS, CSS files is moved around.
This can result in that the checkout doesn’t appear at all.
You are minifying/concatenate/caching HTML, CSS and JS-files.
This can result in double orders, wrong Information in the orders etc.

Common plugins in use when these errors appears:

Autoptimize
LiteSpeed Cache
SG Optimizer
WP Fastest Cache
WP Rocket
W3 Total Cache

The summary of this is that if you use a Iframe-based checkout you should NOT do anything with the HTML, JS or CSS on the cart/checkout page.

Files to exclude from optimization

If you are using some kind of optimization feature the following files needs to be excluded from any caching or concatenating:

wp-content/plugins/klarna-checkout-for-woocommerce/assets/js/klarna-checkout-for-woocommerce.min.js
wp-content/plugins/klarna-checkout-for-woocommerce/assets/js/klarna-checkout-for-woocommerce..js
Files from https://js.playground.klarna.com
Files from https://js.klarna.com
Files from cdn.klarna.com

Do not cache cart and checkout pages

The cart and checkout pages are dynamic pages and if you cache these they will not be dynamic anymore, which can result in several problems. Issues might be, but are not limited to, wrong prices showing, order numbers getting mixed up or even that one customer can see another customers information.