Schogini is Magento2 ready. Are you?

Get started with Magento 2 | Need expert Magento2 support?

Magento 2: How does the payment module flow work?

Category: Magento2

A quick overview of how a Magento2 payment module flows through the various files, starting from the checkout page. There are many links that give you the code to create a payment module. I will try to explain the order in which the files are checked so that it is easy to debug errors. I am assuming that you are using the default Magento2 checkout.

As mentioned in all tutorials, the biggest advantage in Magento 2 is all the code and related template, JS, CSS files are in one folder. This makes management much easier. Another major change is the use of PHP Namespaces & shifting the core Magento files to the lib/internal/Magento/Framework folder.

1. Vendorname/Modulename/view/frontend/layout/checkoutindexindex.xml file is checked.

This file will give us the path to the JavaScript file, which will render the frontend form for this payment method. Generally, it will look something like this:

Vendorname_Modulename/js/view/payment/<filename with no .js extension>

2. Renderer JS file is checked (Vendorname/Modulename/view/frontend/web/js/view)

This file will extend the base component class to add our payment module to the “rendererList”. The module in this list is what will be displayed during checkout. While pushing our payment module to this list we will mention the path to the JavaScript file, which has the name of the template file which creates our payment form. Generally, it will look something like this:

        type: 'PAYMENT MODULE CODE', // this should be the code you give in your Model file
        component: 'Vendorname_Moudulename/js/view/payment/<filename with no .js extension>'

3. Template defining JS file is checked. (Vendorname/Modulename/view/frontend/web/js/view)

In this file, you can extend and existing payment form (for e.g. MagentoPayment/js/view/payment/cc-form) or create a fresh form by extending (MagentoPayment/js/view/payment/default). Here you give the template file name (without the .html extension). You can also define any additional functions that you would need to use in your template file here. Can look something list this

return Component.extend({
    defaults: {
        template: 'Vendorname_Modulename/payment/<filename with no html extn>'
     getCode: function() {
        return 'firstdataglobalgateway';
    isActive: function() {
        return true;

4. Template file is checked (Vendorname/Modulename/view/frontend/web/template/)

This is the actual HTML file where the form to collect the payment information is stored. Here you can either create your order form or include other order pages. This is the page that the customer will see.

The rest of the calls for authorize, capture etc are exactly the same as the previous versions of Magento.

5. To throw payment errors use this

throw new \Magento\Framework\Exception\LocalizedException(__('Some error message'));


Schogini's customer service extends beyond the natural boundaries. ~ Timothy Johnson

Schogini assures 24x7 - 6 hour turn around ticket response time and 24 hour Email response time (