In this tutorial, Today I will explain to you about how to create custom payment method in Magento 2. There are some payment methods by default available in Magento 2. Check/money order, Cash on delivery, Check/money order etc. are default payment methods in Magento 2.
However, when you need to create custom payment method then, you need to create custom module for that. Let’s follow the below steps to create custom payment method :
You may also like this :
- Magento 2 : Disable Payment Method For Certain Customer Groups
- Magento 2 : List of payment methods using command line
Steps of Create Custom Payment Method :
1) First of all, Create registration.php file to register your module at app/code/RH/CustomPayment/ file path and paste the below code :
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*
* Module Created By : Rohan Hapani
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'RH_CustomPayment',
__DIR__
);
2) Secondly, Create module.xml for define your module at app/code/RH/CustomPayment/etc/ file path and paste the below code :
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*
* Module Created By : Rohan Hapani
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="RH_CustomPayment" setup_version="1.0.0"/>
</config>
3) Then, Create config.xml file to set your payment method active at app/code/RH/CustomPayment/etc/ and paste the below code :
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*
* Module Created By : Rohan Hapani
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Store/etc/config.xsd">
<default>
<payment>
<custompayment>
<payment_action>true</payment_action> <!-- You can use another method like authorize,capture etc. -->
<model>RH\CustomPayment\Model\PaymentMethod</model>
<active>1</active>
<title>RH Custom Payment</title>
<order_status>pending_payment</order_status> <!-- Set your default order status -->
</custompayment>
</payment>
</default>
</config>
4) Now, For display payment method in configuration Create system.xml file at app/code/RH/CustomPayment/etc/adminhtml/ and paste the below code :
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*
* Module Created By : Rohan Hapani
*/
-->
<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="custompayment" translate="label" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1">
<label>RH Custom Payment</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>
In addition, you can add more fields in custom payment method based on your requirement.
5) After that, For define payment method, Create PaymentMethod.php file at app/code/RH/CustomPayment/Model/ and paste the below code :
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*
* Module Created By : Rohan Hapani
*/
namespace RH\CustomPayment\Model;
/**
* RH Custom Payment Method Model
*/
class PaymentMethod extends \Magento\Payment\Model\Method\AbstractMethod {
/**
* Payment Method code
*
* @var string
*/
protected $_code = 'custompayment';
}
6) After that, To register template and render file create method-renderer.js file at app/code/RH/CustomPayment/view/frontend/web/js/view/payment/ and paste the below code :
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*
* Module Created By : Rohan Hapani
*/
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/renderer-list'
],
function (
Component,
rendererList
) {
'use strict';
rendererList.push(
{
type: 'custompayment',
component: 'RH_CustomPayment/js/view/payment/method-renderer/custompayment'
}
);
return Component.extend({});
}
);
7) Now, Create custompayment.js file at app/code/RH/CustomPayment/view/frontend/web/js/view/payment/method-renderer/ and paste the below code :
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*
* Module Created By : Rohan Hapani
*/
define(
[
'Magento_Checkout/js/view/payment/default'
],
function (Component) {
'use strict';
return Component.extend({
defaults: {
template: 'RH_CustomPayment/payment/custompayment'
}
});
}
);
8) After that, Create custompayment.html template file at app/code/RH/CustomPayment/view/frontend/web/template/payment/ and paste the below code :
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*
* Module Created By : Rohan Hapani
*/
-->
<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>
9) To display payment method at checkout page, Create checkout_index_index.xml file at app/code/RH/CustomPayment/view/frontend/layout/ and paste the below code :
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*
* Module Created By : Rohan Hapani
*/
-->
<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>
<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="custompayment" xsi:type="array">
<item name="component" xsi:type="string">RH_CustomPayment/js/view/payment/method-renderer</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>
In Last, you need to execute this below command :
php bin/magento s:up
php bin/magento s:s:d -f
php bin/magento c:c
That’s it !! Finally, you can see your custom payment method.
You can download full module from here : Click Here to Download Module
I hope this blog is easy to understand about how to create custom payment method in Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment in this blog, I’ll get back with proper solution.
Keep liking and sharing 🙂
