With CardInfo you can create a beautiful form for receiving payments from the card. On the first six characters of the card, the bank will be determined (one of 49), the form will be repainted in the bank’s brand colors, the bank logo will appear in the upper left corner. The first symbols of the card will determine the type of card: Visa, MasterCard, American Express, Diners Club, Discover, JCB, UnionPay, Maestro or MIR. Now in the database only Russian banks, but soon will be added to the banks of the United States, Canada, England, Australia and New Zealand.

To substitute a random bank for the form, click here.

CardInfo is not tied to the appearance of the form for receiving a card, it only issues an object with additional information about the map based on the entered ones. Also included are logos of all banks and card types. The form itself can be created as you like.

To get an object with information about the map, you need to create an instance of the class CardInfo:

var cardInfo = new CardInfo('5244 6800 0000 0000');

The variable cardInfo will contain the following object:

  "bankAlias": "ru-tinkoff",
  "bankName": "Тинькофф Банк",
  "bankNameEn": "Tinkoff Bank",
  "bankCountry": "ru",
  "bankUrl": "",
  "bankLogo": "/vendors/bower_components/card-info/dist/banks-logos/ru-tinkoff.svg",
  "bankLogoPng": "/vendors/bower_components/card-info/dist/banks-logos/ru-tinkoff.png",
  "bankLogoSvg": "/vendors/bower_components/card-info/dist/banks-logos/ru-tinkoff.svg",
  "bankLogoStyle": "white",
  "backgroundColor": "#333",
  "backgroundColors": [
  "backgroundLightness": "dark",
  "backgroundGradient": "linear-gradient(135deg, #444, #222)",
  "textColor": "#fff",
  "brandAlias": "master-card",
  "brandName": "MasterCard",
  "brandLogo": "/vendors/bower_components/card-info/dist/brands-logos/master-card-white.svg",
  "brandLogoPng": "/vendors/bower_components/card-info/dist/brands-logos/master-card-white.png",
  "brandLogoSvg": "/vendors/bower_components/card-info/dist/brands-logos/master-card-white.svg",
  "codeName": "CVC",
  "codeLength": 3,
  "numberMask": "0000 0000 0000 0000",
  "numberGaps": [
  "numberLengths": [
  "numberNice": "5244 6800 0000 0000",
  "number": "5244680000000000",
  "numberSource": "5244 6800 0000 0000",
  "options": {
    "banksLogosPath": "/vendors/bower_components/card-info/dist/banks-logos/",
    "brandsLogosPath": "/vendors/bower_components/card-info/dist/brands-logos/",
    "brandLogoPolicy": "auto",
    "preferredExt": "svg",
    "maskDigitSymbol": "0",
    "maskDelimiterSymbol": " ",
    "gradientDegrees": 135

To better understand how CardInfo works, how you configure it, how to use it, and what data you can use with it, read the documentation on the GitHub.