Optimizing can be very powerful when it’s properly configured, but when using an iframe-based checkout, there can be compatibility issues.

The Krokedil plugins with embedded, or iframe-based, checkouts are Avarda Checkout, Dintero Checkout, Kustom Checkout, Nexi Checkout, Walley Checkout and Qliro.

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

Common issues:

• The JS and CSS files are moved around. 
  This can result in the checkout not appearing at all.
• You are minifying, concatenating or 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 appear:

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

In summary, if you use an iframe-based checkout, you should not modify, minify, combine or cache the HTML, JS or CSS on the cart and checkout pages.

Files to exclude from optimization

If you are using some kind of optimization feature, there are files that need to be excluded from any caching or concatenating.

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

• wp-content/plugins/klarna-payments-for-woocommerce/assets/js/klarna-payments.js
• wp-content/plugins/klarna-payments-for-woocommerce/Blocks/Payment/build/klarna-payments-block.css
• wp-content/plugins/klarna-payments-for-woocommerce/vendor/krokedil/klarna-onsite-messaging/src/assets/js/klarna-onsite-messaging.js
• js.playground.klarna.com
• js.klarna.com
• cdn.klarna.com
• x.klarnacdn.net

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

Avarda Checkout for WooCommerce

Dintero Checkout for WooCommerce

Kustom Checkout for WooCommerce

Klarna 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 customer’s information.

Examples of issues

Examples of issues that might be related to cache and the cart and checkout pages being optimized:

• Double orders created in WooCommerce. A duplicated order is created in WooCommerce that is in status Pending payment or Cancelled. There is still only one order created in the payment provider’s merchant portal.
• The payment method iframe is not loading correctly on the checkout page, or is not visible in the checkout at all, due to files not being loaded correctly.