npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

banks-db

v0.23.0

Published

Bankcards BIN database

Downloads

4,558

Readme

Build Status Latest Stable Version NPM Downloads

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.

Demo

Try your card prefix in our demo. Note that only first 6 digits of card number are required.

Usage

PostCSS

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 = '';
}

CSS-in-JS

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

Other Best Practices

See also best practices for billing forms:

API

There are two options to use BanksDB depends of whether you need specific countries or not.

If you need banks for all countries

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

If you need only banks for specific countries

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;

Bank Object

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

Contributing

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

Changelog

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