card
card copied to clipboard
jessepollak
Add banks brand colors
There is a good and open banks BINs database with banks names and brand colors.
I think we could do form UX better if we will show bank name and color while user input a card number (we could get bank by first 6 card numbers, BIN). Here is a demo: https://ramoona.github.io/banks-db-demo/
In fact, in Russia few big banks already use this UX: Alfabank, Tinkoff and Rocket bank. And all my friends love this behavior.
@jessepollak what do you think about it?
Probably not good for production yet in America. Good idea tho. I tried a couple of my own cards with no luck.
@VersatilityWerks sure. But it is a open source database. Feel free to add your BINs there.
Yea, every DB starts somewhere. Just saying this one needs some work. I'll contribute when I get a moment.
I'm sure there are a lot more, but I took a couple minutes to add SunTrust and Navy Federal. Also, the list of BINs I found for SunTrust may have only been for their Debit Cards. May need to have another set of them added for Credit Cards. Not sure on that.
@ai I think it's a good idea, though I'm also wary of switching to this if it degrades the ability to detect card providers etc. Are you suggesting we switch entirely to this for card detection or add it as an additional layer on top of our current card detection? Also, do you know how large the dataset is to do this detection?
@jessepollak - They only have a couple/few for the United States and it's a very incomplete library. Might be cool to add on top of existing detection to show specific banks when they exist, but I would NOT recommend switching completely.
@VersatilityWerks I agree that this library don’t have all banks, but it is the most complete database of banks brand colors.
Card library right now has some different database for banks names?
@jessepollak “card providers” is bank names (Citi Bank, Bank of America, …) or card types (Visa/MasterCard/…)?
Assuming you're suggesting the bank's color be added as a background...a concern for me would be lack of control to make sure the font is contrasting. If a bank's color is navy blue, you probably can't have black text over the top. There will need to be additional considerations.
@VersatilityWerks a11n is a good concern.
This is why banks-db suggests to use postcss-contrast for CSS-only or contrast for CSS-in-JS implementation.
background: color,
color: contrast(color) === 'light' ? 'black' : 'white'
That works? Dang. Never seen that before and I can't get it to work for me. Plus...how cross-browser compatible is it?
Update: after some googling, it looks like you'll probably need a JS library to achieve that. https://24ways.org/2010/calculating-color-contrast/
how can i use binlist in this plugin @jessepollak ? i want get bank name. can u help me plz?
