[EP-2614] Show credit card type icon

src/assets/scss/_checkout.scss

@@ -184,6 +184,31 @@
   }
 }
 
+.credit-card-number-wrapper {
+  position:relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .credit-card-icons {
+    position: absolute;
+    right: 5px;
+  }
+
+  img {
+    max-width: unset;
+    height: 20px;
+
+    @media (max-width: 549px) {
+      height: 17px;
+    }
+  }
+
+  input {
+    padding-right: 35px;
+  }
+}
+
 .billing-address-wrap  {
   display: none;
   margin-top: 20px;

src/common/components/paymentMethods/creditCardForm/creditCardForm.component.js

@@ -33,6 +33,7 @@ class CreditCardController {
     this.analyticsFactory = analyticsFactory;
     this.envService = envService;
     this.tsysService = tsysService;
+    this.imgDomain = envService.read('imgDomain');
 
     this.useMailingAddress = true;
     this.creditCardPayment = {
@@ -160,6 +161,10 @@ class CreditCardController {
     this.expirationDateYears = range(currentYear, currentYear + 20);
   }
 
+  getCardType() {
+    return this.cardInfo.type(this.creditCardPayment.cardNumber);
+  }
+
   savePayment() {
     this.creditCardPaymentForm.$setSubmitted();
     if (this.creditCardPaymentForm.$valid) {

src/common/components/paymentMethods/creditCardForm/creditCardForm.component.spec.js

@@ -451,6 +451,44 @@ describe('credit card form', () => {
     });
   });
 
+  describe('getCardType', () => {
+    it('should recognize Visa', () => {
+      self.controller.creditCardPayment.cardNumber = '4111111111111111';
+
+      expect(self.controller.getCardType()).toBe('Visa');
+    });
+
+    it('should recognize MasterCard', () => {
+      self.controller.creditCardPayment.cardNumber = '5555555555554444';
+
+      expect(self.controller.getCardType()).toBe('MasterCard');
+    });
+
+    it('should recognize American Express', () => {
+      self.controller.creditCardPayment.cardNumber = '378282246310005';
+
+      expect(self.controller.getCardType()).toBe('American Express');
+    });
+
+    it('should recognize Discover', () => {
+      self.controller.creditCardPayment.cardNumber = '6011111111111117';
+
+      expect(self.controller.getCardType()).toBe('Discover');
+    });
+
+    it('should recognize Diners Club', () => {
+      self.controller.creditCardPayment.cardNumber = '3056930009020004';
+
+      expect(self.controller.getCardType()).toBe('Diners Club');
+    });
+
+    it('should handle invalid card number', () => {
+      self.controller.creditCardPayment.cardNumber = '1111111111111111';
+
+      expect(self.controller.getCardType()).toBe('');
+    });
+  });
+
   describe('form controller', () => {
     it('should be invalid if any of the inputs are invalid', () => {
       self.formController.cardNumber.$setViewValue('');

src/common/components/paymentMethods/creditCardForm/creditCardForm.tpl.html

@@ -20,17 +20,41 @@ <h4 class="panel-title visible" translate>{{'CREDIT_CARD_PAYMENT'}}</h4>
         >
           <label>
             <span translate>{{'CARD_NUM_FULL'}}</span>
-            <input
-              type="text"
-              name="cardNumber"
-              autocomplete="cc-number"
-              class="form-control form-control-subtle"
-              ng-model="$ctrl.creditCardPayment.cardNumber"
-              ng-attr-placeholder="************{{$ctrl.creditCardPayment.cardNumberPlaceholder}}"
-              ng-required="!$ctrl.paymentMethod || $ctrl.creditCardPayment.cardNumber"
-              ng-disabled="$ctrl.disableCardNumber"
-              credit-card-number
-            />
+            <div class="credit-card-number-wrapper">
+              <input
+                type="text"
+                name="cardNumber"
+                autocomplete="cc-number"
+                class="form-control form-control-subtle"
+                ng-model="$ctrl.creditCardPayment.cardNumber"
+                ng-attr-placeholder="************{{$ctrl.creditCardPayment.cardNumberPlaceholder}}"
+                ng-required="!$ctrl.paymentMethod || $ctrl.creditCardPayment.cardNumber"
+                ng-disabled="$ctrl.disableCardNumber"
+                credit-card-number
+              />
+              <div ng-switch="$ctrl.getCardType()" class="credit-card-icons">
+                <img
+                  ng-src="{{$ctrl.imgDomain}}/assets/img/cc-icons/american-express-curved-128px.png"
+                  ng-switch-when="American Express"
+                />
+                <img
+                  ng-src="{{$ctrl.imgDomain}}/assets/img/cc-icons/discover-curved-128px.png"
+                  ng-switch-when="Discover"
+                />
+                <img
+                  ng-src="{{$ctrl.imgDomain}}/assets/img/cc-icons/mastercard-curved-128px.png"
+                  ng-switch-when="MasterCard"
+                />
+                <img
+                  ng-src="{{$ctrl.imgDomain}}/assets/img/cc-icons/visa-curved-128px.png"
+                  ng-switch-when="Visa"
+                />
+                <img
+                  ng-src="{{$ctrl.imgDomain}}/assets/img/cc-icons/diners-curved-128px.png"
+                  ng-switch-when="Diners Club"
+                />
+              </div>
+            </div>
           </label>
           <div
             ng-messages="$ctrl.creditCardPaymentForm.cardNumber.$error"