recurly-js icon indicating copy to clipboard operation
recurly-js copied to clipboard

Published 20 hours ago • verified publisher icon recurly

Card Number Spacing

Open sbecka opened this issue 2 years ago • 2 comments

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!

Screen Shot 2022-09-22 at 11 41 08 AM Screen Shot 2022-09-22 at 11 41 33 AM Screen Shot 2022-09-22 at 11 43 21 AM Screen Shot 2022-09-22 at 11 53 58 AM

sbecka avatar Sep 22 '22 15:09 sbecka

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.

chrissrogers avatar Sep 22 '22 22:09 chrissrogers

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?

sbecka avatar Sep 23 '22 14:09 sbecka