Creating a new offline payment method module in magento 2

-
As, we know that magento 2 supports a wide variety of payment method including--
  • Online payment
  • Cash on delivery
  • Paypal payment Solution
  • Amazon pay
  • Card payment
  • Braintree payment solution
  • Cheque and Money Order
If you wish to add any other offline payment method along with these existing one then you are at right place.


Store view




     Today i am going to show you how to create module which enables us to choose  a custom offline payment method at checkout page in magento 2.

Follow these steps in order to achieve this-

1. Create a new folder under app/code/Excellence/OfflinePaymentMethods

     Here Excellence is namespace and OfflinePaymentMethods is module name.

2. Create registration.php file under app/code/Excellence/OfflinePaymentMethods with following          content

registration.php

 <?php  
 \Magento\Framework\Component\ComponentRegistrar::register(  
 \Magento\Framework\Component\ComponentRegistrar::MODULE,  
 'Excellence_OfflinePaymentMethods',  
 __DIR__  
 );


3. Create module.xml file under app/code/Excellence/OfflinePaymentMethods/etc/

 module.xml

 <?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="Excellence_OfflinePaymentMethods" setup_version="0.1.0">  
           <sequence>  
                <module name="Magento_Store"/>  
                <module name="Magento_Catalog"/>  
           </sequence>  
      </module>  
 </config>


4.  Create system.xml file under app/code/Excellence/OfflinePaymentMethods/etc/adminhtml/

 system.xml

 <?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" translate="label" type="text" sortOrder="400" showInDefault="1" showInWebsite="1" showInStore="1">  
                <group id="custompayment" translate="label" type="text" sortOrder="101" showInDefault="1" showInWebsite="1" showInStore="1">  
                     <label>Custom Payment</label>  
                     <field id="active" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="0" canRestore="1">  
                          <label>Enabled</label>  
                          <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>  
                     </field>  
                     <field id="order_status" translate="label" type="select" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="0" canRestore="1">  
                          <label>New Order Status</label>  
                          <source_model>Magento\Sales\Model\Config\Source\Order\Status\NewStatus</source_model>  
                     </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>  
                     <field id="title" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1" canRestore="1">  
                          <label>Title</label>  
                     </field>  
                     <field id="allowspecific" translate="label" type="allowspecific" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="0" canRestore="1">  
                          <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="51" 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="min_order_total" translate="label" type="text" sortOrder="98" showInDefault="1" showInWebsite="1" showInStore="0">  
                          <label>Minimum Order Total</label>  
                     </field>  
                     <field id="max_order_total" translate="label" type="text" sortOrder="99" showInDefault="1" showInWebsite="1" showInStore="0">  
                          <label>Maximum Order Total</label>  
                     </field>  
                     <field id="model"></field>  
                </group>  
           </section>  
      </system>  
 </config>



5.  Create config.xml file under app/code/Excellence/OfflinePaymentMethods/etc/

  config.xml

 <?xml version="1.0"?>  
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
 xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">  
      <default>  
           <payment>  
                <custompayment>  
                     <active>1</active>  
                     <model>Excellence\OfflinePaymentMethods\Model\CustomPayment</model>  
                     <order_status>pending</order_status>  
                     <title>Excellence Custom Payment Method</title>  
                     <allowspecific>0</allowspecific>  
                     <group>offline</group>  
                </custompayment>  
           </payment>  
      </default>  
 </config>


6. Create payment.xml file under app/code/Excellence/OfflinePaymentMethods/etc/

 payment.xml

 <?xml version="1.0"?>  
 <payment xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
 xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Payment:etc/payment.xsd">  
      <groups>  
           <group id="offline">  
                <label>Offline Payment Methods</label>  
           </group>  
      </groups>  
      <methods>  
           <method name="custompayment">  
           <allow_multiple_address>1</allow_multiple_address>  
           </method>  
      </methods>  
 </payment>


7. Create CustomPayment.php file under app/code/Excellence/OfflinePaymentMethods/Model/

  CustomPayment.php

 
 <?php  
 namespace Excellence\OfflinePaymentMethods\Model;  
 class CustomPayment extends \Magento\Payment\Model\Method\AbstractMethod  
 {  
      const PAYMENT_METHOD_CUSTOM_INVOICE_CODE = 'custompayment';  
      /**  
      * Payment method code  
      *  
      * @var string  
      */  
      protected $_code = self::PAYMENT_METHOD_CUSTOM_INVOICE_CODE;  
 }


