<!--
/**
* ######
* ######
* ############ ####( ###### #####. ###### ############ ############
* ############# #####( ###### #####. ###### ############# #############
* ###### #####( ###### #####. ###### ##### ###### ##### ######
* ###### ###### #####( ###### #####. ###### ##### ##### ##### ######
* ###### ###### #####( ###### #####. ###### ##### ##### ######
* ############# ############# ############# ############# ##### ######
* ############ ############ ############# ############ ##### ######
* ######
* #############
* ############
*
* 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>
<fieldset class="fieldset" data-bind='attr: {id: "payment_form_" + $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_type type required">
<label data-bind="attr: {for: getCode() + '_gender_type'}" 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', 'data-container': getCode() + '-gender-type', 'data-validate': JSON.stringify({required:true})},
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 required">
<label data-bind="attr: {for: getCode() + '_dob'}" 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="
datepicker: { storage: datepickerValue, options: { showOn: 'both', changeYear: true, yearRange: '-99:-1', defaultDate: '-20y' } },
attr: {
title: $t('Date of Birth'),
'data-container': getCode() + '-dob',
'data-validate': JSON.stringify({'required':true })
},
value: dob"
/>
</div>
</div>
<!--/ko-->
<!-- ko if: showTelephone() -->
<div class="field required">
<label data-bind="attr: {for: getCode() + '_telephone'}" 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',
title: $t('Telephone'),
'data-container': getCode() + '-telephone',
'data-validate': JSON.stringify({'required-number':true })
},
value: telephone"
/>
</div>
</div>
<!--/ko-->
<!-- ko if: showSsn() -->
<div class="field required">
<label data-bind="attr: {for: getCode() + '_ssn'}" 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',
title: $t('Social Security Number'),
'data-container': getCode() + '-ssn',
'data-validate': JSON.stringify({'required-number':true }),
maxlength : getSsnLength()
},
value: ssn"
/>
</div>
</div>
<!--/ko-->
<!--/ko-->
</fieldset>
<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-->
<input type="hidden" name="payment[dfValue]" data-bind="attr: { id: 'dfValue', value: dfValue }" />
<!-- 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-->