In this dev doc article, we will learn how to create Magento 2 Payment Method Development 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: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 [email protected]. You may also check our quality Magento 2 Extensions.
Thanks for the tutorial. You have updated your tutorial but you extended the deprecated class \Magento\Payment\Model\Method\AbstractMethod. What class should we extend that won’t be deprecated? And what will be the difference?
Also, I want to ask you, how to add the description of the payment method and insert it from the backend (database)? So, it will be the payment method name and the payment description text below. For example like this:
Test Payment
You will be taken to the payment page after clicking the button “Place Order”.