What is Hyvä React Checkout?
This is what Hyvä React Checkout looks like out of the box:
What is needed to be able to use it?
Hyvä React Checkout is just another Magento 2 module. So you can use it like any other Magento 2 extensions out there. The recommended way of installing it is via composer
composer config repositories.hyva-themes/magento2-react-checkout git email@example.com:hyva-themes/magento2-react-checkout.git
composer require hyva-themes/magento2-react-checkout
After installing the module, you need to enable the module in order to deliver the checkout page using Hyvä React Checkout. For that, log in to your Magento Admin Panel and go to
Hyvä React Checkout->General->Enable and enable it in the backend of your site.
Most often, you will need to customize it. In that case, using a forked version of the original repository in your site makes much more sense. You can also set up the module in the
app/code directory and customize it from there.
When it comes to customization, you are going to mostly work with the React components. So a strong grasp on the React framework is an essential requirement. Then with the official documentation of the Hyvä React Checkout module, you are all set for customizing the checkout page as per your needs.
Is Hyvä React Checkout only compatible with certain Hyvä Themes or Magento versions?
Hyvä React Checkout is compatible with Magento 2.3.4 or higher versions. It supports all kinds of frontend themes out there, be it a Luma based theme, Hyvä theme or a custom headless solution. This is because the React App relies on the GraphQL API services in Magento 2 and will work consistently with any type of frontend themes.
Who developed it?
The idea and the initial implementation came from the Hyvä Themes creator Willem Wigman along with the support of integer_net. Later, a better and consistent new phase of the checkout was contributed by me, Rajeev K Tomy. There are many contributions provided by the Magento community too as it is an open source solution and people out there desperately need a fast and highly performing checkout experience.
I pleasantly encourage you to use it and if possible, contribute to this. In its new version, there is still plenty of room for improving the current solution. You can see here on GitHub, a lot of discussions and issues are reported by the community who are in fact contributing to the betterment of the Hyvä React Checkout.
Why does Hyvä React Checkout exist? What are the benefits?
This is our first blog post here from Rajeev!
Rajeev K Tomy joined our team at integer_net in April 2021. Ever since, he has been busy developing in several of our projects with Hyvä Themes and Rajeev has also been working on this Hyvä React Checkout. Hyvä React Checkout was presented to the public at Reacticon in a talk by Rajeev and Fabian. Great to have you on board, Rajeev!
- It is a fast and highly performing checkout solution.
- 100% developer satisfaction assured. Easy to customize and super fun to work with.
How does the Hyvä React Checkout work? Which technology is used?
Hyvä React Checkout contains a React app (more specifically a create-react-app). Apart from that, everything in this module is native Magento stuff. This React app resides in the
src/reactapp directory and its latest build is available as a static js file asset. This js file is responsible for rendering the whole checkout in the frontend.
When you want to customize the checkout, you are going to mostly work on the React part. The React app uses some of the well known packages in the React realm to make our job easier. Some of them are:
- Formik – This is a library used to manage the form states (well, checkout is basically a big form)
- Tailwind CSS – This library is used to style the checkout page.
Hyvä React Checkout allows us to launch the React app embedded in a development mode. This enables us to see the checkout page at
http://localhost:3000 and the changes we are doing on the components will be immediately reflected using the Hot Module Replacement (HMR). This is going to save a ton of time in development since we are getting almost immediately the feedback to the changes we made. Remember, this is something we really lack with the Luma checkout where in order to see the changes we have made, we need to manually reload the checkout page and make sure the changes have really been ported to the browser upon reload
How can further features / integrations be implemented?
Hyvä React Checkout is going to release its first matured stable version soon. It covers most of the checkout features at the moment. It is super easy to do your customizations too. However, there are a lot of features it still lacks within this early stage. If you find a feature which really needs to be there in the checkout, then you should report it in the issues section of the repository. If you have access to the Hyvä Themes Slack, then there is a dedicated channel #hyvä-checkout to ask your queries (This Slack channel is available only for those who have purchased a Hyvä Themes license). Alternatively, you can check out the #hyva-react-checkout Slack channel on the Magento Community Engineering Slack space.
Since it is basically a React app, it is up to you how to customize it. However, there are some practices we observe for a better codebase there. These best practices will be documented and published in the official documentation of the module.
How can the Hyvä React Checkout be extended if you want to change functionality?
In most cases, you may need to customize the checkout. In case you have installed the module via composer, this will be a real blocker for you to customize it. Because if you do any changes to a composer dependency directly, then the next time you update the composer, all of your changes will be gone. So it is very important you properly extend the Hyvä React Checkout.
There are mainly two ways to extend the Hyvä React Checkout repository.
- Copy the module over the
app/codedirectory and set up the module
Hyva_ReactCheckoutthere. This old trick will work without any issues and you are now able to customize the react app in
app/code/Hyva/Checkout/reactapp. This will allow us to track our changes using a version control tool such as GitLab or GitHub. The downside here is that you need to manually copy over the changes in the original repository.
- Another approach is to fork the Hyvä React Checkout repository and use your forked version in your Magento site. This is what we recommend the most. Here you can customize the checkout as per your need and still use it as a composer dependency in your site. It is also convenient to keep track of the changes in the original repository and port necessary changes to your repository.
We know that this is still a cumbersome process. To deal with this issue, Hyvä provides a Magento 2 module template which will allow us to extend the Hyvä React Checkout seamlessly. The brain behind this idea is Jisse Reitsma. With this approach, you only need to port those React components which need to be customized over to your custom module and it will work as expected. This will allow you to upgrade Hyvä React Checkout without much hassle and your customizations are tracked under a different module. So this approach is the recommended one when it comes to extending Hyvä React Checkout.
Which payment services are currently supported?
In Hyvä React Checkout, all the payment methods are rendered as a radio option by default. But most of the payment methods have custom behaviour associated with them. Some of them need to show some more fields related to the payment method. Some payment methods will redirect the user to the third party payment gateway interface upon placing the order and come back.
In order to deal with this, Hyvä React Checkout provides a nice interface where you can extend the payment method interaction as per your need. You can read more on this in the documentation here.
In short, Hyvä React Checkout allows us to define a custom renderer for a payment method. Once you register your custom renderer for a specific payment method, it will be using the registered custom renderer to show the payment method and its behaviour instead of the default radio button input presentation of the payment method. It will also allow us to interact with the place order action where you can customize the behaviour as per the payment methods requirements.
Further, Hyvä React Checkout allows you to provide custom renderers defined in a separate repository and plug them into the Hyvä React Checkout with a minimal configuration. All you need to do here is to include your custom payment method renderer via package.json as shown below:
It is that simple. There are currently two custom payment method renderers publicly available:
There are many more under construction and we will be publishing their information soon.
You can find the instructions for defining such an external custom payment method renderer in the documentation here . Our aim is to cover as much as custom payment methods out there like pluggable repositories. There are many more such works going on as an effort from fellow community members. So stay tuned.
Can all shipping services be used with Hyvä React Checkout?
Hyvä React Checkout shows shipping methods as radio inputs and currently, it won’t provide any custom behaviours for the shipping methods. The provision to provide custom behaviour of a shipping method is something we will deal with later. So far, the default behaviour is enough for most of the shipping methods. It is up to you how to integrate custom behaviour of shipping methods at this moment.
Is it possible to contribute to the further development of Hyvä React Checkout? If yes, how?
Oh yes and we really appreciate it. There are many community members who are heavily contributing to Hyvä React Checkout at the moment. It all starts from raising an issue in the repository. We will discuss it in the thread and if the issue is viable, then you can create a merge request to the repository. Myself (Rajeev) or Willem Wigman will review it and finally it will be merged to the main branch.
Similarly, a great support will be provided in the Hyvä Slack channel too (Unfortunately, this is available only for those who have purchased Hyvä Themes).
Author: Rajeev K Tomy
Rajeev K Tomy joined the team at integer_net in April 2021 as a developer. He had already worked on Hyvä related projects, so right from the start Rajeev has been able to support our development team in several projects with Hyvä Themes. In October 2021, he presented a project he has led for several months, Hyvä React Checkout – a free React checkout for Magento stores, together with Fabian Schmengler at Reacticon.