DEPRECATED

The code is no longer supported. The API will stop working on October 1, 2024. Archives with all the data (BINs, banks, logos) have been made freely available: https://github.com/svagcrew/binking/tree/master/archives. You can continue using the SDK with these archives. If you previously used the API, download the archives and use them instead of the API.

BinKing

BinKing is a King banking card data fill-in form. BinKing allows you to get the bank logo, colors, phone number, brand logo and more by card number. BinKing also helps in the validation of these forms. Use BinKing to create a smart and responsive card acceptance form. Increase conversion, increase user loyalty, reduce the workload of the support department.

To use the plugin, you need an API key or data from the archive. The key and archive can be obtained in your personal account on the BinKing website. See the list of available banks and countries on this page.

Plugin demonstration is available here: JSFiddle. This demonstration is a part of Creating a payment form comprehensive guide. We talk about show how to apply in the plugin, how to set an automatic cursor move, how to provide a form validation, etc. Article contains full code samples, you can just copy and use it. You can easily modify it according to your needs

Quick start

The example given below will help you immediately understand what is special here and how the main function of the plugin works. The example is designed for users who are going to use the plugin in conjunction with the API. See below for other ways to customize the plugin.

import binking from "binking";

binking.setDefaultOptions({
  strategy: "api",
  apiKey: "YOUR_API_KEY",
});

var $form = document.querySelector(".form");
var $bankLogo = document.querySelector(".bank-logo");
var $brandLogo = document.querySelector(".brand-logo");
var $cardNumberField = document.querySelector(".number-field");
var $codeField = document.querySelector(".code-field");
var $fields = document.querySelectorAll(".field");

$cardNumberField.onkeyup = () => {
  var cardNumber = $cardNumberField.value;
  binking(cardNumber, function(result) {
    $form.style.background = result.formBackgroundGradient;
    $form.style.color = result.formTextColor;
    $fields.forEach($field => (field.style.borderColor = result.formBorderColor));
    $codeField.placeholder = result.codeName || "";
    if (result.formBankLogoBigSvg) $bankLogo.src = result.formBankLogoBigSvg;
    $bankLogo.style.display = result.formBankLogoBigSvg ? "block" : "none";
    if (result.formBrandLogoSvg) $brandLogo.src = result.formBrandLogoSvg;
    $brandLogo.style.display = result.formBrandLogoSvg ? "block" : "none";
  });
};

If you need more “lively” sample, suitable for a real project, again, we recommend to check out Creating a payment form comprehensive guide.

Plugin apply

You can apply the plugin with $ yarn add binking or $ npm i binking --save and then import it in your code

import binking from "binking";

You can apply the link CDN https://unpkg.com/binking

<script src="https://unpkg.com/binking"></script>

After this, binking function will be available for global vision.

Settings

You can change default setting or transmit them at every call. To change default settings, call:

binking.setDefaultOptions({
  // New settings object
});

General setting:

brandsLogosPath default "https://static.binking.io/brands-logos/"
Path to files with brand logos. If you have uploaded brand logos to your server, change this path, otherwise brand logos will be distributed from our server. The brands folder is included in the files of this brand-logos repository.
brandLogoPolicy default "auto"
This parameter defines the brand logo’s style. Available options: "original", "inverted", "auto".
- "original"
  Colorized logo
- "inverted"
  White logo
- "auto"
  Logo is colored, if a bank’s brand logo (formLogoScheme) is colored ("original") Logo is white, if a bank’s logo (formLogoScheme) is white ("inverted") Logo is colored, if bank is unable to recognize
maskDigitSymbol default is "0"
Symbol denoting the digit in the mask of the card number specified in the instance property cardNumberMask.
maskDelimiterSymbol default " "
A symbol denoting a separator in the mask of the card number specified in the instance property cardNumberMask.
gradientDegrees default 135
Degree under which the gradient is specified in the instance property formBackgroundGradient.

