How to Add a Custom Payment Method to Magento 2 Checkout?

In this article, we will see how to implement a payment method rendering in Magento 2 checkout.

Step 1: Create the .js component file

It is important to note that you will be implementing the payment method renderer as a UI component. You should not overwrite the default Magento code, just add your customizations code in a separate module. 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 as follows:

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

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.

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.

Step 4: Declare the payment method in layout

  • Create a new
    <your_module_dir>/view/frontend/layout/checkout_index_index.xml
    file in your custom module directory.
  • Add the code given below to that file.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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_Authorizenet/js/view/payment/authorizenet-->
                                                               <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>
                                                       <!-- 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>
               </item>
           </argument>
       </arguments>
   </referenceBlock>
</body>
</page>


  • Share :