A payment gateway is a key to secure E-commerce business. Selecting a payment method that is suitable for your business type deserves proper attention.
A wrong choice is going to be a disaster for your payment system. A customer’s trust and loyalty depend on the payment processing system you offer. For example you want to restrict certain payment methods and make them only visible to admin you can create an payment method such as make a payment visible only to admin in Magento 2.
How a payment gateway should be?
- 100% secure
- Compatible with your store platform
- Offers speedy payment process
- Fraud detection
- Invoicing capabilities
- Impressive UI
- Feasible costs
- Support for international payments
- Support policy
- Types of cards supported
- Support for recurring payments
- Hosted/Non hosted payments
If you are a Magento store owner, you need to filter out the points that must be fulfilled by the payment gateway you use for your business requirements.
However, an ideal payment gateway that fulfills all your requirements exists only in a parallel world. But wait, you can create payment method in Magento 2 on your own! And this post shows you how to do it.
Steps to Create Payment Method in Magento 2:
1. Create registration.php file at app/code/Meetanshi/CustomPayment/registration.php and add the below code to it:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Meetanshi_CustomPayment',
__DIR__
);
2. Create module.xml file at app/code/Meetanshi/CustomPayment/etc/module.xml and add below code to this file:
<?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="Meetanshi_CustomPayment" setup_version="1.0.0">
</module>
</config>
3. Create config.xml file at app/code/Meetanshi/CustomPayment/etc/config.xml and add below code to this file:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Store/etc/config.xsd">
<default>
<payment>
<custompayment>
<payment_action>authorize</payment_action> <!-- You can use another method -->
<model>Meetanshi\CustomPayment\Model\PaymentMethod</model>
<active>1</active>
<title>Custom Payment</title>
<order_status>pending_payment</order_status><!-- set default order status-->
</custompayment>
</payment>
</default>
</config>
4. Create system.xml file at app/code/Meetanshi/CustomPayment/etc/adminhtml/system.xml and add below code to this file:
<?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="custompayment" translate="label" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Custom Payment Method</label>
<field id="active" translate="label comment" sortOrder="10" type="select" showInDefault="1" showInWebsite="1" showInStore="0">
<label>Enable</label>
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
</field>
<field id="title" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Custom Payment</label>
</field>
</group>
</section>
</system>
</config>
5. Create PaymentMethod.php file at app/code/Meetanshi/CustomPayment/Model/PaymentMethod.php add below code to this file:
<?php
namespace Meetanshi\CustomPayment\Model;
/**
* Pay In Store payment method model
*/
class PaymentMethod extends \Magento\Payment\Model\Method\AbstractMethod
{
/**
* Payment code
*
* @var string
*/
protected $_code = 'custompayment';
}
6. Create checkout_index_index.xml file at app/code/Meetanshi/CustomPayment/view/frontend/layout/checkout_index_index.xml and add below code to this file:
<?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="custompayment" xsi:type="array">
<item name="component" xsi:type="string">Meetanshi_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>
7. Create a method-renderer.js file at app/code/Meetanshi/CustomPayment/view/frontend/web/js/view/payment/method-renderer.js and add below code to this file:
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/renderer-list'
],
function (
Component,
rendererList
) {
'use strict';
rendererList.push(
{
type: 'custompayment',
component: 'Meetanshi_CustomPayment/js/view/payment/method-renderer/custompayment'
}
);
return Component.extend({});
}
);
8. Create custompayment.js file at app/code/Meetanshi/CustomPayment/view/frontend/web/js/view/payment/method-renderer/custompayment.js add below code to this file:
define(
[
'Magento_Checkout/js/view/payment/default'
],
function (Component) {
'use strict';
return Component.extend({
defaults: {
template: 'Meetanshi_CustomPayment/payment/customtemplate'
}
});
}
);
9. Create customtemplate.html file at app/code/Meetanshi/CustomPayment/view/frontend/web/template/payment/customtemplate.html and add below code to this file:
<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>
That’s it for creating custom payment methods in Magento 2 store. The extension will create backend settings to enable the payment method and set a title for it.
Once, the payment method is enabled, it can be displayed in the frontend while checking out the products:
If you can find readymade solutions from here for your Magento 2 store, you would never need to visit this post again! Likewise you can get payment related additional information from order in Magento 2 to help you extract and access the payment related details for specific products.
Do share the post with fellow developers via social media.
Thank you.
