Why settle for average when you can have the best? 🤩
As the final step in the customer's shopping experience, the conversion rate of the checkout page plays a crucial role. Hyvä Checkout addresses this by significantly improving the design and usability of the checkout process, which can lead to an increase of as much as 35% in conversion rates.
Hyvä Checkout revolutionizes the checkout experience for all parties involved. For shoppers, it offers a fast, smooth and intuitive checkout process, with a load time 13 times faster on mobile devices than the standard Magento Luma checkout page. For merchants, it leads to more sales with better conversion rates and out-of-the-box configuration options. And for developers, it reduces the time and effort required to customize Magento Checkout by at least a factor of ten.
Hyvä Checkout comes standard with several layout options, such as a three-step checkout process or a "one-step checkout," where all steps are displayed on one page. These layout options can be changed quite easily, and adding a custom layout is also simple.
Hyvä Checkout is built on top of Magewire, a system that allows our back-end developers to create the logic for the checkout page in PHP and XML and connect it to the frontend without having to write large sections of JavaScript. Because the logic is placed on the server side, the checkout page is very fast because it does not rely on client-side performance.
Integrations
Adding functionalities such as payment methods, shipping methods and address validation is many times faster than building them in the old Luma checkout page. The Hyvä Checkout was 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 also built an integration with Paazl.
For another client, we implemented a list of available UPS pickup points as a shipping method. This took only a few hours instead of days.
Technical depth
For the implementation, we only needed to send the shopping cart data via PHP to an API endpoint and get the pickup points back. Using the standard Hyvä Modal, we could easily convert this data into a user-friendly interface for the customer. When the user selects a pickup point, Magewire sends the selected point to the quote.
One of the great features offered by the checkout page is validation methods. With Magewire, you can easily use the createBlocking method, which is part of the EvaluationResultFactory, to verify that the user has already selected a pickup point. If not, it blocks the user from placing an order. Combined with other methods such as createSuccess and createErrorMessage, it is very easy to validate the user's input to the backend and automatically provide feedback to them in the frontend.
These methods also make it very easy to break up the checkout process in different ways. It is very easy to create a single-page checkout process, but the same goes for a multi-step checkout process.
For front-end validation, the checkout page uses a combination of Magewire along with standard Hyvä Form validation. This makes it easy to display messages while the user fills out the form in an accessible way.
The advantage of the checkout page not containing large portions of JavaScript nor a framework also makes it easy to add payment or shipping options that work with iFrames or are based on standard JS, such as Paazl. Normally, you would have to "hook" these into RequireJS or integrate them into a framework such as React. In Hyvä Checkout, you can just use the standard scripts and maybe add some event listeners to send feedback to the backend. This way we can reuse large parts of the original extension.
These simple methods built into Magewire make it really easy to expand and fully customize the checkout page in much less time than before, without compromising the required reliability of a checkout page.