From de648148799ae45df50ecf5882f6ba17c7502dbb Mon Sep 17 00:00:00 2001
From: Stanislav Idolov <sidolov@ebay.com>
Date: Fri, 26 Jun 2015 15:32:37 +0300
Subject: [PATCH] MAGETWO-38647: credit card validation issue
---
.../credit-card-type.js | 21 +++++-----
.../frontend/web/js/view/payment/cc-form.js | 32 ++++++++++++++--
.../web/template/payment/cc-form.html | 38 ++++++++++++-------
3 files changed, 62 insertions(+), 29 deletions(-)
diff --git a/app/code/Magento/Payment/view/frontend/web/js/model/credit-card-validation/credit-card-number-validator/credit-card-type.js b/app/code/Magento/Payment/view/frontend/web/js/model/credit-card-validation/credit-card-number-validator/credit-card-type.js
index 7ace4e1594b..f0685c6d67c 100644
--- a/app/code/Magento/Payment/view/frontend/web/js/model/credit-card-validation/credit-card-number-validator/credit-card-type.js
+++ b/app/code/Magento/Payment/view/frontend/web/js/model/credit-card-validation/credit-card-number-validator/credit-card-type.js
@@ -14,7 +14,7 @@ define(
var types = [
{
niceType: 'Visa',
- type: 'visa',
+ type: 'VI',
pattern: '^4\\d*$',
gaps: [4, 8, 12],
lengths: [16],
@@ -25,7 +25,7 @@ define(
},
{
niceType: 'MasterCard',
- type: 'master-card',
+ type: 'MC',
pattern: '^5([1-5]\\d*)?$',
gaps: [4, 8, 12],
lengths: [16],
@@ -36,7 +36,7 @@ define(
},
{
niceType: 'American Express',
- type: 'american-express',
+ type: 'AE',
pattern: '^3([47]\\d*)?$',
isAmex: true,
gaps: [4, 10],
@@ -47,8 +47,8 @@ define(
}
},
{
- niceType: 'DinersClub',
- type: 'diners-club',
+ niceType: 'Diners',
+ type: 'DN',
pattern: '^3((0([0-5]\\d*)?)|[689]\\d*)?$',
gaps: [4, 10],
lengths: [14],
@@ -59,7 +59,7 @@ define(
},
{
niceType: 'Discover',
- type: 'discover',
+ type: 'DI',
pattern: '^6(0|01|011\\d*|5\\d*|4|4[4-9]\\d*)?$',
gaps: [4, 8, 12],
lengths: [16],
@@ -70,7 +70,7 @@ define(
},
{
niceType: 'JCB',
- type: 'jcb',
+ type: 'JC',
pattern: '^((2|21|213|2131\\d*)|(1|18|180|1800\\d*)|(3|35\\d*))$',
gaps: [4, 8, 12],
lengths: [16],
@@ -81,7 +81,7 @@ define(
},
{
niceType: 'UnionPay',
- type: 'unionpay',
+ type: 'UN',
pattern: '^6(2\\d*)?$',
gaps: [4, 8, 12],
lengths: [16, 17, 18, 19],
@@ -92,8 +92,8 @@ define(
},
{
niceType: 'Maestro',
- type: 'maestro',
- pattern: '^((5((0|[6-9])\\d*)?)|(6|6[37]\\d*))$',
+ type: 'SM',
+ pattern: '(^(5[0678])[0-9]{11,18}$)|(^(6[^05])[0-9]{11,18}$)|(^(601)[^1][0-9]{9,16}$)|(^(6011)[0-9]{9,11}$)|(^(6011)[0-9]{13,16}$)|(^(65)[0-9]{11,13}$)|(^(65)[0-9]{15,18}$)|(^(49030)[2-9]([0-9]{10}$|[0-9]{12,13}$))|(^(49033)[5-9]([0-9]{10}$|[0-9]{12,13}$))|(^(49110)[1-2]([0-9]{10}$|[0-9]{12,13}$))|(^(49117)[4-9]([0-9]{10}$|[0-9]{12,13}$))|(^(49118)[0-2]([0-9]{10}$|[0-9]{12,13}$))|(^(4936)([0-9]{12}$|[0-9]{14,15}$))',
gaps: [4, 8, 12],
lengths: [12, 13, 14, 15, 16, 17, 18, 19],
code: {
@@ -102,7 +102,6 @@ define(
}
}
];
-
return {
getCardTypes: function (cardNumber) {
var i, value,
diff --git a/app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-form.js b/app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-form.js
index 4e9c7b83332..8a6170c79c9 100644
--- a/app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-form.js
+++ b/app/code/Magento/Payment/view/frontend/web/js/view/payment/cc-form.js
@@ -9,9 +9,10 @@ define(
'underscore',
'Magento_Checkout/js/view/payment/default',
'Magento_Payment/js/model/credit-card-validation/credit-card-data',
+ 'Magento_Payment/js/model/credit-card-validation/credit-card-number-validator',
'mage/translate'
],
- function (_, Component, creditCardData, $t) {
+ function (_, Component, creditCardData, cardNumberValidator, $t) {
return Component.extend({
defaults: {
creditCardType: '',
@@ -20,8 +21,10 @@ define(
creditCardNumber: '',
creditCardSsStartMonth: '',
creditCardSsStartYear: '',
- creditCardVerificationNumber: ''
+ creditCardVerificationNumber: '',
+ selectedCardType: null
},
+
initObservable: function () {
this._super()
.observe([
@@ -31,17 +34,38 @@ define(
'creditCardNumber',
'creditCardVerificationNumber',
'creditCardSsStartMonth',
- 'creditCardSsStartYear'
+ 'creditCardSsStartYear',
+ 'selectedCardType'
]);
return this;
},
initialize: function() {
+ var self = this;
this._super();
//Set credit card number to credit card data object
this.creditCardNumber.subscribe(function(value) {
- console.log(value);
+ var result;
+ self.selectedCardType(null);
+
+ if (value == '' || value == null) {
+ return false;
+ }
+ result = cardNumberValidator(value);
+
+ if (!result.isPotentiallyValid && !result.isValid) {
+ return false;
+ }
+ if (result.card !== null) {
+ self.selectedCardType(result.card.type);
+ creditCardData.creditCard = result.card;
+ }
+
+ if (result.isValid) {
+ creditCardData.creditCardNumber = value;
+ self.creditCardType(result.card.type);
+ }
});
//Set expiration year to credit card data object
diff --git a/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html b/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html
index e6d2a8dc4c2..09048a925c0 100644
--- a/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html
+++ b/app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html
@@ -5,6 +5,12 @@
*/
-->
+<style>
+ .credit-card-types div.active{
+ font-weight: bold;
+ }
+</style>
+
<fieldset data-bind="attr: {class: 'fieldset payment items ccard ' + getCode(), id: 'payment_form_' + getCode()}">
<!-- ko if: (isShowLegend())-->
<legend class="legend">
@@ -16,18 +22,18 @@
<span><!-- ko text: $t('Credit Card Type')--><!-- /ko --></span>
</label>
<div class="control">
- <select name="payment[cc_type]" class="select"
- data-bind="attr: {id: getCode() + '_cc_type',
- 'data-container': getCode() + '-cc-type',
- 'data-validate': JSON.stringify({required:true, 'validate-cc-type-select':'#' + getCode() + '_cc_number'})},
- mageInit: {creditCardType:{creditCardTypeContainer:'#' + getCode() + '_cc_type_ss_div'}},
- enable: isActive($parents),
- options: getCcAvailableTypesValues(),
- optionsValue: 'value',
- optionsText: 'type',
- optionsCaption: $t('Please Select'),
- value: creditCardType">
- </select>
+ <div class="credit-card-types">
+ <!-- ko foreach: {data: getCcAvailableTypesValues(), as: 'item'} -->
+ <div data-bind="css: {active: $parent.selectedCardType() == item.value} ">
+ <!-- ko text: item.type --><!-- /ko -->
+ </div>
+ <!--/ko-->
+ <input type="hidden"
+ name="payment[cc_number]"
+ class="input-text"
+ value=""
+ data-bind="attr: {id: getCode() + '_cc_type'}, value: creditCardType">
+ </div>
</div>
</div>
<div class="field number required">
@@ -36,10 +42,14 @@
</label>
<div class="control">
<input type="text" name="payment[cc_number]" class="input-text" value=""
- data-bind="attr: {id: getCode() + '_cc_number', title: $t('Credit Card Number'), 'data-container': getCode() + '-cc-number', 'data-validate': JSON.stringify({'required-number':true, 'validate-card-number':'#' + getCode() + '_cc_type', 'validate-cc-type':'#' + getCode() + '_cc_type'})},
+ data-bind="attr: {
+ id: getCode() + '_cc_number',
+ title: $t('Credit Card Number'),
+ 'data-container': getCode() + '-cc-number',
+ 'data-validate': JSON.stringify({'required-number':true, 'validate-card-number':'#' + getCode() + '_cc_type', 'validate-cc-type':'#' + getCode() + '_cc_type'})},
enable: isActive($parents),
value: creditCardNumber,
- valueUpdate: 'keyup',"/>
+ valueUpdate: 'keyup' "/>
</div>
</div>
<div class="field date required" data-bind="attr: {id: getCode() + '_cc_type_exp_div'}">
--
GitLab