Creating a Payment Gateway integration in Magento 2
Magento 2 Create Payment Method demonstrates that when your store is built on the Magento 2 platform, you have the ability to create as many payment ways as you need.
You presumably add them to your list of existing payment methods based on the customer’s requirements.
Additional payment methods undoubtedly increase client choice when they proceed to checkout on your site, which can improve their experience and lower abandoned cart rates.
How To Add A New Step In Magento Checkout Page
Step 1: Create A Custom Module
- Create the module configuration file “module.xml” where “app/code/Hikmadh/Pay/etc”.Use the following code.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Hikmadh_Pay" setup_version="1.0.0"/>
</config>
2)Create the registration file “registration.php” where ‘app/code/Hikmadh/Pay”.Use the following code.
<?php
\Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Hikmadh_Pay', __DIR__);
3)Enable the module by typing the following command into your terminal.
php bin/magento module:enable Hikmadh_Pay
Step 2: Create The Configuration File.
- Create a configuration file that will allow you to manage payment gateway configuration from Admin -> Stores -> Settings -> Configuration -> Sales -> Payment Methods.
- Create system.xml at app/code/Hikmadh/Pay/etc/adminhtml/system.xml as follows
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<section id="payment">
<group id="testpayment" translate="label" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Test Payment Method</label>
<field id="active" translate="label comment" sortOrder="1" type="select" showInDefault="1" showInWebsite="1" showInStore="0">
<label>Enable</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
</group>
</section>
</system>
</config>
Step 3: Create config.xml.
- Create config.xml file in app/code/Hikmadh/Pay/etc/ folder as follows :
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Store/etc/config.xsd">
<default>
<payment>
<testpayment>
<payment_action>authorize</payment_action>
<model>Hikmadh\Pay\Model\PaymentMethod</model>
<active>1</active>
<title>Test Payment Method</title>
<order_status>pending_payment</order_status>
</testpayment>
</payment>
</default>
</config>
Step 4: Create a model file.
- Create a model file at app/code/Hikmadh/Pay/Model/PaymentMethod.php which will handle the logic of payment gateway implementation.
<?php
namespace Hikmadh\Pay\Model;
/**
* Pay In Store payment method model
*/
class PaymentMethod extends \Magento\Payment\Model\Method\AbstractMethod
{
/**
* Payment code
*
* @var string
*/
protected $_code = 'testpayment';
}
As previously stated, there are three functions,“authorise”, “capture”, and “refund”, which are used to authorise a card, take/capture money from the client, and deliver a refund to the customer.
Step 5: Create payment method in checkout page.
- Create a layout file at app/code/Hikmadh/Pay/view/frontend/layout/checkout_index_index.xml.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="billing-step" xsi:type="array">
<item name="component" xsi:type="string">uiComponent
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="renders" xsi:type="array">
<!-- merge payment method renders here -->
<item name="children" xsi:type="array">
<item name="testpayment" xsi:type="array">
<item name="component" xsi:type="string">Hikmadh_Pay/js/view/payment/method-renderer</item>
<item name="methods" xsi:type="array">
<item name="testpayment" xsi:type="array">
&titem name="isBillingAddressRequired" xsi:type="boolean">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
<item>
</item>
</argument>
</arguments>
<referenceBlock>
</body>
</page>
2)Create a Js file at app/code/Hikmadh/Pay/view/frontend/web/js/view/payment/method-renderer.js so that we can fetch the payment gateway template using knockout in the checkout payment step.
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/renderer-list'
],
function (
Component,
rendererList
) {
'use strict';
rendererList.push(
{
type: 'testpayment',
component: 'Hikmadh_Pay/js/view/payment/method-renderer/testpayment'
}
);
return Component.extend({});
}
);
3)create the component as declared above in app/code/Hikmadh/Pay/view/frontend/web/js/view/payment
/method-renderer/testpayment.js as follows
define(
[
'Magento_Checkout/js/view/payment/default'
],
function (Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Hikmadh_Pay/payment/testpayment'
}
});
}
);
- The next step will be to create the Knockout template at app/code/Hikmadh/Pay/view/frontend/web/template
/payment/testpayment.html
<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice">
<input type="radio"
name="payment[method]"
class="radio"
data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
<label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
</div>
<div class="payment-method-content">
<div class="actions-toolbar">
<div class="primary">
<button class="action primary checkout"
type="submit"
data-bind="
click: placeOrder,
attr: {title: $t('Place Order')},
css: {disabled: !isPlaceOrderActionAllowed()},
enable: (getCode() == isChecked())
"
disabled>
<span data-bind="i18n: 'Place Order'"></span>
</button>
</div>
</div>
</div>
</div>
These steps will create a basic payment gateway that would be visible at the time of checkout.
