Skip to content

A
Adyen Magento2
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