Settings when using API

You can read more about how the API works in the Datasheet. The plugin helps to minimize API requests. Just one request per paying user is enough. The API request occurs once and only when the user has entered a sufficient number of characters to identify the bank to which his card belongs.

apiKey required field You API key that you obtained on your acount
sandbox default false
f set to true, then the request will be free. When using the binking function, the bank will be determined only if the cardNumber is passed the card number starting with these digits: 402333 (Sberbank), 546918 (Sberbank), 400812 (Rosbank), 677721 (Rosbank). When using binking.getBank and binking.getBanks, banks will be found only if the aliases "ru-sberbank" and"ru-rosbank" are passed.

Settings when using the archive

If you purchased an archive and decided to use it on the client side, you need to set the following settings:

strategy default "api"
Set "archive"
banksLogosPath default ""
Path to files with bank logos. Upload bank logos to your server and specify the path to them in this property.
sync default false If set to true then binking, binking.getBank and binking.getBanks functions can be used synchronously.

You also need to transfer bank and bin data to the plugin.

binking.addBanks(banks);
binking.addBins(bins);

The variable banks should contain an object from a JSON file with banks. The bins variable should contain an object from a JSON file with bins. In order to transfer an object from a JSON file, you can customize your javascript collector, or simply copy the entire contents of the file, like this:

binking.addBanks(/* file contents banks-all.json */);
binking.addBins(/* file contents bins-all.json */);

To learn more about file contents and archives read Datasheet.

Settings when using your API

If you purchased the archive and decided to make your own API for yourself, specify your endpoints in the settings. An example of implementing your own API is described in Datasheet.

apiFormUrl default "http://api.binking.io/form"
apiBankUrl default "http://api.binking.io/bank"
apiBanksUrl default "http://api.binking.io/banks"

Usage

Making a form

Use one of the following options to get an object with data for form layout.

binking(cardNumber, function(result) { /* ... */ });
binking(cardNumber, options, function(result) { /* ... */ });
binking(cardNumber).then(function(result) { /* ... */ });
binking(cardNumber, options).then(function(result) { /* ... */ });
// The options below work only if the settings specify {strategy: "archive", sync: true}
var result = binking(cardNumber);
var result = binking(cardNumber, options);

Pass the card number as cardNumber. It can be either a number or a string, spaces are allowed in the string. Pass the card number whenever the value that the user enters into the card number field changes. To determine the brand of the card and all the properties associated with it, 1 character may be enough, the bank can be determined after transmitting 6 characters or more.

The variable result will store an object with all the necessary data for the layout of the form.

bankAlias default null
The short name of the bank in English, all letters are small, no spaces, at the beginning the country prefix. For example: "ru-sberbank".
bankName default null
Bank’s name in English.
bankLocalName default null
The name of the bank in the language of the country in which the bank operates.
bankCountry default null Country code in which this bank operates. "ru" - Russia.
bankSite default null Link to the bank's website.
bankPhone default null Bank phone.
bankLogoBigOriginalSvg default null
bankLogoBigOriginalPng default null Link to the large color bank logo
bankLogoBigInvertedSvg default null
bankLogoBigInvertedPng default null Large white bank logo.
bankLogoSmallOriginalSvg default null
bankLogoSmallOriginalPng default null Small, square-shaped, colored bank logo.
bankLogoSmallInvertedSvg default null
bankLogoSmallInvertedPng default null Small white bank logo.
bankColor default null The main color of the bank.
bankColors default null An array with all the colors of the bank.
formBackgroundColor default "#eeeeee" The color for the background of the form.
formBackgroundColors default ["#eeeeee", "#dddddd"] Array of colors for the gradient background of the shape.
formBackgroundGradient default ["#eeeeee", "#dddddd"] Contains a line with the CSS background property value, by setting which you get a gradient from the colors specified in the formBackgroundColors field. The angle can be speci

Binking

Install / Use

README