0

I have created a custom payment method using knockout js. I want to display a form only for selecting a drop-down value "Add new card". I have created a KO variable and assign the value initially as false and change the value on drop-down change. But it is not working. How can I fix this?

Here is my code.

   define([
        'jquery',
        'Magento_Payment/js/view/payment/cc-form',
        'Magento_Customer/js/model/customer',
        'ko'
    ],
    function ($, Component, customer, ko) {
        'use strict';

        return Component.extend({
            defaults: {
                template: 'Company_Custompay/payment/custompay',
                formDisplay: ko.observable(false),
            },            
            selectedValue : ko.observable(''),           


            context: function() {
                return this;
            },

            getCode: function() {
                return window.checkoutConfig.payment.custompay.code;
            },

            isActive: function() {
                return window.checkoutConfig.payment.custompay.active;
            },
            /**
             * @returns {Boolean}
             */
            isSaveCard: function () {
                return customer.isLoggedIn();
            },

            isFormDisplay: function() {
                return this.formDisplay;
            },

            getStoredCards: function() {
                return  window.checkoutConfig.payment.custompay.storedCards;
            },

            getCardList: function() {
                return _.map(this.getStoredCards(), function(value, key) {
                    return {
                        'value': key,
                        'type': value
                    }
                });
            },
            displayNewForm: function() {
                if (this.selectedValue._latestValue == 'new') {
                    this.formDisplay = true;

                } else {
                    this.formDisplay = false;

                }
            },           

        });
    }
);

