cc-form.html

<!--
/**
 *                       ######
 *                       ######
 * ############    ####( ######  #####. ######  ############   ############
 * #############  #####( ######  #####. ######  #############  #############
 *        ######  #####( ######  #####. ######  #####  ######  #####  ######
 * ###### ######  #####( ######  #####. ######  #####  #####   #####  ######
 * ###### ######  #####( ######  #####. ######  #####          #####  ######
 * #############  #############  #############  #############  #####  ######
 *  ############   ############  #############   ############  #####  ######
 *                                      ######
 *                               #############
 *                               ############
 *
 * Adyen Payment module (https://www.adyen.com/)
 *
 * Copyright (c) 2015 Adyen BV (https://www.adyen.com/)
 * See LICENSE.txt for license details.
 *
 * Author: Adyen <magento@adyen.com>
 */
-->
<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">

            <!-- ko if: showLogo() -->
            <div data-bind="attr: { 'class': 'adyen-sprite ' + getCode() }"></div>
            <!--/ko-->

            <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>


        <form class="form" id="adyen-cc-form" data-role="adyen-cc-form" action="#" method="post" data-bind="mageInit: {
            'transparent':{
                'context': context(),
                'controller': getControllerName(),
                'orderSaveUrl':getPlaceOrderUrl(),
            }, 'validation':[]}">


            <!-- ko foreach: getRegion('messages') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->


            <fieldset
                    data-bind="attr: {class: 'fieldset payment items ccard ' + getCode(), id: 'payment_form_' + getCode()}">
                <!-- ko if: (isShowLegend())-->
                <legend class="legend">
                    <span><!-- ko text: $t('Credit Card Information')--><!-- /ko --></span>
                </legend>
                <br/>
                <!-- /ko -->

                <div class="field holdername type">
                    <label data-bind="attr: {for: 'creditCardHolderName'}" class="label">
                        <span><!-- ko text: $t('Credit Card Owner')--><!-- /ko --></span>
                    </label>
                    <div class="control">
                        <input type="text"
                               class="input-text required-entry"
                               data-encrypted-name="holderName"
                               value=""
                               data-bind="attr: {
                                                id: 'creditCardHolderName',
                                                title: $t('Credit Card Owner'),
                                                placeholder: $t('Credit Card Owner'),
                                                'data-container': getCode() + '-cc-owner'
                                                },
                                            enable: isActive($parents),
                                            value: creditCardOwner,
                                            valueUpdate: 'keyup' "
                               data-validate="{required:true}"
                        />
                    </div>
                </div>

                <div class="field type">
                    <label data-bind="attr: {for: getCode() + '_cc_type'}" class="label">
                        <span><!-- ko text: $t('Credit Card Type')--><!-- /ko --></span>
                    </label>
                    <div class="control">
                        <ul class="credit-card-types">
                            <!-- ko foreach: {data: getCcAvailableTypesValues(), as: 'item'} -->
                            <li class="item" data-bind="css: {_active: $parent.creditCardType() == 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>
                        <p class="helper-text" data-bind="css: {hidden: creditCardType() !== ''} "><!-- ko text: $t('(Please provide a card with the type from the list above)')--><!-- /ko --></p>
                        <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 cardContainerField">
                    <div afterRender="renderSecureFields()" data-bind="attr: { id: 'cardContainer'}" ></div>
                </div>




                <!-- ko if: (hasInstallments())-->

                <div class="field required"
                     data-bind="attr: {id: getCode() + '_installments_div'}, visible: getInstallments().length > 0">
                    <label data-bind="attr: {for: getCode() + '_installments'}" class="label">
                        <span><!-- ko text: $t('Installments')--><!-- /ko --></span>
                    </label>
                    <div class="control">

                        <select  class="select"
                                 name="payment[number_of_installments]"
                                 data-bind="attr: {id: getCode() + '_installments', 'data-container': getCode() + '-installments', 'data-validate': JSON.stringify({required:false})},

                                        enable: isActive($parents),
                                        options: getInstallments,
                                        optionsValue: 'value',
                                        optionsText: 'key',
                                        optionsCaption: $t('Do not use Installments'),
                                        value: installment"
                                data-validate="{required:true}">
                        </select>
                    </div>
                </div>


                <!-- /ko -->


                <!-- ko if: (canCreateBillingAgreement())-->

                <div class="field choice">
                    <input type="checkbox"
                           name="payment[store_cc]"
                           autocomplete="off"
                           class="checkbox"
                           data-bind="attr: {title: $t('Remember Me')}, checked: setStoreCc"
                    />
                    <label data-bind="attr: {for: getCode() + '_remember_details'}" class="label">
                        <span><!-- ko text: $t('Remember these details')--><!-- /ko --></span>
                    </label>
                </div>

                <!-- /ko -->


                <input type="hidden"
                       name="payment[generationtime]"
                       class="input-text"
                       value=""
                       data-encrypted-name="generationtime"
                       data-bind="attr: {id: getCode() + '_generationtime', 'data-container': getCode() + '-generationtime'},
                           value: getGenerationTime()"
                />
            </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')},
                        enable: isButtonActive()"
                        disabled>
                    <span data-bind="text: $t('Place Order')"></span>
                </button>
            </div>
        </div>
    </div>
</div>