I'm using AngularUI Mask () on a credit card field.

<input type="text" placeholder="xxxx-xxxx-xxxx-xxxx" ui-mask="9999-9999-9999-9999" ng-model="card.number">

But, according to Stripe () not all cards have 16 digits. How can I allow users to input from 14 to 16 digits and automatically format it as:

• xxxx-xxxxxx-xxxxx for American Express
• xxxx-xxxx-xxxx-xx for Diners Club
• xxxx-xxxx-xxxx-xxxx for everything else

Plnkr:

I'm using AngularUI Mask (https://github./angular-ui/ui-mask) on a credit card field.

<input type="text" placeholder="xxxx-xxxx-xxxx-xxxx" ui-mask="9999-9999-9999-9999" ng-model="card.number">

But, according to Stripe (https://stripe./docs/testing) not all cards have 16 digits. How can I allow users to input from 14 to 16 digits and automatically format it as:

• xxxx-xxxxxx-xxxxx for American Express
• xxxx-xxxx-xxxx-xx for Diners Club
• xxxx-xxxx-xxxx-xxxx for everything else

Plnkr: http://plnkr.co/edit/Qx9lv7t4jGDwtj8bvQSv?p=preview

• javascript
• angularjs
• angular-ui
• masking

• the first few digits in a CC tell you what type of card it is (e.g. VISA cards all start with 4). that'll tell you what you need to do to format it. – Marc B Commented Jan 28, 2016 at 17:42
• 1 Do you really want customers who carry Amex or Diner's Club? ;) – Jonathan M Commented Jan 28, 2016 at 17:43
• @MarcB - OK thanks, how do I work with Mask in the controller? – trs Commented Jan 28, 2016 at 17:44
• @JonathanM - unfortunately I have to ;) – trs Commented Jan 28, 2016 at 17:44
• doubt you could use a ui mask, since there's potentially 3 versions of the input. at best you can say "digits and spaces only", then reformat to the appropriate style afterwards. – Marc B Commented Jan 28, 2016 at 17:46

1 Answer 1

Simplest way would be to use a variable on the scope of your controller for the mask value. Watch the value for the cc number and change the mask dynamically, based on the type of card. For this to work you have to disable validation on the ui-mask via ui-options. Then $scope.$watch() the value for the card number as it changes.

Use a basic regex match (thanks to a gist by @stefano-bortolotti) to determine the type of card. For a more robust approach, you could use a more in-depth library like credit-card-type

function getCreditCardType(creditCardNumber) { 
  // start without knowing the credit card type
  var result = "unknown";

  // first check for MasterCard
  if (/^5[1-5]/.test(creditCardNumber)) {
    result = "mastercard";
  } 
  // then check for Visa
  else if (/^4/.test(creditCardNumber)) {
    result = "visa";
  }
  // then check for AmEx
  else if (/^3[47]/.test(creditCardNumber)) {
    result = "amex";
  } 
  // then check for Diners
  else if (/3(?:0[0-5]|[68][0-9])[0-9]{11}/.test(creditCardNumber)) { 
    result = "diners"
  }
  // then check for Discover
  else if (/6(?:011|5[0-9]{2})[0-9]{12}/.test(creditCardNumber)) {
    result = "discover";
  } 

  return result;
}

Then, change the mask variable to suit the requirements of that particular card type.

function getMaskType(cardType){
  var masks = {
    'mastercard': '9999 9999 9999 9999',
    'visa': '9999 9999 9999 9999',
    'amex': '9999 999999 99999',
    'diners': '9999 9999 9999 99',
    'discover': '9999 9999 9999 9999',
    'unknown': '9999 9999 9999 9999'
  };
  return masks[cardType];
}

Put it all together in your controller.

myApp.controller("myCtrl", function($scope) {
  $scope = {number:'', type:'', mask:''};
  $scope.maskOptions = {
    allowInvalidValue:true //allows us to watch the value
  };
  $scope.$watch('cc.number', function(newNumber){
    $scope.type = getCreditCardType(newNumber);
    $scope.mask = getMaskType($scope.type);
  });
});

And the HTML will look like this:

<input ng-model="cc.number" ui-mask="{{cc.mask}}" ui-options="maskOptions" />

Example: https://jsfiddle/gq42wbL5/18/