How to Create Custom Payment Method in Magento 2

As we all know there are lots of payment options available by the Magento community. But in some case we need to develop some custom payment methods to meet customer expectations. So, in this article, we'll create a custom payment method in Magento 2. For that, we'll create a custom module to add a custom payment method.

Let's get started!!

To create a custom payment method module you have to follow the simple step which is listed below.

Before we start, we need to create Devhooks folder as a Namespace at app/code/ and create a Module folder CustomPayment at app/code/Devhooks/ location.

Step 1: Create a module.xml file at app/code/Devhooks/CustomPayment/etc/ and paste the below code.

Note: Don't forgot to replace the Devhooks_CustomPayment with your Namespace and Module Name if it's different.

saveCopyzoom_out_map
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="Devhooks_CustomPayment" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Sales"/>
            <module name="Magento_Payment"/>
            <module name="Magento_Checkout"/>
        </sequence>
    </module>
</config>

Our module is depends on other modules. So, we've added it's dependencies under <module> tag in module.xml file. Check above code for your reference.

Step 2: Create registration file registration.php at app/code/Devhooks/CustomPayment/ and paste the below code.

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

Step 3: Create a system.xml at app/code/Devhooks/CustomPayment/etc/adminhtml/ and paste the below code to add Custom Shipping Method configurations.

saveCopyzoom_out_map
<?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>

In Above code we've declared custom payment module options

  • Enabled
  • Title
  • New Order Status
  • Payment from Applicable Countries
  • Payment from Specific Countries
  • Minimum Order Total
  • Maximum Order Total
  • Sort Order

Now, to set default options we need to create config.xml file.

Step 4: Create a default configuration file config.xml at app/code/Devhooks/CustomPayment/etc/ location and paste the below code.

saveCopyzoom_out_map
<?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>Devhooks\CustomPayment\Model\CustomPayment</model>
                <order_status>pending</order_status>
                <title>Custom Payment Method</title>
                <allowspecific>0</allowspecific>
                <group>offline</group>
            </custompayment>
        </payment>
    </default>
</config>

You can change above default values as per your need.

Step 5: Create a model file CustomPayment.php at app/code/Devhooks/CustomPayment/Model/ location and paste the below code.

saveCopyzoom_out_map
<?php

namespace Devhooks\CustomPayment\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;
}

Now we need to create a layout file to define payment method renderer.

Step 6: Create a layout file checkout_index_index.xml at app/code/Devhooks/CustomPayment/view/frontend/layout/ location and paste the below code.

saveCopyzoom_out_map
<?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="pits-offlinepaymentmethods" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Devhooks_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>

As you can see in above code we've define Devhooks_CustomPayment/js/view/payment/method-renderer as a component. So, now we need to create Payment Method Renderer file.

Step 7: Create a method-renderer.js file at app/code/Devhooks/CustomPayment/view/frontend/web/js/view/payment/ location and paste the below code.

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

Step 8: Create a custompayment.js file at app/code/Devhooks/CustomPayment/view/frontend/web/js/view/payment/method-renderer/ location and paste the below code.

saveCopyzoom_out_map
define(
  [
    'Magento_Checkout/js/view/payment/default'
  ],
  function (Component) {
    'use strict';

    return Component.extend({
      defaults: {
        template: 'Devhooks_CustomPayment/payment/customtemplate'
      },
    
      /** Returns send check to info */
      getMailingAddress: function() {
        return window.checkoutConfig.payment.customtemplate.mailingAddress;
      }
    
    });
  }
);

Now, we need to create a template file as we defined above.

Step 9: Create a customtemplate.html file at app/code/Devhooks/CustomPayment/view/frontend/web/template/payment/ location and paste the below code.

saveCopyzoom_out_map
<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>

Step 10: Open Command line in folder root of magento and run the below commands.

saveCopyzoom_out_map
php bin/magento setup:upgrade

php bin/magento cache:clean

Bingo!! we are done all steps.

Now open admin and go to Stores > Configuration > Sales > Payment Methods and You will see your Custom Payment Method like the below screenshot.

How to Create Custom Payment Method in Magento 2

You can change the settings as per your need. Now go to frontend, add product to shopping cart and go to checkout. You'll see your Custom Payment Method like the below screenshot in checkout.

How to Create Custom Payment Method in Magento 2

That's it!!

I hope this article helped you to find what you were looking for.

Bookmark it for your future reference. Do comment below if you have any other questions on that.

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

Review other articles maybe it'll help you too.




Search
Recent Articles
Tags
Newsletter
Copyright © 2022 devhooks.in All rights reserved.
Ads OFF toggle_off
wifi_off