html

    <!-- Render the native credit card form. -->
    <!-- ko if: getCardList().length > 0-->
        <select name="payment[p_id]" class="select input-text required-entry" 
                            data-bind="value: selectedValue
                                attr: {id: getCode()+'_payment_profile_id'},
                                options: getCardList(),
                                optionsValue: 'value',
                                optionsText: 'type',
                                optionsCaption: $t('--Please Select--'),event:{ change: displayNewForm()}
                                ">
        </select> 
    <!-- /ko -->​

    <div id="card-form" data-bind="visible:formDisplay">
    <form class="form" data-bind="attr: {'id': getCode() + '-form'}">
        <fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode(), id: 'payment_form_' + getCode()}">
            <!-- ko if: (isShowLegend())-->
            <legend class="legend">
                <span><!-- ko i18n: 'Credit Card Information'--><!-- /ko --></span>
            </legend><br />
            <!-- /ko -->
            <div class="field type">
                <div class="control">
                    <ul class="credit-card-types">
                        <!-- ko foreach: {data: getCcAvailableTypesValues(), as: 'item'} -->
                        <li class="item" data-bind="css: {
                                                         _active: $parent.selectedCardType() == item.value,
                                                         _inactive: $parent.selectedCardType() != null && $parent.selectedCardType() != item.value
                                                         } ">
                            <!--ko if: $parent.getIcons(item.value) -->
                            <img data-bind="attr: {
                                'src': $parent.getIcons(item.value).url,
                                'alt': item.type,
                                'width': $parent.getIcons(item.value).width,
                                'height': $parent.getIcons(item.value).height
                                }">
                            <!--/ko-->
                        </li>
                        <!--/ko-->
                    </ul>
                    <input type="hidden"
                           name="payment[cc_type]"
                           class="input-text"
                           value=""
                           data-bind="attr: {id: getCode() + '_cc_type', 'data-container': getCode() + '-cc-type'},
                           value: creditCardType
                           ">
                </div>
            </div>
            <div class="field number required">
                <label data-bind="attr: {for: getCode() + '_cc_number'}" class="label">
                    <span><!-- ko i18n: 'Credit Card Number'--><!-- /ko --></span>
                </label>
                <div class="control">
                    <input type="number" name="payment[cc_number]" class="input-text" value=""
                           data-bind="attr: {
                                            autocomplete: off,
                                            id: getCode() + '_cc_number',
                                            title: $t('Credit Card Number'),
                                            'data-container': getCode() + '-cc-number',
                                            'data-validate': JSON.stringify({'required-number':true, 'validate-card-type':getCcAvailableTypesValues(), 'validate-card-number':'#' + getCode() + '_cc_type', 'validate-cc-type':'#' + getCode() + '_cc_type'})},
                                      enable: isActive($parents),
                                      value: creditCardNumber,
                                      valueUpdate: 'keyup' "/>
                </div>
            </div>
            <div class="field date required" data-bind="attr: {id: getCode() + '_cc_type_exp_div'}">
                <label data-bind="attr: {for: getCode() + '_expiration'}" class="label">
                    <span><!-- ko i18n: 'Expiration Date'--><!-- /ko --></span>
                </label>
                <div class="control">
                    <div class="fields group group-2">
                        <div class="field no-label month">
                            <div class="control">
                                <select  name="payment[cc_exp_month]"
                                         class="select select-month"
                                         data-bind="attr: {id: getCode() + '_expiration', 'data-container': getCode() + '-cc-month', 'data-validate': JSON.stringify({required:true, 'validate-cc-exp':'#' + getCode() + '_expiration_yr'})},
                                                    enable: isActive($parents),
                                                    options: getCcMonthsValues(),
                                                    optionsValue: 'value',
                                                    optionsText: 'month',
                                                    optionsCaption: $t('Month'),
                                                    value: creditCardExpMonth">
                                </select>
                            </div>
                        </div>
                        <div class="field no-label year">
                            <div class="control">
                                <select name="payment[cc_exp_year]"
                                        class="select select-year"
                                        data-bind="attr: {id: getCode() + '_expiration_yr', 'data-container': getCode() + '-cc-year', 'data-validate': JSON.stringify({required:true})},
                                                   enable: isActive($parents),
                                                   options: getCcYearsValues(),
                                                   optionsValue: 'value',
                                                   optionsText: 'year',
                                                   optionsCaption: $t('Year'),
                                                   value: creditCardExpYear">
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ko if: (hasVerification())-->
            <div class="field cvv required" data-bind="attr: {id: getCode() + '_cc_type_cvv_div'}">
                <label data-bind="attr: {for: getCode() + '_cc_cid'}" class="label">
                    <span><!-- ko i18n: 'Card Verification Number'--><!-- /ko --></span>
                </label>
                <div class="control _with-tooltip">
                    <input type="number"
                           autocomplete="off"
                           class="input-text cvv"
                           name="payment[cc_cid]"
                           value=""
                           data-bind="attr: {id: getCode() + '_cc_cid',
                                title: $t('Card Verification Number'),
                                'data-container': getCode() + '-cc-cvv',
                                'data-validate': JSON.stringify({'required-number':true, 'validate-card-cvv':'#' + getCode() + '_cc_type'})},
                                enable: isActive($parents),
                                value: creditCardVerificationNumber" />
                    <div class="field-tooltip toggle">
                        <span class="field-tooltip-action action-cvv"
                              tabindex="0"
                              data-toggle="dropdown"
                              data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">
                            <span><!-- ko i18n: 'What is this?'--><!-- /ko --></span>
                        </span>
                        <div class="field-tooltip-content"
                             data-target="dropdown"
                             data-bind="html: getCvvImageHtml()"></div>
                    </div>
                </div>
            </div>
            <!-- /ko -->
            <!-- ko if: (isSaveCard())-->
            <div class="field choice">
                <input type="checkbox"
                       name="payment['save_cc']"
                       class="checkbox"
                       data-bind="attr: {'id': getCode() + '_save_cc'}"/>
                <label class="label" data-bind="attr: {'for': getCode() + '_enable_save_cc'}">
                    <span><!-- ko i18n: 'Save for later use.'--><!-- /ko --></span>
                </label>
                <div class="field-tooltip toggle">
                        <span class="field-tooltip-action action-save-cc"
                              tabindex="0"
                              data-toggle="dropdown"
                              data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">
                            <span translate="'What is this?'"></span>
                        </span>
                    <div class="field-tooltip-content"
                         data-target="dropdown"
                         translate="'We store you payment information securely on servers via SSL.'"></div>
                </div>
            </div>
            <!-- /ko -->
        </fieldset>
    </form>
    </div>

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

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.