How to create a new offline payment method in magento 2

Now a day’s payment method becomes common to use online payment gateway such as PayPal or Braintree. Here are some examples which help you to create a new offline payment method in magento 2

The following examples are:

  • Create xml file in
app/code/local/[name_space]/[your_module]/etc/adminhtmlCreate xml file in app/code/local/[name_space]/[your_module]/etc
  • Create xml file in app/code/local/[name_space]/[your_module]/etc
  • Create php file in app/code/local/[name_space]/[your_module]/etc
  • Create php file in
  • Create layout:create file checkout_index_index_xml file in app/code/local/[name_space]/[your_module]/view/ frontend/layout
  • Create js file in app/code/local/[name_space]/[your_module]/view/web/js/frontend/payment
  • Creat new payment-method.js file in app/code/local/[name_space]/[your_module]/view/web/js/frontend/payment/method-renderrer
  • Create template in new payment.html file in
app/code/local/[name_space]/[your_module]/view/web/frontend/paymet

Step 1:

To Create system.xml file in

app/code/local/[name_space]/[your_module]/etc/adminhtml
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">

<system>

     <section id="payment">

         <group id="newpayment" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">

             <label>Newpayment</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>[name_space]\[your_module]\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>

Step 2:

To Create config.xml file in 

app/code/local/[name_space]/[your_module]/etc
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Store/etc/config.xsd">

<default>

     <payment>

         <newpayment>

             <active>1</active>

             <title>Newpayment</title>

             <order_status>pending_payment</order_status>

             <instructions>Instruction.</instructions>

             <payment_action>true</payment_action>

             <model>[name_space]\[your_module]\Model\Newpayment</model>

             <group>offline</group>

         </newpayment>

     </payment>

</default>

</config>

 Step 3:

To Create payment.xml file in

app/code/local/[name_space]/[your_module]/etc
<payment xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

      xsi:noNamespaceSchemaLocation="../../../Magento/Payment/etc/payment.xsd">

<groups>

     <group id="offline">

         <label>Offline Payment Methods</label>

     </group>

</groups>

<methods>

     <method name="newpayment">

         <allow_multiple_address>1</allow_multiple_address>

     </method>

   </methods>

</payment>

 Step 4:

To Create newpayment.php file in app/code/local/[name_space]/[your_module]/etc

<?php

namespace [name_space]\[your_module]\Model;

/**

 * Pay In Store payment method model

 */

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

{

/**

* Payment code

*

* @var string

*/

protected $_code = 'newpayment';

/**

* Availability option

*

* @var bool

*/

protected $_isOffline = true;

}

 Step 5:

To create pendingpayment.php file in

<?php

namespace [name_space]\[your_module]\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

{

/**

* @var string[]

*/

protected $_stateStatuses = [Order::STATE_PENDING_PAYMENT];

}

Step 6:

To Create layout: create file checkout_index_index_xml  file in

app/code/local/[name_space]/[your_module]/view/ frontend/layout
<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">

                                                         <!-- merge payment method renders here -->

                                                         <item name="children" xsi:type="array">

                                                             <item name="newpayment-payments" xsi:type="array">

                                                                 <item name="component" xsi:type="string">[name_space]_[your_module]/js/view/payment/newpayment</item>

                                                                 <item name="methods" xsi:type="array">

                                                             

      <item name="newpayment" 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 7:

To Create newpayment.js file in app/code/loca

define(

[

     'uiComponent',

     'Magento_Checkout/js/model/payment/renderer-list'

],

function (

     Component,

     rendererList

) {

     'use strict';

     rendererList.push(

         {

             type: 'newpayment',

             component: '[name_space]_[your_module]/js/view/payment/method-renderer/newpayment-method'

         }

     );

     /** Add view logic here if needed */

     return Component.extend({});

}

);
l/[name_space]/[your_module]/view/web/js/frontend/payment

Step 8:

To Create new payment-method.js file in

app/code/local/[name_space]/[your_module]/view/web/js/frontend/payment/method-renderrer
define(

[

     'Magento_Checkout/js/view/payment/default'

],

function (Component) {

     'use strict';

return Component.extend({

         defaults: {

             template: '[name_space]_[your_module]/payment/newpayment'

         },/** Returns send check to info */

         getMailingAddress: function() {

        return window.checkoutConfig.payment.checkmo.mailingAddress;

         },

  });

}

);

 Step 9:

To Create template in new payment.html file in

app/code/local/[name_space]/[your_module]/view/web/frontend/
payment
<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>

I hope the above mentioned steps help you to create a new offline payment method in magento 2.

 

Last Update: April 9, 2018  

February 5, 2018   122   Nandini R    Payment    
Total 1 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Google+
http://www.webnexs.com/blog/kb/create-new-offline-payment-method-magento-2
Twitter
LinkedIn