Is an embedded checkout right for your WooCommerce store?

Since we at Krokedil developed Klarna Checkout for WooCommerce and it was introduced in 2012, embedded checkout solutions have been a very popular payment method among e-commerce merchants and customers. At first, Klarna was alone with this, but today there are many payment method suppliers who offer embedded checkouts, such as Payson, Ecster, Nets, Collector Bank, Briqpay, Billmate and more and therefore a wider range of options for your online store.

A quick review of differences in structure

For those of you who are not completely familiar with the structure of embedded checkouts, and how they differ from traditional payment methods, here is a quick review.

Embedded checkout

• The fact that a checkout is embedded means that the checkout itself is hosted by the payment service provider, but that it is displayed in your online store by being embedded via an iframe.
• An embedded checkout largely replaces the online store’s own checkout.
• In an embedded checkout, the customer enters both their address information and chooses the payment method.
• With an embedded checkout, a pending order is first created in WooCommerce, but the purchase is completed in the payment service provider’s checkout first (because it is in this iframe that the “Place order” button is located). Then your online store is contacted to carry out the actual processing of the order so that it goes from pending to processing.

Traditional payment method

• A traditional payment method is displayed as one of (usually) several different payment options in the online store’s own checkout.
• A traditional payment method only handles payments. As a customer, you do not identify yourself via the payment method.
• With a traditional payment method, the order in the online store is completed first (when the customer clicks on the “Place order” button at checkout). Then the payment service provider is contacted to complete the actual payment – opposite to how it works in an embedded checkout.

How is an order created?

A checkout page in an online store is really nothing more than a form that is eventually posted to the online store when the customer clicks on the “Place order” button. When this form data is processed, an order is created and each field in the form is saved in this order.

If we’re to talk about the e-commerce platform WooCommerce (which is the platform we at Krokedil work with), this sequence also triggers a number of events and so-called action hooks. These are events that other add-ons to WooCommerce, e.g. a plugin for payments, can listen to and act upon.

In our plugins, we try to mimic WooCommerce’s own flow as much as possible to increase compatibility with other plugins and avoid any problems that may arise.

The flow of an embedded checkout looks like this:

1. When a customer clicks Place order, we try to create an order in WooCommerce with the status Pending payment.
2. If this goes well, the information is forwarded to the payment service provider, which in turn checks that everything is ok, for example that there are sufficient funds if card payment is the chosen payment method.
3. After these checks are completed, the customer is sent to the store’s Thank you page and we complete the order in WooCommerce and update the status to Processing.

If for any reason the payment is denied by the payment service provider, the order in WooCommerce will not be updated but will retain the status Pending payment. Having several orders with the status Pending payment but which in reality are interrupted can of course be a problem for an e-merchant. But there are ways to get these orders automatically converted to Canceled and you can read about how to do so in Configuring WooCommerce Settings.

Compatibility

WooCommerce is not built to handle embedded checkouts so we need to build support for this in our plugins. Different extensions implement/expand the functionality in slightly different ways and not all themes show the checkout and its checkout fields in the same way. There is always a small risk that compatibility problems may arise.

Our ambition is always that our plugins should be compatible with as many functions and extensions as possible. We work actively with this and release regular updates that lead to a better experience, both for you as an e-retailer but also for your customers.

This article was originally written in December 2017 but was updated in June 2021 and we can happily state that we were able to delete several paragraphs about functions that lacked support.