DIBS Easy – Integration flow chart

DIBS Easy is an embedded checkout, an iframe based checkout solution that replaces the standard WooCommerce checkout form. This setup provides an easy way for the customer to complete the purchase and a convenient way for the merchant to offer multiple payment options in the same solution.

An embedded checkout also implies certain limitations in functionality. Compatibility with other plugins that extend the functionality of the standard checkout might be limited.

Visual flow chart

To describe the steps during a purchase process a bit closer, we have created the following integration flow chart:

Step by step description of the purchase process

To sumarize this flow cart – an order goes through the following steps:

  1. WooCommerce checkout page is requested.
  2. If DIBS Easy is the selected or the default payment method a request is sent to DIBS.
  3. DIBS responds with a payment ID and the html used for displaying the Easy checkout iframe.
  4. The regular WooCommerce template file form-checkout.php is replaced with the dibs-easy-checkout.php template file.
  5. The checkout page and the Easy checkout iframe is rendered.
  6. The customer identifies herself in the Easy checkout. DIBS trigger a javascript event, the address data is updated in the webstore, the cart is recalculated and an updated cart is sent to DIBS.
  7. The customer clicks the Pay button in DIBS Easy.
  8. DIBS trigger the pay-initialized event. If there are required extra checkout fields not entered in the checkout we will respond with payment-order-finalized = false. If there are no extra checkout fields or if all required extra checkout fields have been entered we will respond with payment-order-finalized = true.
  9. If the customer have selected card payment as the payment method, the customer will now be redirected to 3DSecure for signing. The customer is then redirected back to the webstore.
  10. The order is now created in DIBS system. DIBS trigger the payment-completed event.
  11. Customer address data is fetched from DIBS.
  12. The WooCommerce checkout form is submitted.
  13. If the checkout form submission was ok, an order is created in WooCommerce.
  14. If the checkout form submission failed the checkout_error event is triggered and the plugin creates an order programatically. An order note with the message This order was made as a fallback due to an error in the checkout is created. In most cases the reason why the form submission failed is also printed in the note.
  15. The customer is now redirected to the thank you page and the order status is set to Processing (via the payment gateway function payment_complete()) in WooCommerce.

Order creation via API callback if something major goes wrong

In some cases an error happen in the same sequence as the customer clicks the Pay button in DIBS Easy, before the order is created in WooCommerce. This might happen if the customers browser crashes, if the internet connection drops or the web server goes down/reboots in this exact moment. 

If this happens the plugin listens to a server-to-server callback that is sent from DIBS. 2 minutes after the order is created in DIBS this callback is processed in the webstore. If no order with the specific paymentID exist in WooCommerce a new order is created with basic customer address data. No order items are added via this callback (this must be added manually by the merchant). 

An order note with the message is created:  Something went wrong during WooCommerce checkout process. This order was created as a fallback via DIBS Easy API callback. Order product information not available. Please see the order in DIBS system for more information about products and order amount.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.