Skip to main content

Widget for getting tokenized bank card details

This widget allows you to securely perform bank card operations.

You connect the widget to the page in your service, display it to the user, and get hashed card details. You can then use these details to perform payouts.

You can store the hashed card details and use them for further payouts to this card. You can find information about the hash or card through the token/info method. This includes receiving the last 4 digits of the card, in order to show the user the payment destination.

What the widget looks like​

Initial state of the widget​

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 get a public 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 widget form, pass the public token created to work with the widget into the constructor.

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

Process the successful hash reception event:

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

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

cardTokenizer.render();

Widget API​

Bank131CardTokenizer​

Widget 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.submitButtonLabelstringSubmit 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 hashing process.

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

Event handler: cardTokenizer.onTokenizationSuccess​

Handles the event occurring when the hashing 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.tokenstringHashed card number

Event handler: cardTokenizer.onTokenizationFail​

Handles the event occurring when the hashing 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.

How to make a payout using the widget >





Ask AI