1

test-payment.js

define(
    [
        'uiComponent'
    ],
    function (
        Component,
        rendererList
    ) {
        'use strict';
        rendererList.push(
            {
                type: 'payfort_start',
                component: 'Spacename_Test/js/view/payment/method-renderer/test-payment'
            }
        );
        /** Add view logic here if needed */

        return Component.extend({
            getData: function() {
            return {
                'method': this.item.method,
                'additional_data': {
                    'test1': this.test1(),
                    'test': this.test()
                }
            };
        }
        });
    }
);

method-renderer/test-payment.js

define(
    [
        'jquery'
    ],
    function (Component, $) {
        'use strict';

        return Component.extend({
            defaults: {
                template: 'Spacename_Test/payment/test-form'
            },

            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()
                }
            };
        }
        });
    }
);

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">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>

        <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]">
            <input type="text" name="payment[test1]">
            <div id="payfortCardDetails">
            </div> 


            </fieldset>
        </form>

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



        <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="text: $t('Place Order')"></span>
                </button>
            </div>
        </div>
    </div>
</div>
2

Finally i figured it out how to pass the data to additional

i change the form and add ids for elemenets

  <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">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>

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



        <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="text: $t('Place Order')"></span>
                </button>
            </div>
        </div>
    </div>
</div>

changing the getData i am getting the values now

getData: function() {
            return {
                'method': this.item.method,
                'additional_data': {
                    'test1':  $('#' +this.getCode() +'_test1').val(),
                    'test': $('#' +this.getCode() +'_test').val()
                }
            };
        }
7
  • @PriyaM sorry i don't get what kind of message you want to display? Mar 1 '18 at 6:58
  • Thanks for replay...i want to show text-message under cod payment method
    – Mahi M
    Mar 1 '18 at 7:00
  • @PriyaM you can use instruction that are available in cod payment method configuration. Mar 1 '18 at 7:08
  • i'm not familiar in that.
    – Mahi M
    Mar 1 '18 at 7:09
  • @PriyaM go to admin panel -> store -> configuration -> payment method -> cash on delivery and add your message in instruction. Mar 1 '18 at 7:11

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.