Why settle for average when you can have the best? 🤩

As the last step in the customer's shopping journey, the checkout conversion rate plays a critical role. Hyvä Checkout addresses this by significantly enhancing the design and usability of the checkout process, driving up to a 35% uplift in conversion rates​.

Hyvä Checkout revolutionizes the checkout experience for all parties involved. For shoppers, it offers a fast, frictionless, and intuitive checkout process, boasting a load time 13 times faster on mobile devices compared to standard Magento Luma checkout​. For merchants, it drives more sales with better checkout conversion and out-of-the-box configuration options. And for developers, it reduces the time and effort to customize Magento Checkout at least tenfold​.

The Hyvä Checkout by default comes with multiple layout options, like a three-step checkout or a “one step checkout”, which shows all steps on a single page. These layout options are fairly easy to swap, and adding a custom layout is simple as well.

The Hyvä Checkout is built on top of Magewire, a system that allows our backend developers to create logic for the checkout in PHP and XML and wire it up to the frontend without having to write large swaths of Javascript. Because the logic resides server-side, the checkout is very fast since it doesn’t have to rely on client side performance.

Integrations

Adding functionality like payment methods, shipping methods and address validation is a number of times quicker than building this in the old Luma checkout. The Hyvä Checkout has been built from the beginning with the idea of easy customizability, which really shows.

The currently available integrations for Hyvä Checkout are;

• Mollie
• Multisafepay
• PostNL
• ShipperHQ
• EU VAT calculation
• PayPal
• Amazon Pay

Internally we have also built an integration with Paazl.

For another client, we have implemented a list of available pick-up points from UPS as a shipping method. This was built in mere hours instead of days.

Tech deep-dive

For the implementation we only had to send the data from the cart to an API endpoint through PHP and get back the pickup points. With standard Hyvä Modal we could convert this data to an easy interface for the customer with ease. When the user selects a pickup point Magewire will send the selected point to the quote.

One of the great features that the checkout brings are the methods for validation. With Magewire you can easily use the createBlocking method which is a part of the EvaluationResultFactory to check if the user already selected a pickup point, and if not, it will block the user from placing an order. This combined with the other methods like createSucces and createErrorMessage makes it super easy to validate the users input in the backend while also automatically giving them feedback in the frontend.

These methods also make it really easy to split up the checkout process in multiple ways. It is really easy to make a one-page checkout process, but the same goes for a multi-step checkout.

For front-end validation the checkout uses a combination of Magewire together with the standard Hyvä Form validation. This makes it easy to show messages while the user is filling out the form in an accessible way.

The benefit of the checkout not having large swaths of Javascript and that it also does not include any framework, also makes it easy to add payment or shipping options that work with iFrames or are based on vanilla JS, like Paazl. Normally you would have to “hook” these into RequireJS or a framework like React. In the Hyvä Checkout you can just use the default scripts and maybe add some event listeners to send feedback to the backend. This way, we can re-use large parts of the original extension.

These easy methods that are built-in Magewire make it really easy to extend and fully customize the checkout in way less time than before, without sacrificing the needed reliability of a checkout.