How To Add Custom Payment Method in Magento 2

Posted on 12 June, 2017

If you are like most of the developers, you will have juggled through different websites to find How To Add Custom Payment Method in Magento 2. So, in this technical note, I am going to let you know how to create custom payment method and render it to checkout page in Magento 2.

You need to create separate Extension for that. To Create Custom Payment Method Extension please follow 10 simple steps which are listed below.

Here are following files and folders which will have to create.

Step 1: To register your module you need to create registration.php file at Emipro/Custompayment/registration.php.

1
2
3
4
5
6
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Emipro_Custompayment',
    __DIR__
);             

Step 2: For define your module name you need to craetemodule.xml file at Emipro/Custompayment/etc/module.xml.

1
2
3
4
5
<?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="Emipro_Custompayment" setup_version="2.0.0" active="true">
    </module>
</config>        

Step 3: Create config.xmlfile at Emipro/Custompayment/etc/config.xml for set your Payment Method default YES.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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>Emipro\Custompayment\Model\PaymentMethod</model>
                <active>1</active>
                <title>Emipro Payment</title>
                <order_status>pending_payment</order_status><!-- set default order status-->
            </custompayment>
        </payment>
    </default>
</config>        

Step 4: Display payment method in backend you need to create system.xmlfile at Emipro/Custompayment/etc/adminhtml/system.xml. In this file we mentioned only one field for enable/disable method. You can add field as per your requirements.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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>Emipro 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>    

Step 5: To define payment method you need to create model file PaymentMethod.php at Emipro/Custompayment/Model/PaymentMethod.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
  
namespace Emipro\Custompayment\Model;
  
/**
 * Emipro Custom Payment Method Model
 */
class PaymentMethod extends \Magento\Payment\Model\Method\AbstractMethod
{
  
    /**
     * Payment Method code
     *
     * @var string
     */
    protected $_code = 'custompayment';
}  

Step 6: To register our template or renderer file you need to create method-renderer.js file at Emipro/Custompayment/view/frontend/web/js/view/payment/method-renderer.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/renderer-list'
    ],
    function (
        Component,
        rendererList
    ) {
        'use strict';
        rendererList.push(
            {
                type: 'custompayment',
                component: 'Emipro_Custompayment/js/view/payment/method-renderer/custompayment'
            }
        );
        return Component.extend({});
    }
);
                                

Step 7: Also you need to create custompayment.js file at Emipro/Custompayment/view/frontend/web/js/view/payment/method-renderer/custompayment.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
define(
    [
        'Magento_Checkout/js/view/payment/default'
    ],
    function (Component) {
        'use strict';
  
        return Component.extend({
            defaults: {
                template: 'Emipro_Custompayment/payment/custompayment'
            }
        });
    }
); 

Step 8: Create custompayment.html Template file at Emipro/Custompayment/view/frontend/web/template/payment/custompayment.html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>       

Step 9: Create checkout_index_index.xml file at Emipro/Custompayment/view/frontend/layout/checkout_index_index.xml for display payment method at checkout page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?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">Emipro_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>

Step 10: Active Emipro_Custompayment extension. To active Emipro_Custompayment extension you need to open Command line in folder root of magento and run following commands.

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

php bin/magento cache:clean

For more informations about other Magento 2 Useful Commands List Click Here and read our another technical note.

Bingo! We are Done. Now, You can check your Custom Payment Method at Checkout Page. You we'll see your Custom Payment like below Screen Shot.

Image Credit : google.com

Also we have attached source code zip file with this technical note just for your refrence. So, you can download Source Code by clicking on Download zip button.

We hope this Magento technical note helped you to Add Custom Payment Method in Magento 2. Bookmark it for your future reference. Do comment below if you have any other questions or doubts.

P.S. Do share this note with your team.


Mayank Zalavadia , eCommerce Project Manager
Magento Technical Notes

Post Your Review

X

Your Review has been posted

0 Comment(s)