Optimizing your checkout when using an Iframe-based checkout

Optimizing can be very powerful when it’s properly configured but when using a Iframe-base checkout there can be compatibility issues.

The Krokedil plugins with embedded, or iframe-based, checkouts are Avarda Checkout, Briqpay, Dintero Checkout, Klarna Checkout, Nexi Checkout, Walley Checkout, Payson Checkout, Wasa Kredit Checkout and Qliro One.

While Klarna Payments strictly speaking is not an iframe-based checkout, the info in this article can still be applied.

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 there are files that needs to be excluded from any caching or concatenating.

Which files depends on the plugin, but using Klarna Checkout for WooCommerce as an example it’s the following files:

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

Check what files to exclude in the plugin you are using below:

Klarna Checkout for WooCommerce

Klarna Payments for WooCommerce

Klarna On-site Messaging for WooCommerce

Payson Checkout for WooCommerce

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.