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 Iframe-based checkouts are Avarda Checkout, Briqpay, Klarna Checkout, Klarna Payments, Nets Easy, Walley Checkout, Ecster Pay, Payson Checkout and Wasa Kredit Checkout.
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 for Klarna Checkout for WooCommerce 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
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.