Skip to main content

Widget for getting tokenized bank card details

This widget allows you to securely perform bank card operations without PCI DSS.

You connect the widget to the page in your service, display it to the user, and obtain their card details in tokenized form. You can then use these details to perform payouts.

Everything is secure: the input form is displayed in a frame, the details are protected by Bank 131's PCS DSS certificate, and all the operations are performed using a unique token.

The token containing these card details can then be stored and used for repeat payouts to this card via the token. You can find information about the token or card through the method token/info. This includes receiving the last 4 numbers of the card, in order to show the user the payment destination.

What the widget looks like​

Initial state of the widget​

alt-text

Code example: a page with a widget​

<!DOCTYPE html>

<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>Card number tokenization widget.</title>

    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="format-detection" content="telephone=no" />

    <!-- Linking the widget's script and styles. -->
    <link
      href="https://widget.bank131.ru/card-tokenizer.css"
      rel="stylesheet"
    />
    <script src="https://widget.bank131.ru/card-tokenizer.js" defer></script>
  </head>

  <body>
    <div id="bank131-card-tokenizer"></div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        if (!window.Bank131CardTokenizer) {
          return;
        }

        const cardTokenizer = new Bank131CardTokenizer('public token');

        cardTokenizer.onTokenizationSuccess = function (cardToken) {
          // Handling the event of successful token reception.
        };

        cardTokenizer.render();
      });
    </script>
  </body>
</html>

How to add a widget to a page​

To use widgets, you will need to connect our JavaScript library to the page and obtain a token (using the token method).

You need to link the widget's script and styles to the page.

<!-- In test environment -->
<link
  href="https://widget-demo.bank131.ru/card-tokenizer.css"
  rel="stylesheet"
/>
<script src="https://widget-demo.bank131.ru/card-tokenizer.js" defer></script>
<!-- For real payments -->
<link href="https://widget.bank131.ru/card-tokenizer.css" rel="stylesheet" />
<script src="https://widget.bank131.ru/card-tokenizer.js" defer></script>

2. Add a container with the widget​

<div id="bank131-card-tokenizer"></div>

3. Create an instance of the widget​

After linking the script to the page, the Bank131CardTokenizer class will appear in the global scope.

To create the tokenization form, pass the public token created to work with the widget into the constructor.

const cardTokenizer = new Bank131CardTokenizer('public token');

Action upon successful reception of the token:

cardTokenizer.onTokenizationSuccess = function (cardToken) {
  // ...
};

To display the form, call the render() method:

cardTokenizer.render();

Widget API​

Bank131CardTokenizer​

Tokenization form class constructor.

new Bank131CardTokenizer(publicToken[, options])
ParameterTypeDescription
PublicTokenStringMandatory. The public token
optionsObjectAdditional settings object.
options.containerHTMLElementThe container into which the form will be inserted. The default value is: <div id="bank131-card-tokenizer"></div>
options.textsObject
options.texts.cardNumberLabelStringA label for the card number input field. The default value is: "Card number"
options.texts.submitButtonLabelStringTokenization button label. The default value is "Link the card"

Method: cardTokenizer.render()​

This method displays the form on the page, in the container defined by the options.container parameter

cardTokenizer.render();

Event handler: cardTokenizer.onReady​

Handles the event of the form becoming ready for work.

cardTokenizer.onReady = function () {
  /* handler */
};

Event handler: cardTokenizer.onTokenizationStart​

Handles the event occurring at the start of the tokenization process.

cardTokenizer.onTokenizationStart = function () {
  /* handler */
};

Event handler: cardTokenizer.onTokenizationSuccess​

Handles the event occurring when the tokenization process finishes successfully.

cardTokenizer.onTokenizationSuccess = function (cardToken) {
  /* handler */
};
ParameterTypeDescription
cardTokenObject
cardToken.infoObjectAdditional card information object.
cardToken.info.card_networkStringPayment card network. Possible values: visa, mastercard, mir
cardToken.info.card_typeStringCard type. Additionally specifies the subbrand (visa_electron, maestro, mirmaestro)
cardToken.info.masked_card_numberStringMasked card number value, e.g. 424242******4242
cardToken.tokenStringCard number token

Event handler: cardTokenizer.onTokenizationFail​

Handles the event occurring when the tokenization process finishes unsuccessfully.

cardTokenizer.onTokenizationFail = function (error) {
  /* handler */
};

Widget customization​

Appearance​

You can link your own styles after the library ones and override them, like this:

<link href="https://widget.bank131.ru/card-tokenizer.css" rel="stylesheet" />
<link href="custom-styles.css" rel="stylesheet" />

Or this:

/* custom-styles.css */

.bank131-Field__label {
  color: green;
}

You cannot yet change the appearance of the value entered into the form (inside the iframe). This option will be added later.

Texts​

You can change the text of the form using the options.texts parameter in the Bank131CardTokenizer constructor.