hpp-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>
 */
-->

<!-- ko ifnot: (isPaymentMethodSelectionOnAdyen())-->
    <!-- ko foreach: getAdyenHppPaymentMethods() -->
        <div class="payment-method" data-bind="css: {'_active': (value == $parent.isBrandCodeChecked())}">
            <div class="payment-method-title field choice">

                <input type="radio"
                       name="payment[method]"
                       class="radio"
                       data-bind="attr: {'id': value}, value: value, checked: $parent.isBrandCodeChecked, click: $parent.selectPaymentMethodBrandCode"/>
                <label data-bind="attr: {'for': value}" class="label">

                    <!-- ko if: name.icon -->
                    <img data-bind="attr: {
                                'src': name.icon.url,
                                'width': name.icon.url.width,
                                'height': name.icon.url.height
                                }">
                    <!--/ko-->

                    <span data-bind="text: name.title"></span>
                </label>
            </div>
            <div class="payment-method-content">

                <div class="payment-method-billing-address">
                    <!-- ko foreach: $parents[1].getRegion($parent.getBillingAddressFormName()) -->
                    <!-- ko template: getTemplate() --><!-- /ko -->
                    <!--/ko-->
                </div>

                <form class="form" data-role="adyen-hpp-form" action="#" method="post" data-bind="mageInit: { 'validation':[]}, attr: {id: 'payment_form_' + $parent.getCode() + '_' + value}">
                <fieldset class="fieldset" data-bind='attr: {id: "payment_fieldset_" + $parent.getCode() + "_" + value}'>
                     <!-- ko if: value == 'ideal' -->
                        <label data-bind="attr: {'for': 'issuerId'}" class="label">
                            <span><!-- ko text: $t('Select Your Bank') --><!-- /ko --></span>
                        </label>

                        <select name="payment[issuer_id]" data-bind="
                                options: name.issuers,
                                optionsText: 'name',
                                optionsValue: 'issuerId',
                                value: issuerId,
                                optionsCaption: $t('Choose Your Bank')">
                        </select>
                    <!--/ko-->

                    <!-- ko if: isPaymentMethodOpenInvoiceMethod() -->
                        <!-- ko if: showGender() -->
                            <div class="field gender required">
                                    <label data-bind="attr: {for: getCode() + '_gender_type_' + value}" class="label">
                                        <span><!-- ko text: $t('Gender')--><!-- /ko --></span>
                                    </label>
                                    <div class="control">
                                        <select class="select select-gender-type"
                                                name="payment[gender]"
                                                data-bind="attr: {id: getCode() + '_gender_type_' + value, 'data-container': getCode() + '-gender-type'},
                                                    options: $parent.getGenderTypes(),
                                                    optionsValue: 'key',
                                                    optionsText: 'value',
                                                    optionsCaption: $t('-Please select-'),
                                                    value: gender"
                                                data-validate="{required:true}">
                                        </select>
                                    </div>
                            </div>
                        <!--/ko-->

                        <!-- ko if: showDob() -->
                            <div class="field dob type required">
                                <label data-bind="attr: {for: getCode() + '_dob_' + value}" class="label">
                                    <span><!-- ko text: $t('Date of Birth')--><!-- /ko --></span>
                                </label>
                                <div class="control">
                                    <input type="text" class="input-text"
                                           name="payment[dob]"
                                           data-bind="
                                           attr: {
                                                 id: getCode() + '_dob_' + value,
                                                 title: $t('Date of Birth'),
                                                 'data-container': getCode() + '-dob_'  + value,
                                           },
                                            datepicker: {
                                                storage: datepickerValue,
                                                options: { showOn: 'both', changeYear: true, yearRange: '-99:-1', defaultDate: '-20y' }
                                           },
                                           value: dob"
                                           data-validate="{required:true}"
                                    />
                                </div>
                            </div>
                        <!--/ko-->

                        <!-- ko if: showTelephone() -->
                            <div class="field telephone type required">
                                <label data-bind="attr: {for: getCode() + '_telephone_' + value}" class="label">
                                    <span><!-- ko text: $t('Telephone')--><!-- /ko --></span>
                                </label>
                                <div class="control">
                                    <input type="number" class="input-text"
                                           name="payment[telephone]"
                                           data-bind="
                                               attr: {
                                                    id: getCode() + '_telephone_' + value,
                                                    title: $t('Telephone'),
                                                    'data-container': getCode() + '-telephone_' + value,
                                                    'data-validate': JSON.stringify({'required-number':true})
                                                },
                                                value: telephone"
                                           data-validate="{required:true}"
                                    />
                                </div>
                            </div>
                        <!--/ko-->

                    <!-- ko if: showSsn() -->
                    <div class="field ssn type required">
                        <label data-bind="attr: {for: getCode() + '_ssn_' + value}" class="label">
                            <span><!-- ko text: $t('Personal number (last digits)')--><!-- /ko --></span>
                        </label>
                        <div class="control">
                            <input type="text" class="input-text"
                                   name="payment[ssn]"
                                   data-bind="
                                           attr: {
                                                id: getCode() + '_ssn_' + value,
                                                title: $t('Social Security Number'),
                                                'data-container': getCode() + '-ssn',
                                                'data-validate': JSON.stringify({'required-number':true}),
                                                maxlength : getSsnLength()
                                            },
                                            value: ssn"
                                   data-validate="{required:true}"
                            />
                        </div>
                    </div>
                    <!--/ko-->

                    <!--/ko-->
                </fieldset>
                </form>

                <div class="checkout-agreements-block">
                    <!-- ko foreach: $parents[1].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: $parent.continueToAdyenBrandCode, enable: (value == $parent.isBrandCodeChecked())"
                                disabled>
                            <span data-bind="text: $t('Place Order')"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    <!--/ko-->
<!--/ko-->


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

    <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: isIconEnabled() -->
                    <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>
            <fieldset class="fieldset" data-bind='attr: {id: "payment_form_" + getCode()}'>
                <div class="payment-method-note">
                    <!-- ko text: $t('You will be redirected to the Adyen website.') --><!-- /ko -->
                </div>
            </fieldset>
            <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: continueToAdyen, enable: (getCode() == isChecked())"
                            disabled>
                        <span data-bind="text: $t('Continue to Adyen')"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
<!--/ko-->