search

jessepollak / card

:credit_card: make your credit card form better in one line of code
MIT License
11.67k stars 1.47k forks source link

Add banks brand colors #284

Open ai opened 8 years ago

ai commented 8 years ago

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?

HTMLGuyLLC commented 8 years ago

Probably not good for production yet in America. Good idea tho. I tried a couple of my own cards with no luck.

ai commented 8 years ago

@VersatilityWerks sure. But it is a open source database. Feel free to add your BINs there.

HTMLGuyLLC commented 8 years ago

Yea, every DB starts somewhere. Just saying this one needs some work. I'll contribute when I get a moment.

HTMLGuyLLC commented 8 years ago

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 commented 8 years ago

Great, thanks!

@jessepollak what do you think about this idea?

jessepollak commented 8 years ago

@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?

HTMLGuyLLC commented 8 years ago

@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.

ai commented 8 years ago

@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?

ai commented 8 years ago

@jessepollak “card providers” is bank names (Citi Bank, Bank of America, …) or card types (Visa/MasterCard/…)?

HTMLGuyLLC commented 8 years ago

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.

ai commented 8 years ago

@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'
HTMLGuyLLC commented 8 years ago

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/

shkupjane commented 6 years ago

how can i use binlist in this plugin @jessepollak ? i want get bank name. can u help me plz?