Anyone who has installed, imposes or will impose a form for accepting bank cards is presented with the CardInfo.js plugin, with which you can create such a form:

The plugin identifies one of 49 Russian banks by card number (later I will add other countries), gives you a bank logo, colors for the background, a link to a bank website, determines the type of card, its logo, and so on. With this data, do what you want, impose any form.

You can play with the form on the demo page. Plugin code and installation instructions for github.

Under the cut:

• A couple of words about the plugin;
• About the base of banks, and why there are 49, not 50;
• About bank logos;
• About logos of types;
• Some of my questions to the readers;
  

CardInfo.js

The plugin is distributed via NPM npm install card-info and through Bower bower install card-info . It is connected by inserting a JS file into an HTML page, or you can connect it as a module in the CommonJS or ES6 style. You can connect the main file with all the logic and all the data on banks (69 KB), or a separate file with logic (5 KB) and a separate database of banks for the country you want (in general, only Russia is available, so this is for the future), for more details see the documentation on githaba. The plugin is independent, that is, for its work does not require any additional libraries. All plugin code is covered with tests. It even works in IE6. You can drive tests in the browser.

Create an instance of the CardInfo class by passing to the constructor as an argument the string entered by the user in the field with the card number var cardInfo = new CardInfo(number) . The instance will contain an object with additional information about the map:

• Card type (Master Card, Visa, etc.);
• The path to the type logo (logos for each type along with the plugin, in white, black and color design);
• Bank name in English and local language of the bank;
• The path to the bank logo (logos for each bank from the database are distributed along with the plugin);
• Colors that need to be colored;
• The color of the text that will be clearly visible on the proposed background and will be combined with the logo;
• Link to the bank site;
• The name of the security code (CVC, CVV, CID or CVN) for this type of card;
• The length of the security code for this type of card (usually 3, but for American Express 4);
• Card number mask (Not always 0000 0000 0000 0000);

All bank data is determined by the first 6 digits of the card number, type data is determined by the first 1-2 digits of the card number. When you call, you can pass more settings, but this is fully written in the documentation on the githaba. and I will not repeat here.

The plugin itself is not tied to the layout, and you can make the appearance of the form in any way using the data obtained using CardInfo.

Base banks

The following data is known about each bank in the base of the plugin:

• The path to the logo of the bank;
• Bank name in English;
• The name of the bank in the language of the country in which the bank operates;
• Links to the bank site;
• The colors in which it is worth coloring the form for this bank;
• The color of the text that will look good on the form and be combined with the logo;
• Logo style: white, black or color (you need to select the appropriate logo type, see this in the next section);
• The list of six-digit prefixes of “BIN” cards corresponding to this bank;

By BIN (prefix) and it is determined to which bank the user's card belongs. There are 2573 prefixes in total. On average, there are 52 prefixes per bank.

The site http://www.banki.ru/ has information about 560 Russian banks, if I had found the prefixes for all banks, the plugin file would have weighed a lot of megabytes. If I downloaded and processed 560 logos, picked up 560 times the colors for the form and the color of the text, I would rather die of sadness than lay out this plugin.

Therefore, it was decided to take some optimal number of banks, let it be 50. I opened the list of banks sorted by financial rating. and took the first 50 banks that issue credit or debit cards. In general, all the most popular banks hit the base.

I took the prefixes from the BIN Codes website . Perhaps some prefixes will be missed, some will incorrectly determine the bank, but this will be the exception rather. BIN Codes has a paid API, and if they take money, it means they are most likely done less efficiently. I also compared the presence of some prefixes in the databases of different sites with the prefixes and BIN Codes. Their API allows you to only determine the bank by the prefix, and I faced the inverse problem. I wrote to them that I want to create CardInfo.js and I need the prefixes of 50 Russian banks, I am ready to pay, but I don’t understand what to do, given that your IPA cannot help me. And they, God bless them, said that I can simply use the section on their website that solves the problem, but is not reflected in their API yet, in general, the prefixes were obtained for free.

Information on each bank is contained in a separate JSON file, in the “banks” folder. When I created the base of these files, I did not go on to the next until I filled out all the fields in one file and downloaded the logo. At some point there were a lot of files and I stopped understanding how many banks already exist in my database. I checked it, looked at the information about the folder and saw there the number of files inside the folder. When they became 50, I stopped. But it turned out that there was a hidden file “.DS_Store” which itself is created in almost all the folders on poppies, and for some reason, it stopped being displayed even with the display of hidden files turned on. Now I have everything ready, but I realized that I did not finish one bank. But I’m already turning back on all these banks, so let 49 remain :–)

Bank Logos

I tried to download as many logos in SVG format as possible so that when scaling they looked better, but some could be found only in PNG. All logos in the original size and format are in the “src / banks-logos” folder, all SVG logos were copied unchanged into the “dist / banks-logos” folder, and all SVG and PNG were converted to PNG and cropped to 600 × 200 In general, in the folder “dist / banks-logos” there is a logo for each bank in PNG format, and for some also in SVG. You can cut the logos yourself by calling the npm run build-banks-logos command and transfer the settings to it, see the documentation for details.

The shape is especially beautiful if the logo is white, because then you can paint the shape in bright colors. Therefore, when it was possible, I edited the logo and repainted it in white. And for the Russian Regional Development Bank, I had to generally draw the logo myself, because on the Internet I could not find their logo in more or less needed form.

Type Logos

All type logos are in both SVG and PNG. Types are as follows: Visa, MasterCard, American Express, Diners Club, Discover, JCB, UnionPay, Maestro or MIR. For each type there is a logo in three styles: white, black and color. I borrowed the first 8 logos from Stuart Colville , the MIR payment system logo from Yevgeny Katyshev , and the same logo brought the general style on my own.

CardInfo has a “brandLogoPolicy” setting that determines the style of the logo type. The two coolest values ​​for it are “auto” and “mono”. About the rest in the documentation.

auto

It works so that if the bank logo is black / white / color, then the type logo will be black / white / color. It looks spectacular, the form becomes alive, and everything is combined on it.

mono

If the background is light, the type logo will be black, if the background is dark, then the logo will be white.

Conclusion

With CardInfo you can make cool forms for accepting bank cards. I tried to make this plugin flexible, convenient, lightweight, reliable and useful, and I think I did it. I hope you will use this plugin with pleasure, and conversions on your payment pages will increase. If the pleasure of using the plug-in starts going off-scale, you can thank me on a special page for expressing thanks to Sergey Dmitriev :–)

Feedback

• It is interesting to hear your opinion about the plugin and wishes for further development.
• If someone starts watching the code and wants to comment on something, I will be glad to hear criticism.
• I first wrote tests, and here it would be especially interesting to get feedback
• I'm going to add banks in other countries and start selling the plugin through CodeCanyon or something like that. But I just can not understand at all, can I even sell it? I am confused by the fact that the plugin uses the logos of banks that do not belong to me, and the logos of the types that were mainly painted by Stewart and distributed under the MPL 2.0 license.