Skip to content

A
Adyen Magento2

We will be off from 27/1 (Monday) to 31/1 (Friday) (GMT +7) for our Tet Holiday (Lunar New Year) in our country

Commit da16e0dc authored by Per's avatar Per Committed by GitHub
Browse files
Options

Moving submit buttons inside payment forms 

Pressing the enter key while inside a text field in one the Adyen forms caused the checkout page to reload instead of being submitted.
Co-authored-by: default avatarPer <per@oddny.se>
parent 49182d85
Hide whitespace changes
Inline Side-by-side
Showing with 285 additions and 281 deletions
view/frontend/web/template/payment/boleto-form.html
View file @ da16e0dc
...@@ -142,27 +142,29 @@ ...@@ -142,27 +142,29 @@
</div> </div>
</fieldset> </fieldset>
</form>
<div class="checkout-agreements-block"> <div class="checkout-agreements-block">
<!-- ko foreach: $parent.getRegion('before-place-order') --> <!-- ko foreach: $parent.getRegion('before-place-order') -->
<!-- ko template: getTemplate() --><!-- /ko --> <!-- ko template: getTemplate() --><!-- /ko -->
<!--/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: (getCode() == isChecked()),
css: {disabled: !isPlaceOrderActionAllowed()}
"
disabled>
<span data-bind="text: $t('Place Order')"></span>
</button>
</div> </div>
</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: (getCode() == isChecked()),
css: {disabled: !isPlaceOrderActionAllowed()}
"
disabled>
<span data-bind="text: $t('Place Order')"></span>
</button>
</div>
</div>
</form>
</div> </div>
</div> </div>
view/frontend/web/template/payment/cc-form.html
View file @ da16e0dc
...@@ -142,27 +142,26 @@ ...@@ -142,27 +142,26 @@
<!-- /ko --> <!-- /ko -->
</fieldset> </fieldset>
</form>
<div class="checkout-agreements-block">
<!-- ko foreach: $parent.getRegion('before-place-order') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</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="actions-toolbar">
<div class="primary"> <div class="primary">
<button class="action primary checkout" <button class="action primary checkout"
type="submit" type="submit"
data-bind="click: placeOrder, data-bind="click: placeOrder,
attr: {title: $t('Place Order')}, attr: {title: $t('Place Order')},
enable: isButtonActive()" enable: isButtonActive()"
disabled> disabled>
<span data-bind="text: $t('Place Order')"></span> <span data-bind="text: $t('Place Order')"></span>
</button> </button>
</div>
</div> </div>
</div> </form>
</div> </div>
</div> </div>
view/frontend/web/template/payment/hpp-form.html
View file @ da16e0dc
...@@ -52,69 +52,157 @@ ...@@ -52,69 +52,157 @@
</div> </div>
<form class="form" data-role="adyen-hpp-form" action="#" method="post" data-bind="mageInit: { 'validation':[]}, attr: {id: 'payment_form_' + $parent.getCode() + '_' + value}"> <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}'> <fieldset class="fieldset" data-bind='attr: {id: "payment_fieldset_" + $parent.getCode() + "_" + value}'>
<!-- ko if: hasIssuersAvailable() --> <!-- ko if: hasIssuersAvailable() -->
<!-- ko if: isIdeal() --> <!-- ko if: isIdeal() -->
<div class="checkout-component-dock" afterRender="renderIdealComponent()" data-bind="attr: { id: 'iDealContainer'}"></div> <div class="checkout-component-dock" afterRender="renderIdealComponent()" data-bind="attr: { id: 'iDealContainer'}"></div>
<!--/ko--> <!--/ko-->
<!-- ko ifnot: isIdeal() --> <!-- ko ifnot: isIdeal() -->
<label data-bind="attr: {'for': 'issuerId'}" class="label"> <label data-bind="attr: {'for': 'issuerId'}" class="label">
<span><!-- ko text: $t('Select Your Bank') --><!-- /ko --></span> <span><!-- ko text: $t('Select Your Bank') --><!-- /ko --></span>
</label> </label>
<div class="field"> <div class="field">
<select name="payment[issuer_id]" data-bind=" <select name="payment[issuer_id]" data-bind="
options: getIssuers(), options: getIssuers(),
optionsText: 'name', optionsText: 'name',
optionsValue: 'id', optionsValue: 'id',
value: issuer, value: issuer,
optionsCaption: $t('Choose Your Bank')"> optionsCaption: $t('Choose Your Bank')">
</select> </select>
</div> </div>
<!--/ko-->
<!--/ko--> <!--/ko-->
<!--/ko-->
<!-- ko if: isPaymentMethodKlarna() --> <!-- ko if: isPaymentMethodKlarna() -->
<!-- ko if: showSsn() --> <!-- ko if: showSsn() -->
<div class="field ssn type required"> <div class="field ssn type required">
<label data-bind="attr: {for: getCode() + '_ssn_' + value}" class="adyen-checkout__label__text"> <label data-bind="attr: {for: getCode() + '_ssn_' + value}" class="adyen-checkout__label__text">
<span><!-- ko text: $t('Personal number')--><!-- /ko --></span> <span><!-- ko text: $t('Personal number')--><!-- /ko --></span>
</label> </label>
<div class="control"> <div class="control">
<input type="text" class="input-text" <input type="text" class="input-text"
name="payment[ssn]" name="payment[ssn]"
data-bind=" data-bind="
attr: { attr: {
id: getCode() + '_ssn_' + value, id: getCode() + '_ssn_' + value,
title: $t('Social Security Number'), title: $t('Social Security Number'),
'data-container': getCode() + '-ssn', 'data-container': getCode() + '-ssn',
maxlength : getSsnLength() maxlength : getSsnLength()
}, },
value: ssn" value: ssn"
data-validate="{required:true}" data-validate="{required:true}"
/> />
</div>
</div> </div>
</div> <!--/ko-->
<div class="checkout-component-dock" afterRender="renderKlarnaComponent()" data-bind="attr: { id: 'klarnaContainer'}"></div>
<!--/ko--> <!--/ko-->
<div class="checkout-component-dock" afterRender="renderKlarnaComponent()" data-bind="attr: { id: 'klarnaContainer'}"></div> <!-- ko if: isPaymentMethodAfterPay() -->
<!--/ko-->
<!-- ko if: isPaymentMethodAfterPay() --> <!-- ko if: showSsn() -->
<div class="field ssn type required">
<label data-bind="attr: {for: getCode() + '_ssn_' + value}" class="adyen-checkout__label__text">
<span><!-- ko text: $t('Personal number')--><!-- /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',
maxlength : getSsnLength()
},
value: ssn"
data-validate="{required:true}"
/>
</div>
</div>
<!--/ko-->
<!-- ko if: showSsn() --> <div class="checkout-component-dock" afterRender="renderAfterPayComponent()" data-bind="attr: { id: 'afterPayContainer'}"></div>
<div class="field ssn type required"> <!--/ko-->
<label data-bind="attr: {for: getCode() + '_ssn_' + value}" class="adyen-checkout__label__text">
<span><!-- ko text: $t('Personal number')--><!-- /ko --></span> <!-- ko if: isPaymentMethodOtherOpenInvoiceMethod() -->
</label>
<div class="control"> <div class="field gender required">
<input type="text" class="input-text" <label data-bind="attr: {for: getCode() + '_gender_type_' + value}" class="label">
name="payment[ssn]" <span><!-- ko text: $t('Gender')--><!-- /ko --></span>
data-bind=" </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>
<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>
<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 if: showSsn() -->
<div class="field ssn type required">
<label data-bind="attr: {for: getCode() + '_ssn_' + value}" class="adyen-checkout__label__text">
<span><!-- ko text: $t('Personal number')--><!-- /ko --></span>
</label>
<div class="control">
<input type="text" class="input-text"
name="payment[ssn]"
data-bind="
attr: { attr: {
id: getCode() + '_ssn_' + value, id: getCode() + '_ssn_' + value,
title: $t('Social Security Number'), title: $t('Social Security Number'),
...@@ -122,196 +210,109 @@ ...@@ -122,196 +210,109 @@
maxlength : getSsnLength() maxlength : getSsnLength()
}, },
value: ssn" value: ssn"
data-validate="{required:true}" data-validate="{required:true}"
/> />
</div>
</div> </div>
</div> <!--/ko-->
<!--/ko--> <!--/ko-->
<div class="checkout-component-dock" afterRender="renderAfterPayComponent()" data-bind="attr: { id: 'afterPayContainer'}"></div> <!-- ko if: isSepaDirectDebit() -->
<!--/ko--> <div class="checkout-component-dock" afterRender="renderSepaDirectDebitComponent()" data-bind="attr: { id: 'sepaDirectDebitContainer'}"></div>
<!--/ko-->
<!-- ko if: isPaymentMethodOtherOpenInvoiceMethod() -->
<div class="field gender required"> <!-- ko if: isAch() -->
<label data-bind="attr: {for: getCode() + '_gender_type_' + value}" class="label"> <div class="field ownerName type required">
<span><!-- ko text: $t('Gender')--><!-- /ko --></span> <label data-bind="attr: {for: getCode() + '_ownerName_' + value}" class="label">
<span><!-- ko text: $t('Owner name')--><!-- /ko --></span>
</label> </label>
<div class="control"> <div class="control">
<select class="select select-gender-type" <input type="text" class="input-text"
name="payment[gender]" name="payment[ownerName]"
data-bind="attr: {id: getCode() + '_gender_type_' + value, 'data-container': getCode() + '-gender-type'}, data-bind="
options: $parent.getGenderTypes(), attr: {
optionsValue: 'key', id: getCode() + '_ownerName_' + value,
optionsText: 'value', title: $t('Owner name'),
optionsCaption: $t('-Please select-'), 'data-container': getCode() + '-ownerName_' + value,
value: gender" 'data-validate': JSON.stringify({'required':true})
data-validate="{required:true}"> },
</select> value: ownerName"
data-validate="{required:true}"
/>
</div> </div>
</div>
<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>
</div>
<div class="field telephone type required"> <div class="field bankAccountNumber type required">
<label data-bind="attr: {for: getCode() + '_telephone_' + value}" class="label"> <label data-bind="attr: {for: getCode() + '_bankAccountNumber_' + value}" class="label">
<span><!-- ko text: $t('Telephone')--><!-- /ko --></span> <span><!-- ko text: $t('Bank account number')--><!-- /ko --></span>
</label> </label>
<div class="control"> <div class="control">
<input type="number" class="input-text" <input type="number" class="input-text"
name="payment[telephone]" name="payment[bankAccountNumber]"
data-bind=" data-bind="
attr: { attr: {
id: getCode() + '_telephone_' + value, id: getCode() + '_bankAccountNumber_' + value,
title: $t('Telephone'), title: $t('Bank account number'),
'data-container': getCode() + '-telephone_' + value, 'data-container': getCode() + '-bankAccountNumber_' + value,
'data-validate': JSON.stringify({'required-number':true}) 'data-validate': JSON.stringify({'required':true}),
}, minlength: 3,
value: telephone" maxlength : getBankAccountNumberMaxLength()
data-validate="{required:true}" },
/> value: bankAccountNumber"
data-validate="{required:true}"
/>
</div>
</div> </div>
</div>
<!-- ko if: showSsn() --> <div class="field bankLocationId type required">
<div class="field ssn type required"> <label data-bind="attr: {for: getCode() + '_bankLocationId_' + value}" class="label">
<label data-bind="attr: {for: getCode() + '_ssn_' + value}" class="adyen-checkout__label__text"> <span><!-- ko text: $t('Bank location ID')--><!-- /ko --></span>
<span><!-- ko text: $t('Personal number')--><!-- /ko --></span> </label>
</label> <div class="control">
<div class="control"> <input type="number" class="input-text"
<input type="text" class="input-text" name="payment[bankLocationId]"
name="payment[ssn]" data-bind="
data-bind=" attr: {
attr: { id: getCode() + '_bankLocationId_' + value,
id: getCode() + '_ssn_' + value, title: $t('Bank location ID'),
title: $t('Social Security Number'), 'data-container': getCode() + '-bankLocationId_' + value,
'data-container': getCode() + '-ssn', 'data-validate': JSON.stringify({'required-number':true}),
maxlength : getSsnLength() minlength: 9,
}, maxlength: 9
value: ssn" },
data-validate="{required:true}" value: bankLocationId"
/> data-validate="{required:true}"
/>
</div>
</div> </div>
</div>
<!--/ko-->
<!--/ko-->
<!-- ko if: isSepaDirectDebit() --> <!--/ko-->
<div class="checkout-component-dock" afterRender="renderSepaDirectDebitComponent()" data-bind="attr: { id: 'sepaDirectDebitContainer'}"></div> </fieldset>
<!--/ko-->
<!-- ko if: isAch() --> <div class="checkout-agreements-block">
<div class="field ownerName type required"> <!-- ko foreach: $parents[1].getRegion('before-place-order') -->
<label data-bind="attr: {for: getCode() + '_ownerName_' + value}" class="label"> <!-- ko template: getTemplate() --><!-- /ko -->
<span><!-- ko text: $t('Owner name')--><!-- /ko --></span> <!--/ko-->
</label> </div>
<div class="control">
<input type="text" class="input-text"
name="payment[ownerName]"
data-bind="
attr: {
id: getCode() + '_ownerName_' + value,
title: $t('Owner name'),
'data-container': getCode() + '-ownerName_' + value,
'data-validate': JSON.stringify({'required':true})
},
value: ownerName"
data-validate="{required:true}"
/>
</div>
</div>
<div class="field bankAccountNumber type required"> <div>
<label data-bind="attr: {for: getCode() + '_bankAccountNumber_' + value}" class="label"> <span class="message message-error error hpp-message" data-bind="attr: {id: 'messages-' + value}"></span>
<span><!-- ko text: $t('Bank account number')--><!-- /ko --></span> </div>
</label>
<div class="control">
<input type="number" class="input-text"
name="payment[bankAccountNumber]"
data-bind="
attr: {
id: getCode() + '_bankAccountNumber_' + value,
title: $t('Bank account number'),
'data-container': getCode() + '-bankAccountNumber_' + value,
'data-validate': JSON.stringify({'required':true}),
minlength: 3,
maxlength : getBankAccountNumberMaxLength()
},
value: bankAccountNumber"
data-validate="{required:true}"
/>
</div>
</div>
<div class="field bankLocationId type required"> <div class="actions-toolbar">
<label data-bind="attr: {for: getCode() + '_bankLocationId_' + value}" class="label"> <div class="primary">
<span><!-- ko text: $t('Bank location ID')--><!-- /ko --></span> <button class="action primary checkout"
</label> type="submit"
<div class="control"> data-bind="
<input type="number" class="input-text" click: $parent.continueToAdyenBrandCode,
name="payment[bankLocationId]" enable: placeOrderAllowed() && (value == $parent.isBrandCodeChecked()),
data-bind=" css: {disabled: !$parent.isPlaceOrderActionAllowed()}"
attr: { disabled>
id: getCode() + '_bankLocationId_' + value, <span data-bind="text: $t('Place Order')"></span>
title: $t('Bank location ID'), </button>
'data-container': getCode() + '-bankLocationId_' + value,
'data-validate': JSON.stringify({'required-number':true}),
minlength: 9,
maxlength: 9
},
value: bankLocationId"
data-validate="{required:true}"
/>
</div>
</div> </div>
<!--/ko-->
</fieldset>
</form>
<div class="checkout-agreements-block">
<!-- ko foreach: $parents[1].getRegion('before-place-order') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
</div>
<div>
<span class="message message-error error hpp-message" data-bind="attr: {id: 'messages-' + value}"></span>
</div>
<div class="actions-toolbar">
<div class="primary">
<button class="action primary checkout"
type="submit"
data-bind="
click: $parent.continueToAdyenBrandCode,
enable: placeOrderAllowed() && (value == $parent.isBrandCodeChecked()),
css: {disabled: !$parent.isPlaceOrderActionAllowed()}"
disabled>
<span data-bind="text: $t('Place Order')"></span>
</button>
</div> </div>
</div> </form>
</div> </div>
</div> </div>
<!--/ko--> <!--/ko-->
\ No newline at end of file
view/frontend/web/template/payment/oneclick-form.html
View file @ da16e0dc
...@@ -140,25 +140,27 @@ ...@@ -140,25 +140,27 @@
</div> </div>
</fieldset> </fieldset>
</form>
<div class="checkout-agreements-block"> <div class="checkout-agreements-block">
<!-- ko foreach: $parents[1].getRegion('before-place-order') --> <!-- ko foreach: $parents[1].getRegion('before-place-order') -->
<!-- ko template: getTemplate() --><!-- /ko --> <!-- ko template: getTemplate() --><!-- /ko -->
<!--/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 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>
</form>
</div> </div>
</div> </div>
<!--/ko--> <!--/ko-->
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment