Returns bank's name and brand color by bankcard prefix (BIN).
It is useful on billing pages to use bank’s brand color when user starts to type card number.
It's a community driven database, so it can potentially contains mistakes. It's not a problem for UX enhancement, but you must not use Banks DB in your billing logic.
Try your card prefix in our demo. Note that only first 6 digits of card number are required.
With postcss-banks-db and postcss-contrast you can generate CSS for each bank:
.billing-form {
transition: background .6s, color .6s;
background: #eee;
}
@banks-db-template {
.billing-form.is-%code% {
background-color: %color%;
color: contrast(%color%);
}
}
And then switch bank’s style in JS:
import banksDB from 'banks-db';
const bank = banksDB(cardNumberField.value);
if ( bank.code ) {
billingForm.className = 'billing-form is-' + (bank.code || 'other');
bankName.innerText = bank.country === 'ru' ? bank.localTitle : bank.engTitle;
} else {
billingForm.className = 'billing-form';
bankName.innerText = '';
}
import contrast from 'contrast';
import banksDB from 'banks-db';
BillingForm = ({ cardNumber }) => {
const title, color;
const bank = banksDB(this.props.cardNumber);
if ( bank.code ) {
title = bank.country === 'ru' ? bank.localTitle : bank.engTitle;
color = bank.color;
} else {
title = '';
color = '#eee';
}
return (
<div style={{
transition: 'background .6s, color .6s',
background: color,
color: contrast(color) === 'light' ? 'black' : 'white'
}}>
<h2>{ title }</h2>
…
</div>
);
}
See also best practices for billing forms:
There are two options to use BanksDB depends of whether you need specific countries or not.
Library exports banksDB
function. It accepts bankcard number and returns
bank object.
var banksDB = require('banks-db');
var bank = banksDB('5275 9400 0000 0000');
console.log(bank.code) //=> 'ru-citibank'
console.log(bank.type) //=> 'mastercard'
If database doesn't contain some bank prefix, bank object will have only
type
field.
var unknown = banksDB('4111 1111 1111 1111');
console.log(bank.code) //=> undefined
console.log(bank.type) //=> 'visa'
You can also get banks database by banksDB.data
:
for ( let bank of banksDB.data ) {
console.log(bank);
}
Instead of banks-db
use banks-db/core
:
var banksDBCore = require('banks-db/core');
Then require desired countries from banks-db/banks
by two letters code:
var banksOfRussia = require('banks-db/banks/ru');
var banksOfChina = require('banks-db/banks/cn');
All that left is to call banksDBCore
with your countries data to initialize. banksDBCore
is a function that accepts one argument with banks data for countries that you've specified, and returns an instance of BanksDB object with findBank
method and data
property.
var BanksDB = banksDBCore([banksOfRussia, banksOfChina]);
// var BanksDB = banksDBCore(banksOfRussia); no need for an array if there's only one country
That's it! Ready to use:
var bank = BanksDB.findBank('5275 9400 0000 0000');
var data = BanksDB.data;
type
: bankcard type. For example, 'visa'
or 'mastercard'
.
Banks DB will return it even if bank is unknown.code
: unique code, contains country and name. For example, you can use it to generate CSS selectors for each bank.color
: bank's brand color in HEX-format.localTitle
: bank's title in local language.engTitle
: international bank's title.name
: short bank's name (not unique). For example, 'citibank'
.country
: bank's operation country. For example, you can use it
to display localTitle
for local banks and engTitle
for others.url
: bank's website URL.In case your bankcard doesn't work, please check if your bank already in Banks DB:
See CHANGELOG.md or release notes (with commits history).