Exploring React Hyva Checkout: A Developer’s Overview
Before we get started, make sure you have the following prerequisites in place:
- A running Magento 2 store (from 2.3.9 up, however, preferred 2.4.5)
- Node.js installed on your system
Installing React Hyva Checkout
Follow these steps to install React Hyva Checkout on your Magento 2 store:
- In order to install React Hyva Checkout, the best approach is to use composer with the following command composer require hyva-themes/magento2-react-checkout
- Next in order to activate React Hyva Checkout as the default checkout use the command bin/magento config:set hyva_react_checkout/general/enable 1
- This is the recommended approach, however you can also clone the repository into your project and customize it directly (we have another way for this using a custom module just for customization, which will be shown later). To do so move to the root of your Magento 2 project
- Clone the React Hyva Checkout repository from GitHub using the following command:
git clone https://github.com/hyva-themes/magento2-hyva-checkout.git app/code/Hyva/Checkout
- Next, run the following commands in the root directory of your Magento 2 installation:
bin/magento module:enable Hyva_Checkout
bin/magento setup:static-content:deploy -f
- Finally, refresh your browser and you should see the React Hyva Checkout enabled on your Magento 2 store.
Adding Payment and Shipping Gateways in React Hyva Checkout
React Hyva Checkout supports a wide range of payment and shipping gateways, which can be easily integrated into your Magento 2 store.
Adding a Payment Gateway
To add a payment gateway to React Hyva Checkout, follow these steps:
- Depending upon the payment methods, you may have some special configuration settings in your store. Usually, you do this under Stores > Configuration.
- If you are familiar with the default Magento 2 checkout page, then you may know that Magento 2 passes this configuration via a global variable which you can find at window.checkoutConfig.
- To collect these checkout configurations, we have a ViewModel (Hyva\ ReactCheckout\ ViewModel\ CheckoutConfigProvider) available in the module, and we are passing this configuration through the root DOM element.
- See the layout file where we inject the view model, the file is both present in the original module and in the module we suggest using for customizations.
- File: src/view/frontend/layout/
- See the data attribute data-checkout_configuration through which we are passing this configuration.
- File: src/view/frontend/templates/react-container.phtml
- Now the React app has access to the payment configurations, and it can be used in the application according to your need.
Adding a Shipping Gateway
To add a shipping gateway to React Hyva Checkout, follow these steps:
- Install the shipping gateway extension for Magento 2 using the instructions provided by the extension developer.
- Open the src/components/ShippingMethods.js file and add a new shipping method component for the shipping gateway. For example, if you are using the DHL shipping gateway, you can add the following code:
- Create a new file DhlShippingMethod.js in the src/components directory and add the code to render the shipping gateway form. For example, if you use the DHL shipping gateway, you can add the following code:
How to solve possible issues
While customising React Hyva Checkout, you may encounter some issues. Here are some common issues and their solutions:
Issue: Changes are not reflected in the checkout page
Issue: Payment or shipping gateway not working
Solution: Make sure that you have installed the payment or shipping gateway extension for Magento 2 and have followed the instructions provided by the extension developer to configure it correctly. Also, ensure that you have added the corresponding payment or shipping method component in the PaymentMethods.js or ShippingMethods.js file, respectively, and have provided the correct code for it.
Hyvä CheckoutExample Module Template
It is an example project that demonstrates how to use the hyva-react-checkout module to create a custom checkout page for Magento 2.
hyva-themes/magento2-checkout-example provides a starting point for customizing the React Hyva Checkout page, with pre-built payment and shipping gateway components. It also includes a docker-compose.yml file that can be used to set up a development environment.
Here is how to customize the module using this starting point:
- Clone the hyva-themes/magento2-checkout-example repository using git clone https://github.com/hyva-themes/magento2-checkout-example.git.
- Navigate into the project directory and run docker-compose up -d to start the development environment.
- Install the Magento 2 instance by running docker-compose exec php bin/magento setup:install.
- Install the hyva-react-checkout module using docker-compose exec php bin/magento module:enable Hyva_Checkout.
- Run docker-compose exec php bin/magento setup:upgrade to apply the changes.
- Open your browser and navigate to http://localhost:8000 to see the custom checkout page.
- To customize the checkout components, navigate to the src directory in the project directory. This directory contains the source code for the checkout components.
- To modify an existing component, navigate to its directory in the src/components directory and make the desired changes. For example, to modify the billing address component, navigate to src/components/billing-address and modify the files as needed.
- To add a new component, create a new directory in the src/components directory and add the necessary files. You can use the existing components as a guide for creating new ones.
- Clear the Magento 2 cache by running docker-compose exec php bin/magento cache:clean.
- Refresh the checkout page in your browser to see the changes.
Do you need help with the development of your e-commerce to drive much better results and sales? Don't hesitate to contact us! We're ready to help!