Magento2 Offline Payment Method

In this blog post, we will see how to create a custom offline payment method in Magento2.
Steps to create our custom offline payment method in Magento2:
1) We need to create a Namespace_ModuleName or VendorName_ModuleName like Magetec_Payment.
Location: app/code/Magetec/Payment
2) Next we need to create a registration xml file of our module
Location: app/code/Magetec/Payment/etc/module.xml

<?xml version = “1.0”?>
xsi:noNamespaceSchemaLocation=”urn:magento:framework:Module/etc/module.xsd”>
<module name=”Magetec_Payment” setup_version=”0.0.1″/>
</config>

 

3) Now we need to register our module in magento framework directory
Location: app/code/Magetec/Payment/Registration.php

<?php
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::MODULE,
‘Magetec_Payment’,
__DIR__
);

 

4) Next we need to enable our module in magento environment by two alternative ways
a) Go to “app/etc/config.php” and edit file to add ‘Magetec_Payment’ => 1
OR
a) Go to command shell and run command “php bin/magento module:enable Magetec_Payment” (this will enable our module)
b) Go to command shell and run command “php bin/magento setup:upgrade” (this will register / upgrade our module version in database)
5) Now we will define configuration of our payment method
Location: app/code/Magetec/Payment/etc/config.xml

<?xml version=”1.0″?>
<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../Store/etc/config.xsd”>
    <default>
        <payment>
            <magetecpay>
                <active>1</active>
                <title>Magetec Payment</title>
                <order_status>pending_payment</order_status>
                <instructions>Add comments</instructions>
                <payment_action>true</payment_action>
                <model>Magetec\Payment\Model\PaymentMethod</model>
                <group>offline</group>
            </magetecpay>
        </payment>
    </default>
</config>

 

6) Next we will define the system configuration where admin can configure our custom payment method
Location: app/code/Magetec/Payment/etc/adminhtml/system.xml

<?xml version=”1.0″?>
<config xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”../../../Config/etc/system_file.xsd”>
    <system>
        <section id=”payment“>
            <group id=”magetecpay” translate=”label” type=”text” sortOrder=”100″ showInDefault=”1″ showInWebsite=”1″ showInStore=”1″>
                <label>Payment</label>
                <field id=”active” translate=”label” type=”select” sortOrder=”1″ showInDefault=”1″ showInWebsite=”1″ showInStore=”0″>
                    <label>Enabled</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id=”title” translate=”label” type=”text” sortOrder=”10″ showInDefault=”1″ showInWebsite=”1″ showInStore=”1″>
                    <label>Title</label>
                </field>
                <field id=”order_status” translate=”label” type=”select” sortOrder=”20″ showInDefault=”1″ showInWebsite=”1″ showInStore=”0″>
                    <label>New Order Status</label>
                    <source_model>Magetec\Payment\Model\Config\Source\Order\Status\Pendingpayment</source_model>
                </field>
                <field id=”allowspecific” translate=”label” type=”allowspecific” sortOrder=”40″ showInDefault=”1″ showInWebsite=”1″ showInStore=”0″>
                    <label>Payment from Applicable Countries</label>
                    <source_model>Magento\Payment\Model\Config\Source\Allspecificcountries</source_model>
                </field>
                <field id=”specificcountry” translate=”label” type=”multiselect” sortOrder=”41″ showInDefault=”1″ showInWebsite=”1″ showInStore=”0″>
                    <label>Payment from Specific Countries</label>
                    <source_model>Magento\Directory\Model\Config\Source\Country</source_model>
                    <can_be_empty>1</can_be_empty>
                </field>
                <field id=”instructions” translate=”label” sortOrder=”50″ showInDefault=”1″ showInWebsite=”1″ showInStore=”1″>
                    <label>Instructions</label>
                </field>
                <field id=”sort_order” translate=”label” type=”text” sortOrder=”100″ showInDefault=”1″ showInWebsite=”1″ showInStore=”0″>
                    <label>Sort Order</label>
                    <frontend_class>validate-number</frontend_class>
                </field>
            </group>
        </section>
    </system>
</config>

 

7) Now create our model file which we already defined in config.xml
Location: app/code/Magetec/Payment/Model/PaymentMethod.php

<?php
namespace Magetec\Payment\Model;
class PaymentMethod extends \Magento\Payment\Model\Method\AbstractMethod
{
    /**
     * Payment code
     * @var string
     */
    protected $_code = ‘magetecpay’;
    /**
     * Availability option
     * @var bool
     */
    protected $_isOffline = true;
}

 

8) Next we will create .js file which will be used to register our custom template
Location: app/code/Magetec/Payment/view/frontend/web/js/view/payment/magetecpay.js

define(
    [
        ‘uiComponent’,
        ‘Magento_Checkout/js/model/payment/renderer-list’
    ],
    function (
        Component,
        rendererList
    ) {
        ‘use strict’;
        rendererList.push(
            {
                type: ‘magetecpay’,
                component: ‘Magetec_Payment/js/view/payment/method-renderer/magetecpay-method’
            }
        );
        /** Add view logic here if needed */
        return Component.extend({});
    }
);

 

9) Next we will add our .js renderer file for our custom template registered
Location: app/code/Magetec/Payment/view/frontend/web/js/view/payment/method-renderer/magetecpay-method.js

define(
    [
        ‘Magento_Checkout/js/view/payment/default’
    ],
    function(Component) {
        ‘use strict’;
        return Component.extend({
            defaults: {
                template: ‘Magetec_Payment/payment/magetecpay’
            },
            getMailingAddress: function() {
                return window.checkoutConfig.payment.checkmo.mailingAddress;
            },
        });
    }
);

 

10) Next we will create our checkout payment template file
Location: app/code/Magetec/Payment/view/frontend/web/template/payment/magetecpay.html

11) Next we will create layout file to add our custom payment method to checkout page

Location: app/code/Magetec/Payment/view/frontend/layout/checkout_index_index.xml

<?xml version=”1.0″?>
<page xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” layout=”1column” xsi:noNamespaceSchemaLocation=”../../../../../../../lib/internal/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=”children” xsi:type=”array”>
                                                <item name=”payment” xsi:type=”array”>
                                                    <item name=”children” xsi:type=”array”>
                                                        <item name=”renders” xsi:type=”array”>
                                                            <item name=”children” xsi:type=”array”>
                                                                <item name=”payment-magetecpay” xsi:type=”array”>
                                                                    <item name=”component” xsi:type=”string”>Magetec_Payment/js/view/payment/magetecpay</item>
                                                                    <item name=”methods” xsi:type=”array”>                            <item name=”magetecpay” 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>

 

12) Next we will define our order status source model of our custom payment method
Location: app/code/Magetec/Payment/Model/Config/Source/Order/Status/Pendingpayment.php

<?php
namespace Magetec\Payment\Model\Config\Source\Order\Status;
use Magento\Sales\Model\Order;
use Magento\Sales\Model\Config\Source\Order\Status;
/**
 * Order status source model
 */
class Pendingpayment extends Status
{}

 

Now your module is ready!
Just run the following two commands from root and it will be a working module.
1) php bin/magento setup:upgrade
2) php bin/magento setup:static-content:deploy
That’s it! you have created your custom offline payment method in Magento2.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s