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.

| improve this question | | | | |

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.