Adds custom directive for CVV validation.

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,

src/app/checkout/step-2/existingPaymentMethods/existingPaymentMethods.tpl.html

@@ -12,6 +12,24 @@
       </label>
     </div>
 
+      <form name="$ctrl.form" class="loading-overlay-parent">
+        <div class="form-group" ng-class="{'has-success': $ctrl.form.cvv.$valid, 'has-error': ($ctrl.form.cvv | showErrors) }">
+          <label for="cvv" translate>CVV</label>
+          <input id="cvv"
+                 name="cvv"
+                 type="cvv"
+                 class="form-control form-control-subtle"
+                 ng-model="$ctrl.cvv"
+                 credit-card-cvv="cvv"
+                 required
+                 >
+          <div ng-if="($ctrl.form.cvv | showErrors)" ng-messages="$ctrl.form.cvv.$error">
+            <span class="help-block" ng-message="required" translate>CVV is required.</span>
+          </div>
+        </div>
+        <loading type="overlay" ng-if="$ctrl.isLoading"></loading>
+      </form>
+
     <div class="panel panel-default tab-toggle mb0 mt"
          ng-if="(($ctrl.cartData && $ctrl.cartData.items) || $ctrl.brandedCheckoutItem) && $ctrl.selectedPaymentMethod && $ctrl.selectedPaymentMethod['card-type']">
       <div class="panel-title panel-heading" translate>{{'OPTIONAL'}}</div>

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)