How to Create Custom Payment Method in Magento 2
Magento 2 Payment Method Development – In this dev doc article, we will learn how to create a custom payment method and render it to the checkout page in Magento 2.
There are following files will have to create:-
1 – Create Test/Testpayment/registration.php for register your module.
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Test_Testpayment',
__DIR__
);
2- Create Test/Testpayment/etc/module.xml for define module name.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:`xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Test_Testpayment" setup_version="2.0.0" active="true">
</module>
</config>
3- Create Test/Testpayment/etc/config.xml for define your payment method.
<?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><!-- You can use another methor like capture -->
<model>Test\Testpayment\Model\PaymentMethod</model>
<active>1</active>
<title>Test Payment</title>
<order_status>pending_payment</order_status><!-- set default order status-->
</testpayment>
</payment>
</default>
</config>
4- Create Test/Testpayment/etc/adminhtml/system.xml for display payment method in backend. In this file mentioned only one field for enable/disable method.You can add field accordingly your need.
<?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</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>
5- Create model file to define payment method Test/Testpayment/Model/PaymentMethod.php
<?php
namespace Test\Testpayment\Model;
/**
* Pay In Store payment method model
*/
class PaymentMethod extends \Magento\Payment\Model\Method\AbstractMethod
{
/**
* Payment code
*
* @var string
*/
protected $_code = 'testpayment';
/**
* Authorizes specified amount.
*
* @param InfoInterface $payment
* @param float $amount
*
* @return $this
*
* @throws LocalizedException
*/
public function authorize( \Magento\Payment\Model\InfoInterface $payment, $amount )
{
return $this;
}
}
6- In this file Test/Testpayment/view/frontend/web/js/view/payment/method-renderer.js register our template or renderer file.
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/renderer-list'
],
function (
Component,
rendererList
) {
'use strict';
rendererList.push(
{
type: 'testpayment',
component: 'Test_Testpayment/js/view/payment/method-renderer/testpayment'
}
);
return Component.extend({});
}
);
7- Create Test/Testpayment/view/frontend/web/js/view/payment/method-renderer/testpayment.js
define(
[
'Magento_Checkout/js/view/payment/default'
],
function (Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Test_Testpayment/payment/testpayment'
}
});
}
);
8- Create template file Test/Testpayment/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>
9- Create Test/Testpayment/view/frontend/layout/checkout_index_index.xml for define payment method at checkout page.
<?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>
<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">Test_Testpayment/js/view/payment/method-renderer</item>
<item name="methods" xsi:type="array">
<item name="testpayment" 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>
Now to install this module execute php bin/magento setup:upgrade command in your root.
Now, You can check your custom payment method at checkout page like as below screen-shot.
Thank’s for reading this article on Magento 2 payment method. Now you will be able to develop customized payment options, from the basic Cash On Delivery method to a more complex and unique, Magento 2 Partial Payment extension.
We hope you have learned something new today. If you have any queries please send us an email at support@webkul.com.