1

I am trying to add custom fields in magento 2 but it is not working. I am getting

JQMIGRATE: jQuery.browser is deprecated jquery-migrate.js:41:4 console.trace() jquery-migrate.js:43:5 migrateWarn http://localhost/magento221100/pub/static/version1546515844/frontend/Magento/luma/en_US/jquery/jquery-migrate.js:43:5 get http://localhost/magento221100/pub/static/version1546515844/frontend/Magento/luma/en_US/jquery/jquery-migrate.js:58:6 f< http://localhost/magento221100/pub/static/version1546515844/frontend/Magento/luma/en_US/jquery/jquery.ba-hashchange.min.js:9:677 http://localhost/magento221100/pub/static/version1546515844/frontend/Magento/luma/en_US/jquery/jquery.ba-hashchange.min.js:9:389 http://localhost/magento221100/pub/static/version1546515844/frontend/Magento/luma/en_US/jquery/jquery.ba-hashchange.min.js:9:2 TypeError: this.test1 is not a function

Here is my code,

method-renderer.js

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'
                }
            );
            return Component.extend({

                getData: function() {
                return {
                    'method': this.item.method,
                    'additional_data': {
                        'test1':  $('#' +this.getCode() +'_test1').val(),
                        'test': $('#' +this.getCode() +'_test').val()
                    }
                };
            }
            });
        }
    );

method-renderer/tetpayment.js

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

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

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

            isActive: function() {
                return true;
            },

            validate: function() {
                var $form = $('#' + this.getCode() + '-form');
                return $form.validation() && $form.validation('isValid');
            },
            getData: function() 
            {
                return {
                    'method': this.item.method,
                    'additional_data': {
                        'test1': this.test1(),
                        'test': this.test()
                    }
                };
            }


        });
    }
);

testpayment.html

<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="actions-toolbar">
            <form class="form" data-bind="attr: {'id': getCode() + '-form'}">
        <fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode(), id: 'payment_form_' + getCode()}">
            <input type="text" name="payment[test]" data-bind="attr: {'id': getCode()+'_test'}">
            <input type="text" name="payment[test1]" data-bind="attr: {'id': getCode()+'_test1'}">
            <div id="payfortCardDetails">
            </div> 


            </fieldset>
        </form>
            <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>
</div>

Main problem is in js file. Could you please help me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.