Magento Tutorials

How to Add Custom Payment to Magento 2 Checkout

One of the big improvements of Magento 2.x over Magento 1.x is that custom payment methods can be integrated into the checkout. In this tutorial, we will show you how to implement a payment method rendering in Magento 2 checkout.

Step 1: Create the .js component file

To start off, your payment method renderer should act as a UI component that depends on the Magento_Checkout module and extends the default payment method component (default payment method renderer is located in <Magento_Checkout_module_dir>/view/frontend/web/js/view/payment/default.js).

Create the component’s .js file (the payment method renderer) in your custom module directory. It must be stored in the <your_module_dir>/view/frontend/web/js/view/ directory.

The general view of the payment method renderer is the following:

define(
    ['Magento_Checkout / js / view / payment /
        default'
    ],
    function(Component) {
        '
        use strict';
        return Component.extend({
            defaults: {
                template: ' % path to template % '
            },
            // add required logic here
        });
    }
);

For this new payment method to be able to access system config data, it has to implement the \Magento\Checkout\Model\ConfigProviderInterface interface, and the class implementing it must be injected to the composite config provider via DI frontend configuration.

Sample .php file implementing \Magento\Checkout\Model\ConfigProviderInterface:

class MyCustomPaymentConfigProvider implements \Magento\Checkout\Model\ConfigProviderInterface
{
...
    public function getConfig()
    {
        return [
            // 'key' => 'value' pairs of configuration
        ];
    }
...
}

And in case your new payment method requires credit card information, you should use the Magento renderer to implement credit card form (located in <Magento_Payment_module_dir>/view/frontend/web/js/view/payment/cc-form.js).

Step 2: Create the .js component registering the renderer

In your custom module directory, create the .js UI component which registers the payment method renderer in the renderers list. It must be located under the <your_module_dir>/view/frontend/web/js/view/ directory.

The file content is as below:

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

Step 3: Create the template for the payment method component

Create a new <your_module_dir>/view/frontend/web/template/<your_template>.html file in your custom module directory. The template can use Knockout JS syntax.

E.g., the template for rendering the PayPal Express payment method:

https://github.com/magento/magento2/blob/2.4/app/code/Magento/Paypal/view/frontend/web/template/payment/paypal-express.html

Step 4: Declare the payment method in layout

  1. Create a new <your_module_dir>/view/frontend/layout/checkout_index_index.xml file in your custom module directory
  2. Add the following code to that file
<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="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <!-- Declare additional before payment components. START -->
                                                        <item name="beforeMethods" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">beforeMethods</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="%your_feature_name%" xsi:type="array">
                                                                    <item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                        <!-- Declare additional before payment components. END -->
                                                        <!-- Declare the payment method (the component that registrates in the list). START -->
                                                        <item name="renders" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="%group name of the payment methods%" xsi:type="array">
                                                                    <!-- Example of value: Magento_Paypal/view/frontend/web/js/view/payment-->
                                                                    <item name="component" xsi:type="string">%component_that_registers_payment_renderer%</item>
                                                                    <item name="methods" xsi:type="array">

                                                                        <!-- Add this if your payment method requires entering a billing address-->
                                                                        <item name="%payment_method_code%" xsi:type="array">
                                                                            <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                        <!-- Declare the payment method (the component that registrates in the list). END -->

                                                        <!-- Declare additional after payment components. START -->
                                                        <item name="afterMethods" xsi:type="array">
                                                            <item name="component" xsi:type="string">uiComponent</item>
                                                            <item name="displayArea" xsi:type="string">afterMethods</item>
                                                            <item name="children" xsi:type="array">
                                                                <item name="%your_feature_name%" xsi:type="array">
                                                                    <item name="component" xsi:type="string">%path/to/your/feature_js_component%</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                        <!-- Declare additional after payment components. END -->
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

(For production mode only) Step 5 : Run CLI commands

In production mode, you’ll need to run a few more commands like so:

php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy
php bin/magento cache:clean

See also:
How to Customize the Checkout Process in Magento 2
How to Add Discount Code to Checkout in Magento

Is it helpful?

Dom

A knowledge craver who always strive to be wiser everyday.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments