How to Create a Custom Payment Module in Magento 2: A Step-by-Step Guide

Creating a new payment module for Magento 2 involves multiple steps to ensure it integrates seamlessly with Magento's checkout and payment processes. Here’s a structured guide to help you build a custom payment module:

Step-by-Step Guide to Creating a Custom Payment Module in Magento 2

1. Create the Module Directory Structure
   Create the necessary folders in app/code:

   app
   └── code
       └── VendorName
           └── PaymentModule
               ├── Block
               ├── Controller
               ├── etc
               │   ├── adminhtml
               │   ├── frontend
               │   └── module.xml
               ├── Model
               ├── view
                   ├── adminhtml
                   └── frontend

2. Create module.xml
   In app/code/VendorName/PaymentModule/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="VendorName_PaymentModule" setup_version="1.0.0"/>
   </config>

3. Create registration.php
   In app/code/VendorName/PaymentModule:

   <?php
   use MagentoFrameworkComponentComponentRegistrar;

   ComponentRegistrar::register(
       ComponentRegistrar::MODULE,
       'VendorName_PaymentModule',
       __DIR__
   );

4. Configure Payment Method in etc/config.xml
   Create a config.xml file in app/code/VendorName/PaymentModule/etc:

   <?xml version="1.0"?>
   <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/config.xsd">
       <default>
           <payment>
               <vendorname_paymentmodule>
                   <active>1</active>
                   <title>Custom Payment Method</title>
                   <allowspecific>0</allowspecific>
                   <sort_order>1</sort_order>
                   <model>VendorNamePaymentModuleModelPayment</model>
               </vendorname_paymentmodule>
           </payment>
       </default>
   </config>

5. Create Payment Model Class
   In app/code/VendorName/PaymentModule/Model/Payment.php:

   <?php

   namespace VendorNamePaymentModuleModel;

   use MagentoPaymentModelMethodAbstractMethod;

   class Payment extends AbstractMethod
   {
       protected $_code = 'vendorname_paymentmodule';
   }

6. Create payment.xml
   In app/code/VendorName/PaymentModule/etc/frontend/payment.xml:

   <?xml version="1.0"?>
   <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/payment.xsd">
       <group id="checkout">
           <method name="vendorname_paymentmodule" />
       </group>
   </config>

7. Create View Files
   In app/code/VendorName/PaymentModule/view/frontend/web/template/payment create an HTML template file, e.g., form.html for your payment form:

   <div>
       <h2>Custom Payment Method Form</h2>
       <!-- Add your custom form fields here -->
   </div>

8. Add JavaScript Component
   Create view/frontend/web/js/view/payment/custom-method.js:

   define([
       'uiComponent',
       'Magento_Checkout/js/model/payment/renderer-list'
   ], function (Component, rendererList) {
       'use strict';

       rendererList.push({
           type: 'vendorname_paymentmodule',
           component: 'VendorName_PaymentModule/js/view/payment/custom-method'
       });

       return Component.extend({});
   });

9. Run Commands to Enable the Module
   Run the following commands to enable the module and clear cache:

   php bin/magento module:enable VendorName_PaymentModule
   php bin/magento setup:upgrade
   php bin/magento cache:clean

Summary

This guide sets up a custom payment module that you can enhance by adding specific functionality, such as integration with third-party payment APIs and advanced configurations.