How to create custom payment method in Magento2

 

How to create custom payment method in Magento2 :- Here, I am going to learn that how to create custom payment method and render it to checkout page in magento2.

There are following files which 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- Craete Test/Testpayment/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="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';
}

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 install this module execute php bin/magento setup:upgarde command in your root.

Now, You can check your custom payment method at checkout page like as below screen-shot.

 

Thank’s for read this.If you have any query please comment below.

. . .

Comments (22)

Add Your Comment

  • David Quagraine
    This helped me a lot. Thanks!
    • Webkul Support
      your welcome!!@David Quagraine
  • Ramesh Kr
    getting white screen error on payment page
    • Webkul Support
      Hello Ramesh Kr,
      Please provide us any screen-shot which error are you getting.So that i can check and provide you solution.
      Thanks & Regards
      Shubham Sharma
  • Mohsin
    Great Blog. It is very helpful. I have implemented payment method as per above instruction.

    I am new on Magento 2.

    2 things I want to add below Radio Button on checkout page but how to get?

    1)Textfield Instruction , How to show instruction below Radio Button of custom payment however does not display any text when I type in text-fied of instruction from admin panel?

    2) Billing Address does not show on checkout page.

    Please help me to display above things on checkout page.

    Thanks in Advance…

  • Tiago
    Hi guys, I’v seen this in my chrome console
    http://localhost/magento/rest/default/V1/guest-carts/b703a3b6b37fbf70eb93d3904824df14/payment-information 400 (Bad Request)

    I guess, it’s happening, because the step payment-information is not created yet. Is it the point? Should I create de payment-information? Or its Magento 2 already have this?

    Best Regards
    Tiago

  • Joe Smith
    I followed the steps above. But when I select the Test Payment to check and click Place Order, I get spinning arrow and then it returns me back to the same screen.

    What am I doing wrong here? Should it have taken me to a complete order screen?

    I got this error:

    [2017-02-26 06:33:44] main.INFO: Cache file with merged layout: LAYOUT_frontend_STORE1_2d41d8cd98f00b204e9800998ecf8427e and handles : Please correct the XML data and try again. [] []

    Thanks

    • Nithin H
      Hi,

      Before placing an order, Enable the browser console and check the response, you must be getting the response as 400 bad request, if you are getting this response, then go to
      Test/Testpayment/etc/config.xml

      replace
      authorize

      with
      capture

      It will work 🙂

  • Ricardo Martins
    Very detailed, but I guess part of the approach is outdated, since MagentoPaymentModelMethodAbstractMethod is @deprecated.
  • Golam Faroque
    I have followed all the steps but it doesn’t show anything on admin panel [sales/payment method]. Magento version is 2.1.3.
    • Shubham Sharma
      Open this file Test/Testpayment/etc/adminhtml/system.xml and change the sort order of group.It must be greater then 3
      • Golam Faroque
        Thank you for the quick reply. The payment method is now showing on admin panel but not in frontend.
      • Golam Faroque
        The payment method is showing in the checkout page but the order is not submitting. I have found the message in var/system.log

        [2017-01-05 09:32:00] main.INFO: Cache file with merged layout: LAYOUT_frontend_STORE1_2d41d8cd98f00b204e9800998ecf8427e and handles : Please correct the XML data and try again. [] []

        Am I doing anything wrong. Magento version is 2.1.3.

  • Manish Kumar Waliyan
    Hi, When i follow these steps than the payment method is visible on checkout page but I want to add credit card information on checkout page and process it using Capture and Authorize methods in Model.
    Can you help me how to do this?
    • san
      please share module i am not getting method frontend checkout
  • Divya
    Hi..These instructions helped alot to create the payment method.
    But when i place the new order ,order status is showing as “processing” instead of “pending”.
    How can i change it..?
    • Shubham Sharma
      You can set default order status in following file
      Test/Testpayment/etc/config.xml

      use pending instead of pending_payment

      • Rohit
        Still order status does update in admin grid
      • Max Pronko
        @disqus_HoDxaK9w5M:disqus

        Currently there is a bug in Magento 2.x which does not allow to use config.xml and set proper order status when placing order. You have to use custom InitializeCommand or CaptureCommand to prepare order specific data together with status.

        Hope it helps.

  • Aditya Budi Utomo
    hmmmm how to make redirect payment
    I have been create module and I magento redirect to payment gateway
    but my session checkout invalid
  • css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close