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:

• fast-luhn to check bank card number for mistakes
• Halter font to simulate bank card font
• convert-layout to force English keyboard in holder name field

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);
}

• 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:

• If your bank is already included, you can open an issue with your prefix (NOT full number of your card, just first 5 or 6 symbols) or send a pull request.
• Otherwise you can add a new bank (see contributing guide).

See CHANGELOG.md or release notes (with commits history).