Card Number input masking (i.e. •••• •••• •••• 1234)

[BillyFigueroa]

In the event that you are grabbing a users card information from say stripe or some similar service, it is nice to output the card number returned in the format of •••• •••• •••• 1234. The default props for number are as follows...

 static defaultProps = {
    ...,
    placeholder: {
      number: "•••• •••• •••• ••••",
      ...
},

It seems like masking is allowed when it's all masked but we cannot have, I guess a string with a number used, when populating the data using setValues or when using CardView and passing the number attribute

Can this be a possibility? or is there a specific wild card like character that can currently be used? As of right now I am using 0s (i.e. 0000 0000 0000 1234) but that is not a common practice

I found that a function in Utilities.js called removeNonNumber strips out anything that is not a number. Can this be an option? Like we decide if we want to strip leading spaces or non numbers? or give us a character to replace with (i.e. • or * or -) Unless this somehow breaks the component, it should be left to us developers to chose to do that or replace with the character we chose as a spacer.

removeNonNumber can likely be changed to have 3 parameters since it seems to be called on some fields...

  _formatNumber = (number, card) => {
    const numberSanitized = removeNonNumber(number);
    const maxLength = card.lengths[card.lengths.length - 1];
    const lengthSanitized = limitLength(numberSanitized, maxLength);
    const formatted = addGaps(lengthSanitized, card.gaps);
    return formatted;
  };

  _formatExpiry = (expiry) => {
    const sanitized = limitLength(removeNonNumber(expiry), 4);
    if (sanitized.match(/^[2-9]$/)) { return `0${sanitized}`; }
    if (sanitized.length > 2) { return `${sanitized.substr(0, 2)}/${sanitized.substr(2, sanitized.length)}`; }
    return sanitized;
  };

  _formatCVC = (cvc, card) => {
    const maxCVCLength = card.code.size;
    return limitLength(removeNonNumber(cvc), maxCVCLength);
  };

Something like...

    removeNonNumber(string="", replace = true, spacer="") {}

We can then pass replace boolean and/or spacer value