How to add multiple payment method under single payment module in Magento 2

Question

I have been follow webkul blog for adding new payment method its working fine for single payment method now i want to add another payment method under same module, i had make following changes but its not working, below are change list.

1) config.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Store/etc/config.xsd">
<default>
    <payment>
        <testpayment>
            <payment_action>authorize</payment_action><!-- You can use another methor like capture  -->
            <model>Test\Testpayment\Model\PaymentMethod</model>
            <active>1</active>
            <title>Test Payment</title>
            <order_status>pending_payment</order_status><!-- set default order status-->
        </testpayment>
        <test2payment>
            <payment_action>authorize</payment_action><!-- You can use another methor like capture  -->
            <model>Test\Testpayment\Model\PaymentTest2Method</model>
            <active>1</active>
            <title>Test2 Payment</title>
            <order_status>pending_payment</order_status><!-- set default order status-->
        </test2payment>
    </payment>
</default>

2) PaymentTest2Method.php

<?php

     namespace Test\Testpayment\Model;

     use Magento\Payment\Model\CcGenericConfigProvider;

     class PaymentTest2Method extends \Magento\Payment\Model\Method\Cc
     {

        const CODE = 'test2payment';
        protected $_code = self::CODE;
     }

3) method-renderer.js (register my render file )

define(
[
    'uiComponent',
    'Magento_Checkout/js/model/payment/renderer-list'
],
function (
    Component,
    rendererList
) {
    'use strict';
    rendererList.push(
        {
            type: 'testpayment',
            component: 'Test_Testpayment/js/view/payment/method-renderer/testpayment'
        },
        {
            type: 'test2payment',
            component: 'Test_Testpayment/js/view/payment/method-renderer/test2payment'
        }
    );
    return Component.extend({});
}

);

4) Create my test2payment.js file ( under view/frontend/web/js/view/payment/method-renderer/)

define(
[
    'Magento_Checkout/js/view/payment/default'
],
function (Component) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'Test_Testpayment/payment/test2payment'
        },

        getCode: function() {
            return 'test2payment';
        },

        getTest: function(){
          return '1';  
        }

    });
  }
);

5) create my template file test2payment.html ( view/frontend/web/template/payment/)

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
<div class="payment-method-title field choice">
    <input type="radio"
           name="payment[method]"
           class="radio"
           data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
    <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
</div>
<div class="payment-method-content">
    <div class="payment-method-billing-address">
        <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>

    <div class="checkout-agreements-block">
        <!-- ko foreach: $parent.getRegion('before-place-order') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
    </div>

    <!-- ko if: (getTest() == 1)-->
        <span><!-- ko i18n: getTest() --><!-- /ko --></span>
    <!-- /ko -->

    <div class="actions-toolbar">
        <div class="primary">
            <button class="action primary checkout"
                    type="submit"
                    data-bind="
                    click: placeOrder,
                    attr: {title: $t('Place Order')},
                    css: {disabled: !isPlaceOrderActionAllowed()},
                    enable: (getCode() == isChecked())
                    "
                    disabled>
                <span data-bind="i18n: 'Place Order'"></span>
            </button>
        </div>
    </div>
</div>

6) Add my payment method in checkout_index_index.xml

<?xml version="1.0"?>
   <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">
                                                    <item name="renders" xsi:type="array">
                                                        <!-- merge payment method renders here -->
                                                        <item name="children" xsi:type="array">
                                                            <item name="testpayment" xsi:type="array">
                                                                <item name="component" xsi:type="string">Test_Testpayment/js/view/payment/method-renderer</item>
                                                                <item name="methods" xsi:type="array">
                                                                    <item name="testpayment" xsi:type="array">
                                                                        <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
                                                                    </item>
                                                                    <item name="test2payment" xsi:type="array">
                                                                        <item name="isBillingAddressRequired" xsi:type="boolean">true</item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                              </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>
</page>

I have found that my test2payment.js file is not able to registered , and methos not display on checkout page payment method section.

If any one have idea how i can add multiple payment method under same payment module ? what i have been missing or making mistake.

Thanks

Answer 1

I have found issue.

Make change in model file as per below.

PaymentTest2Method.php

<?php

 namespace Test\Testpayment\Model;

 use Magento\Payment\Model\CcGenericConfigProvider;

 class PaymentTest2Method extends \Magento\Payment\Model\Method\AbstractMethod
 {

    protected $_code = 'test2payment';
 }

Both payment method will display on checkout page.