Checkout flow rewrite

Checkout flow rewrite

For version 2.0.0 and higher of the Klarna Checkout for WooCommerce plugin, the checkout flow has improved. With this update, the order of the WooCommerce versus Klarna order is different than in previous versions of the plugin. 

The WooCommerce order will now be created first (in Pending status), then the Klarna order is placed, and finally the WooCommerce order is updated to Processing status. This update is more compatible with other WooCommerce plugins.

The new checkout flow also means that Pending orders can be visible in WooCommerce, where the payment has not been finalized in Klarna (for example card payment where there was not enough funds on the card). This is part of the general WooCommerce checkout flow, and it does not implicate that something is wrong. It is just a new scenario for the Klarna Checkout payment gateway.  


Old checkout flow


Checkout flow for versions older than v2.0.0:

  1. Customer navigates to the checkout page in WooCommerce. If Klarna Checkout is the selected (or only) payment method, a Klarna order id is created.
  2. When the customer clicks the Place order button in KCO, the payment is finalized in Klarnas system.
  3. Klarna redirects the customer to the confirmation URL (the checkout page with supporting parameters in the URL).
  4. The standard WooCommerce checkout form is submitted and an order is created in WooCommerce.
  5. The customer is redirected to the order received page.

This setup has some weaknesses. If a technical issue happens between the payment is finalized in Klarnas system and when the order is created in WooCommerce, there might be a situation where some data is lost. There is a fallback sequence to create the order in WooCommerce on the push callback from Klarna to avoid missing orders, but there might be data added to the cart session (by other plugins) that we aren’t able to support during the order creation via the fallback sequence.


New checkout flow


To solve this weakness, we have been working together with Klarna and Klarna has enhanced their API’s to better support the WooCommerce checkout flow. The new flow is structured in the following way:

  1. Customer navigates to the checkout page in WooCommerce. If Klarna Checkout is the selected (or only) payment method, a Klarna order id is created.
  2. When the customer clicks the Place order button in KCO, a JavaScript event is triggered by Klarna.
  3. The standard WooCommerce checkout form is submitted by the Klarna Checkout plugin and a pending order is created in WooCommerce. This order has not yet been paid for and you should not change the status to Processing/Completed manually.
  4. If the order creation went well, the KCO plugin responds with a true message in the JavaScript event (if something went wrong during the order creation process the KCO plugin will respond with a false message in the JavaScript event and Klarna will not finalize the purchase. Instead an error notice will be displayed for the customer). 
  5. Provided that the KCO plugin respond with a true message, Klarna then finalizes the purchase in their system.
  6. Klarna redirects the customer to the confirmation URL.
  7. The KCO plugin redirects the customer to the order received page and updates the order status to Processing in WooCommerce.

When the customer is redirected to the confirmation URL, the KCO plugin makes a request to Klarna to confirm the payment status. In this sequence the plugin changes the request endpoint from Klarnas Checkout API to the Order Management API. This is necessary to be able to get information about the fraud status of the order. 

In some cases, the order is not yet available in Klarnas Order Management platform. In these cases, the plugin changes the WooCommerce order status to On hold together with the order note Waiting for verification from Klarnas push notification. The push notification callback from Klarna will be triggered approximately 2 minutes later. If everything is ok in Klarna the WooCommerce order will then change status to Processing


FAQ


I have a lot of pending orders – what should I do?

If the amount of pending orders seems too high there might be something wrong with the configuration in your Klarna merchant account. To investigate this closer you can look into the Klarna Checkout logs in WooCommerce or in your Klarna merchant portal. Search for words like error & Bad value

You can also contact Klarna directly and ask if they can help you investigate further. Make sure you provide the Klarna order id for the purchase.

Customers gets the notice Please try again, something went wrong with processing your order

This message is displayed to the customer when the WooCommerce order creation process timeout. The timeout time is set to 20 seconds. On some slow servers the problem is solved by increasing this time. This can be done via a filter:

<?php
/**
 * Filter hook kco_checkout_timeout_duration
 * Modify the timeout time used during the order creation process in Woocommerce.
 *
 * Used together with Klarna Checkout for WooCommerce plugin v2.x.
 *
 * Add this code to your themes functions.php file or include it in a separate functionality plugin (https://css-tricks.com/wordpress-functionality-plugins/).
 */
add_filter( 'kco_checkout_timeout_duration', 'kco_set_custom_timeout' );
function kco_set_custom_timeout( $time ) {
    return 30;
}

If you want to search your Klarna Checkout plugin logs for this issue you can search for Timeout for validation_callback triggered.


Why was this change needed?


The new checkout flow is more aligned with the standard WooCommerce checkout flow. With this change the KCO plugin will be more compatible with other WooCommerce extensions and the risk of lost data will decrease.