Blog

How to create a custom payment module in Magento 2:

 

Here, I am going to learn that how to create a custom payment method and render it to the checkout page in magento2.

 

There are following step need to follow and create some files:

 

1 – Create Briskbraintech/Custompayment/registration.php for register your module.

 

 

 

 

 

 

 

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Briskbraintech_Custompayment',

__DIR__

);

 

 

 

 

 

2- Create Briskbraintech/Custompayment/etc/module.xml for define module name.

 

 

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noTestSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

<module name="Briskbraintech_Custompayment" setup_version="2.0.0" active="true">

</module>

</config>

 

 

3- Create Briskbraintech/Custompayment/etc/config.xml to 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>

<custompayment>

<payment_action>authorize</payment_action><!-- You can use another methor like capture  -->

<model>Briskbraintech\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 Briskbraintech/Custompayment/etc/adminhtml/system.xml for display payment method in the 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="custompayment" translate="label" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1">

<label>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>

 

 

5- Create a model file to define payment method Briskbraintech/Custompayment/Model/PaymentMethod.php

 

 

<?php

 

namespace Briskbraintech\Custompayment\Model;

 

/**

* Pay In Store payment method model

*/

class PaymentMethod extends \Magento\Payment\Model\Method\AbstractMethod

{

 

/**

* Payment code

*

* @var string

*/

protected $_code = 'custompayment';

}

 

 

6- In this file Briskbraintech/Custompayment/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: 'custompayment',

component: 'Briskbraintech_Custompayment/js/view/payment/method-renderer/custompayment'

}

);

return Component.extend({});

}

);

 

 

7- Create Briskbraintech/Custompayment/view/frontend/web/js/view/payment/method-renderer/custompayment.js

 

 

define(

    [

        'Magento_Checkout/js/view/payment/default'

    ],

    function (Component) {

        'use strict';

 

        return Component.extend({

            defaults: {

                template: 'Briskbraintech_Custompayment/payment/custompayment'

            }

        });

    }

);

 

 

 

 

8- Create template file Briskbraintech/Custompayment/view/frontend/web/template/payment/custompayment.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 Briskbraintech/Custompayment/view/frontend/layout/checkout_index_index.xml for define payment method at the 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="custompayment" xsi:type="array">

<item name="component" xsi:type="string">Briskbraintech_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>

 

 

 

 

Now, You need to install this module execute php bin/magento setup:upgarde command in your root.

 

After execute the command, You can check your custom payment method on the checkout page. You will see a new payment method like "Custom Payment".

 

 

If you needed more assistance or development services for custom module development in Magento e-commerce store then you can reach at manish@briskbraintech.com Or Contact us.