Card Number Spacing

[sbecka]

Hi, I'm just starting to set up a form in React with the Card Element and I noticed the card number spacing is a bit strange in the guides and react demo. Also the year format is allowing 4 digits instead of 2. Is this normal? Is there a way to control this spacing somehow or limit the amount of numbers? Thanks in advance!

[chrissrogers]

Hi @sbecka -- happy to help. Our combined card number Element does allow for 4 chars in the year entry, just to cover input behaviors from users that are expecting to input a full 4 char year. We don't have a way to limit it to 2 chars on the combined card field, but we do on the year entry if you're using individual card Elements (CardNumberElement, CardMonthElement, CardYearElement, CardCvvElement). Using those Elements gives you a lot more flexibility to control the behaviors of the Elements to fit your needs.

[sbecka]

Hi @chrissrogers thank you for responding. I'm still wondering about the card number element. It is always invalid or red when I input the numbers manually like in the pictures above. The spaces are also inconsistent with a typical 4 digit pattern. I'm concerned users will be confused by it. Is there a solution for this?