Payone Payment method for the Hyvä React Checkout
- A working Magento site with Payone module installed and setup.
- Hyvä Checkout is installed and setup.
Below you will find the steps to integrate payone methods.
-
You need to add certain CSS files and payone javascript files in the hyvä checkout page. For this you need to update the layout xml file inside Hyvä Checkout module
File:
src/view/frontend/layout/hyvacheckout_checkout_index.xml<?xml version="1.0"?> <page xmlns:xsi="0http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> .... <css src="Payone_Core::css/payolution.css"/> <css src="Payone_Core::css/creditcard.css"/> <css src="Payone_Core::css/klarna.css"/> <css src="Payone_Core::css/payone.css"/> </head> <body> <referenceContainer name="content"> ... <block class="Payone\Core\Block\ClientApi" name="payone_client_api" template="Payone_Core::client_api.phtml" /> <block class="Payone\Core\Block\RatepayDeviceFingerprint" name="payone_ratepay_device_fingerprint" template="Payone_Core::ratepay_device_fingerprint.phtml" /> </referenceContainer> ... </body> </page> -
It is time to add the payone react components to the Hyvä Checkout. Add below code in your
package.json.File:
src/reactapp/package.json"config": { "paymentMethodsRepo": { "payone": "git@github.com:hyva-themes/magento2-hyva-checkout-payone.git" } },If you are using Hyvä Checkout Example Template, then you should use below configuration instead of above.
File:
src/reactapp/package.json"config": { "paymentMethodsRepo": { "payone": "git@github.com:hyva-themes/magento2-hyva-checkout-payone.git -b hyva-checkout-example-template" } },With this code in
package.jsonand runningnpm install, then you are all set. This repo will be copied into the Hyvä Checkout and configured correctly. -
Finally, we need to build the app again. For this, you need to run
npm run buildfrom the root directory of Hyvä Checkout module. After this, if you navigate to the checkout page from your site, then you will see all the payone options you have configured in the above step.
- If you need information on the build process of the React Checkout, then you can read more about it here.
- If you want to know more about how Hyvä Checkout helps you to integrate any payment methods, then read more about it here.
- The official documentation of Hyvä React Checkout
- The documentation of Payone module
This Checkout has been built in corporation - and with the support of - our main partner, integer_net.
The MIT License (MIT). Please see License File for more information.