Payone Payment method for Hyvä 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": "[email protected]: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": "[email protected]: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 have any doubts about the building the react app, then 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ä Checkout
- The documentation of Payone module