8. Create checkout_index_index.xml file under
app/code/Excellence/OfflinePaymentMethods/view/frontend/layout/checkout_index_index.xml

checkout_index_index.xml

 <?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="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="excellence-offlinepaymentmethods" xsi:type="array">  
                                                                                 <item name="component" xsi:type="string">  
                                                                                      Excellence_OfflinePaymentMethods/js/view/payment/offline-payment  
                                                                                 </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>


9. Create custompayment-method.js file under app/code/Excellence/OfflinePaymentMethods/view/frontend/web/js/view/payment/method-renderer/

custompayment-method.js


 define(  
      [  
      'Magento_Checkout/js/view/payment/default'  
      ],  
           function (Component) {  
           'use strict';  
           return Component.extend({  
                defaults: {  
                template: 'Excellence_OfflinePaymentMethods/payment/custompayment'  
                },  
                /** Returns send check to info */  
                getMailingAddress: function() {  
                return window.checkoutConfig.payment.custompayment.mailingAddress;  
           },  
           /** Returns payable to info */  
           /*getPayableTo: function() {  
           return window.checkoutConfig.payment.checkmo.payableTo;  
           }*/  
           });  
      }  
 );



10. Create file under offline-payment.js app/code/Excellence/OfflinePaymentMethods/view/frontend/web/js/view/payment/

 offline-payment.js

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


11. Create custompayment.html  file under app/code/Excellence/OfflinePaymentMethods/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">  
      <!-- 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>


Here you can find my git repo for sample code https://github.com/gauravnewton/Excellence_OfflinePaymentMethods ( at the time of blog creation code reside on dev branch may be available in master in future)

Custom online payment like UPI and other will be posted in future post.

Here is the screen shot of checkout page-






Location: C-86 B, 2nd Floor, C Block, Sector 8, Noida, Uttar Pradesh 201301, India

Comments

Post a Comment

Popular posts from this blog

Jasper report integration in Spring boot/Spring MVC.

-
Image
Hi folks,                   Here we came up with another interesting poc, which is the necessity of almost every project when its come to reporting. Jasper reporting is one of the powerful and secure reporting tool available in market.                 In this blog post we are leveraging the power of it to generate a pdf/html report with dynamic data populated by the backend and making the generated report as a downloadable form on the client.  Before we deep dive into coding part, let me set up the context of POC application.  We are creating a Spring Boot starter web project with dependency of jasper and jstl.  We are using a few UI cdn libraries to render UI and make backend call from UI.  Then after we will hit rest API from UI and get downloadable report into browser/client. Here are the pom dependencies. Pom.xml <?xml version="1.0" encoding="UTF-8"?...
Read more

FireBase Crud operation in Spring Boot

-
Image
                       Hello Geeks, hope you are healthy and doing well in this tough time. In this particular blog post, I am going to share the simple way in which you can connect to Google's firebase real-time database. Of course, we will use some of the basic dependencies to connect our spring boot to firebase. I am going to use maven based configuration. Here, I am sharing a sample spring boot application with simple crud operation on firebase real-time DB. So, first of all, initialize our application from the  spring initializer  and extract, import the downloaded project into your favorite IDE. Dependencies I am adding here : Spring boot starter web Spring firebase admin Here is my pom.xml. <?xml version="1.0" encoding="UTF-8"?> <project xmlns= "http://maven.apache.org/POM/4.0.0" xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation= "http://m...
Read more

Xero Developer account setup with REST API auth flow.

-
Image
 Hi folks,     Welcome to my new blog post. Recently I was working on one of the accounting management third-party vendors named XERO with rest integration.  Below is a statement about Xero from their official website.  We help small businesses thrive worldwide  Xero’s online accounting software connects small business owners with their numbers, their bank, and advisors anytime. Let's get started with setting up our developer account first. We need to create one account at  https://developer.xero.com/ . You can start your 30 days free trial account in just minutes by providing some of the basic details. there is some capping on the number of connections and number of requests in the trial account. After signing up verify your account and set a login password, better to add 2-step authentication as well. Creating app under developer account. Once you successfully log in, you need to create your app under my apps. While creating a new app you n...
Read more