EASY CHECKOUT GUIDE

Best practice on how to implement Easy and how to place the checkout on your website

The Easy checkout provides a one-click checkout that handles payment methods, consumers shipping information, and stores this in a safe and secure manner. We have optimized the checkout to convert visitors to consumers through an embedded checkout that reduce the actions a potential buyer must do before completing a purchase.

Everything through one integration – get access to payment methods, consumers and their stored payment methods through one easy integration.

Integrate yourself, though one of our partners or use our open source modules to quickly get up and running with this state of the art checkout.

Easy Checkout is designed to leverage the network of merchants utilizing Easy. As we recognize returning consumers and store consumer information on our end, consumers shopping in your web shop for the very first time will also be presented with their personal information and available payment methods, enabling a one-click-checkout experience.

How to place the Easy checkout on your site.

A) Once a consumer clicks the cart they should be directed straight to the Checkout. There is no need for any steps between that. This will maximize conversion.

B) Do not implement Easy as one of many payment method on your web shop. Easy contains the payment methods you need, this will decrease conversion and create confusion for consumers.

C) Do not prompt consumer to fill in any personal information outside the checkout. Address, email, phone etc. is handled in the Checkout, and asking for it will decrease your conversion rate.

D) If you allow for different shipping options place this next to or over the checkout, not on a separate page that the consumer must navigate through.

E) To drive conversion the checkout should be presented above the scroll and on a prominent place on the site.

If you follow the best practices above and integrate according to the guide below you will experience the best result and highest conversion rate.

Easy flow

This flow is mandatory and cannot be changed. As an example: the merchant site cannot fetch the payment status, but must go through the Dibs Checkout.

  1. The consumer navigates to the merchant’s Checkout page.
  2. The Merchant creates a new PaymentId through a backend-to-backend (B2B) call (as already describe in the integration-guide) (*1)
  3. The Merchant stores the PaymentId gotten from the B2B call for future usage.
  4. The Merchant loads the Dibs Checkout through the provided JavaScript code (as describe in the integration-guide). (*1) (*2)
  5. Dibs Checkout starts and is ready for the consumer to pay.
  6. The Consumer is identified, selects payment method and presses the “Pay” button in Dibs Checkout.
  7. (Optional) Dibs Checkout sends a “pay-initialized” JavaScript event to the Merchant site. This optional event could be used to save the order in the Merchant database.
  8. (Optional) Merchant has handled the “pay-initialized” event, and is ready to send the control back to Dibs Checkout. The Merchant site sends a “payment-order-finalized” JavaScript event with the result of the operation:
    a. true: the payment will continue
    b. false: an error message is shown to the Consumer
  9. The consumer is redirected to an external 3DS authentication form (*3) and completes the security check.
  10. The 3DS form is completed and the consumer is returned back to the merchant site again. The URL contains a reserved keyword “PaymentId”.
  11. The merchant loads Dibs Checkout again with the same PaymentId.
  12. If the payment was successful, the Dibs Checkout sends a JavaScript event “payment-completed”. If the payment fails (for instance due to failed 3D-Secure authentication), Dibs Checkout will restart the payment process automatically.
  13. The merchant site is handling the JavaScript event “payment-completed” and it displays the “Thank you” page.
  14. The payment is completed successfully, and the consumer is notified.

Additional notes:

(*1) For security reasons, the Checkout URL parameter must match the URL where the Dibs Checkout is loaded. An attempt to load the checkout in a different domain will raise an Ops error page.

(*2) List of common problems that raise an Ops error page:

  • Checkout URL specified in the Payment doesn’t match the URL where the checkout is loaded.
  • In the parameters sent to the Dibs Checkout, the PaymentId is wrong or it’s expired (for security reason it leaves for 20 minutes).
  • The checkout parameters are not correct, like wrong “checkoutKey”, invalid language code, etc.
  • The PaymentId is created using the “test” environment, but the checkout is loaded using the “live” environment.

(*3) this is required only for credit card payments. For invoice payments the consumer is not redirected to the 3D-Secure form.

 

Easy checkout together with other payment method

A) Easy must always be shown as the primary option and load automatically loaded on the cart page.

B) If other payment method is offered, it should be displayed as a simple text link above the DIBS checkout.

Page load animation

For a coherent design of the checkout you are welcome to use the gif animation below if needed e.g. when sending a customer to a confirmation page:

 

Do you have a question or need help?
Follow us
DIBS Payment Services
Stockholm +46 (0)8-527 525 00
Göteborg +46 031-600 800
København +45 7020 3077
Oslo +47 21 55 44 00
Close menu