Magento 2 Provides Many Payment Methods which you can use for online store but sometimes there is a need to
Create Custom Payment method in Magento 2.
In this blog, I will show you how we can create an offline payment method in Magento 2. To create an offline payment method follow the below steps.
Step 1: Create a Simple Module
For creating a payment method we need a custom module Rk_CustomPayment where we can define our configuration and add custom logic. Follow this link for how to Create Module in Magento 2
Step 2: Create a system.xml
System.xml file is used to add configuration options like Enable/Disable, Method Title, Order Status etc.. in the Admin panel under the Payment Methods section in Stores > Configuration > Sales > Payment Methods
Create a system.xml file at app/code/Rk/CustomPayment/etc/adminhtml/system.xml and add the below code.
<?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" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="1000" translate="label">
<group id="custompayment" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="10" translate="label">
<label>CustomPayment</label>
<field id="active" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="10" translate="label" type="select">
<label>Enabled</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
<field id="title" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="20" translate="label" type="text">
<label>Title</label>
</field>
<field id="order_status" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="30" translate="label" type="select">
<label>New Order Status</label>
<source_model>Magento\Sales\Model\Config\Source\Order\Status\NewStatus</source_model>
</field>
<field id="allowspecific" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="40" translate="label" type="allowspecific">
<label>Payment from Applicable Countries</label>
<source_model>Magento\Payment\Model\Config\Source\Allspecificcountries</source_model>
</field>
<field id="specificcountry" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="50" translate="label" type="multiselect">
<label>Payment from Applicable Countries</label>
<source_model>Magento\Directory\Model\Config\Source\Country</source_model>
<can_be_empty>1</can_be_empty>
</field>
<field id="sort_order" showInDefault="1" showInStore="1" showInWebsite="1" sortOrder="60" translate="label" type="text">
<label>Sort Order</label>
</field>
</group>
</section>
</system>
</config>
Step 3: Create a config.xml
The config.xml file use to specifies default values for the Payment module options like Status , Title, Order Status and important configuration for the Payment model class.
Create a system.xml file at app/code/Rk/CustomPayment/etc/config.xml and add the below code.
<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
<default>
<payment>
<custompayment>
<active>1</active>
<model>Rk\CustomPayment\Model\Payment\CustomPayment</model>
<order_status>pending</order_status>
<title>CustomPayment</title>
<allowspecific>0</allowspecific>
<group>offline</group>
</custompayment>
</payment>
</default>
</config>
Step 4: Create payment.xml
Payment.xml file is used to define payment method group,multiple address allowed or not and supported credit cards type if required for payment method.
Create a payment.xml file at app/code/Rk/CustomPayment/etc/payment.xml and add the below code.
<?xml version="1.0" ?>
<payment xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Payment:etc/payment.xsd">
<groups>
<group id="offline">
<label>Offline Payment Methods</label>
</group>
</groups>
<methods>
<method name="custompayment">
<allow_multiple_address>1</allow_multiple_address>
</method>
</methods>
</payment>
Step 5: Create a Payment Model
We have to define the payment model in the config.xml file in <model/> node. So we will create a Model file that is responsible for our custom logic like payment method need to display or not.
Create CustomPayment.php file at app/code/Rk/CustomPayment/Model/Payment/CustomPayment.php and add the below code.
<?php
/**
* Copyright © All rights reserved.
* See COPYING.txt for license details.
*/
declare(strict_types=1);
namespace Rk\CustomPayment\Model\Payment;
class CustomPayment extends \Magento\Payment\Model\Method\AbstractMethod
{
protected $_code = "custompayment";
protected $_isOffline = true;
public function isAvailable(
\Magento\Quote\Api\Data\CartInterface $quote = null
) {
return parent::isAvailable($quote);
}
}
Step 6: Create a Layout file
We need a layout file to define our payment method to display on the checkout and for this, we will create checkout_index_index.xml which is responsible for rendering the checkout page.
Create checkout_index_index.xml at app/code/Rk/CustomPayment/view/frontend/layout/checkout_index_index.xml and add below code.
<?xml version="1.0" ?>
<page layout="1column" 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="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="renders" xsi:type="array">
<item name="children" xsi:type="array">
<item name="custompayment" xsi:type="array">
<item name="component" xsi:type="string">Rk_CustomPayment/js/view/payment/custompayment</item>
<item name="methods" xsi:type="array">
<item name="custompayment" xsi:type="array">
<item 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>
Step 7: Create custompayment.js
custompayment.js file is used to define our payment renderer file.
Create custompayment.js file at app/code/Rk/CustomPayment/view/frontend/web/js/view/payment/custompayment.js and add the below code.
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/renderer-list'
],
function (
Component,
rendererList
) {
'use strict';
rendererList.push(
{
type: 'custompayment',
component: 'Rk_CustomPayment/js/view/payment/method-renderer/custompayment-method'
}
);
return Component.extend({});
}
);
Step 8: Create a Renderer JS and HTML file
Create a Renderer file that we have defined as a component in custompayment.js file. In this component, we will define our html file which displays the payment method in the checkout page.
You can add your validation related to the payment method in custompayment-method.js and custom logic.
Create custompayment-method.js file at app/code/Rk/CustomPayment/view/frontend/web/js/view/payment/method-renderer/custompayment-method.js and add the below code.
define(
[
'Magento_Checkout/js/view/payment/default'
],
function (Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Rk_CustomPayment/payment/custompayment'
},
getMailingAddress: function (
return window.checkoutConfig.payment.checkmo.mailingAddress;
},
});
}
Now, We will create our template file which we have defined in above js file.
Create custompayment.html file at app/code/Rk/CustomPayment/view/frontend/web/template/payment/custompayment.html and add the below code.
<!--
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<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">
<!-- ko foreach: getRegion('messages') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<div class="payment-method-billing-address">
<!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<div class="checkout-agreements-block">
<!-- ko foreach: $parent.getRegion('before-place-order') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<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>
Now, After all these steps our Custom Payment method created to activate this module run following commands.
php bin/magento setup:upgradephp bin/magento setup:static-content:deploy -f
Hope you find this Tutorial is helpful. Do comment if you face any issue or Contact me If you want any help or customization in your existing Project or Extension.
