How to create Payment method

Before moving forward, we have to create a basic module, However, if you already know how to create a basic module and enable it, you can skip the initial steps.

We will create module under namespace of CWM (Coffeewithmagento).

First of all, we will register our module. For this, we will create registration.php file.

Path : app/code/CWM/CustomPayment/registration.php

Another file, we need to create is module.xml

Path : app/code/CWM/CustomPayment/etc/module.xml

Now, we will enable module using command line.

bin/magento module:enable CWM_CustomPayment -c

Payment method

If you go and check Magento’s default payment methods, you will find payment method title, enable/disable, new order status when order placed using this payment method, in which countries your payment method allows to use etc.

All payment methods are defined under Stores -> Configuration -> Sales -> Payment Methods. Therefore, we will also create the same configuration.

To achieve above, we need to system.xml file under module.

Step 1 : system.xml

Path : app/code/CWM/CustomPayment/etc/adminhtml/system.xml

Step 2: config.xml

Why config.xml? A question in mind, let’s clear it. config.xml will declare default values of our system.xml file fields and default options. Don’t get it, don’t worry you will get it at end of this.

An eagle eye, notice that we have used <model> which is used for integration with Sales and Checkout modules.
You can read more about it at

Path : app/code/CWM/CustomPayment/etc/config.xml

Step 3 : payment.xml

Now, we will create payment.xml. What is the use of it?
We have two types of payment methods,

1) Offline

2) Online.

Inside payment.xml, we will define weather payment method is offline or online, multiple address allow with checkout, credit cards support it or not etc etc.

Path : app/code/CWM/CustomPayment/etc/payment.xml

Step 5: CustomPayment.php

Path : app/code/CWM/CustomPayment/Model/Payment/CustomPayment.php

Our admin area work is done, now we will create files for frontend.

We all know that payment methods will render (display) on the checkout page. Therefore, we will use a layout XML file to render it.

Step 6: checkout_index_index.xml

Path : app/code/CWM/CustomPayment/view/frontend/layout/checkout_index_index.xml

In this file we will define, payment method’s render component.

Step 7 : custompayment.js

In this file, we have to declare renderer component which will used to display.

Path : app/code/CWM/CustomPayment/view/frontend/web/js/view/payment/custompayment.js

Step 8: custompayment-method-component.js

However, we used js files till now, but in this file , define html file which can use methods this js file and it’s above.

Path: app/code/CWM/CustomPayment/view/frontend/web/js/view/payment/method-renderer/custompayment-method-component.js

Step 9: custompayment.html

Path: app/code/CWM/CustomPayment/view/frontend/web/template/payment/custompayment.html

All coding is done now, need to run deployment commands and check your custom payment method.

commands : bin/magento s:s:d && bin/magento c:f

If like efforts, Please share, comment and subscribe for future posts and inspire more.

Leave a Reply