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