diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js index ce59dea7a..fc75fc006 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.component.js @@ -11,6 +11,7 @@ import cartService from 'common/services/api/cart.service' import { validPaymentMethod } from 'common/services/paymentHelpers/validPaymentMethods' import giveModalWindowTemplate from 'common/templates/giveModalWindow.tpl.html' import { SignInEvent } from 'common/services/session/session.service' +import creditCardCvv from '../../../../common/directives/creditCardCvv.directive' import template from './existingPaymentMethods.tpl.html' @@ -144,7 +145,8 @@ export default angular paymentMethodFormModal.name, coverFees.name, orderService.name, - cartService.name + cartService.name, + creditCardCvv.name ]) .component(componentName, { controller: ExistingPaymentMethodsController, diff --git a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html index 54080a339..bd0593e2e 100644 --- a/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html +++ b/src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html @@ -12,6 +12,24 @@ +
+
+ + +
+ CVV is required. +
+
+ +
+
{{'OPTIONAL'}}
diff --git a/src/common/directives/creditCardCvv.directive.js b/src/common/directives/creditCardCvv.directive.js new file mode 100644 index 000000000..141bd10c3 --- /dev/null +++ b/src/common/directives/creditCardCvv.directive.js @@ -0,0 +1,30 @@ +import angular from 'angular' +import * as cruPayments from '@cruglobal/cru-payments/dist/cru-payments' + +const directiveName = 'creditCardCvv' + +const creditCardCvv = /* @ngInject */ function () { + const directiveDefinitionObject = { + restrict: 'A', + require: ['^ngModel', '^form'], + link: function (scope, element, attributes, controllers) { + const ngModel = controllers[0] + const formController = controllers[1] + const valueModel = formController[attributes.creditCardCvv] + + scope.$watch(() => valueModel.$viewValue, function () { + ngModel.$validate() + }) + + ngModel.$validators.creditCardCvv = function (modelValue) { + console.log(modelValue) + return (cruPayments.creditCard.cvv.validate.minLength(modelValue)) && (cruPayments.creditCard.cvv.validate.maxLength(modelValue)) + } + } + } + return directiveDefinitionObject +} + +export default angular + .module(directiveName, []) + .directive(directiveName, creditCardCvv)