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, Nets Easy, Walley Checkout, Ecster Pay, 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
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.