diff --git a/src/components/Input/CreditCardNumber.spec.js b/src/components/Input/CreditCardNumber.spec.js
index 9cc86a147..58c098041 100644
--- a/src/components/Input/CreditCardNumber.spec.js
+++ b/src/components/Input/CreditCardNumber.spec.js
@@ -12,6 +12,7 @@ const EXAMPLES = {
   'master-card': '5555555555554444',
   discover: '6011111111111117',
   jcb: '3530111333300000',
+  unionpay: '6262320002000067',
   visa: '4111111111111111',
 };
 
diff --git a/src/components/Input/CreditCardNumber.tsx b/src/components/Input/CreditCardNumber.tsx
index fcaba401c..696247e0f 100644
--- a/src/components/Input/CreditCardNumber.tsx
+++ b/src/components/Input/CreditCardNumber.tsx
@@ -7,7 +7,14 @@ import InputGroupText from '../InputGroup/InputGroupText';
 import Input from './Input';
 
 // runtime representation of card types for input validation
-type CardType = 'visa' | 'master-card' | 'american-express' | 'discover' | 'diners-club' | 'jcb';
+type CardType =
+  | 'visa'
+  | 'master-card'
+  | 'american-express'
+  | 'discover'
+  | 'diners-club'
+  | 'jcb'
+  | 'unionpay';
 
 type IconName =
   | 'cc-amex'
@@ -33,6 +40,7 @@ const ICONS: {
   'master-card': 'cc-mastercard',
   discover: 'cc-discover',
   jcb: 'cc-jcb',
+  unionpay: 'credit-card',
   visa: 'cc-visa',
 };