Widget for getting tokenized bank account details

Use the widget to save bank account details with Bank 131.

What the widget looks like

Code example

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>Widget for bank account tokenization</title>

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

    <!-- Connecting script and widget styles -->
    <link href="https://widget-demo.bank131.ru/bank-account-tokenizer.css" rel="stylesheet" />
    <script src="https://widget-demo.bank131.ru/bank-account-tokenizer.js" defer></script>
  </head>
  <body>
    <main>
      <div id="bank131-bank-account-tokenizer"></div>
    </main>

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

        const bankAccountTokenizer = new Bank131BankAccountTokenizer(
          publicToken,
          {
            /*
            // An example of widget text settings
            texts: {
              // Label field Account number. The default is "Account number".
              bankAccountLabel: '',
              // BIC field label. The default is "BIC".
              bikLabel: '',
              // Account linking button. The default is "Link account".
              submitButtonLabel: '',
              validationErrors: {
                invalidBankAccount: '',
                invalidBankAccountLength: '',
                invalidBikLength: '',
                isRequired: ''
              },
            },
            styles: {
              bankAccountTokenizer: {
                // Styles for the inline input field container.
                inputContainer: { background: 'cornsilk' },
                // Styles for the input field.
                inputField: { background: 'cornsilk' },
                // Styles for the input field when focused.
                inputFieldIsFocused: { background: 'white' },
                // Styles for the error input field.
                inputFieldIsInvalid: { background: 'red' },
                // Styles for the input field placeholder.
                inputFieldPlaceholder: { color: 'blue' },
              },
            }
            */
          }
        );

        bankAccountTokenizer.onReady = function () {
          console.log('Bank account tokenizer is ready.');
        };

        bankAccountTokenizer.onTokenizationStart = function () {
          console.log('The tokenization process was started.');
        };
        bankAccountTokenizer.onTokenizationFail = function () {
          console.log(
            'The tokenization process was finished with an error',
            error
          );
        };
        bankAccountTokenizer.onTokenizationSuccess = function (result) {
          console.log(
            'The tokenization process was successfully finished.',
            result
          );
        };

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

How the widget operates

You embed the widget on your website. The user enters their account details, Bank 131 stores them in its system, and returns a payout token to you.

You can save this token and use it for future payouts to the same account. This is secure.

info

You can find out information about a token using the token/info method.

Initializing the widget

Step 1. Get a public token

Send a request to Bank 131 to create a token (token), specifying the widget type as tokenize_widget. The response will contain your public token.

Step 2. Set up scripts and CSS styles

Include the widget's script (JS) and styles (CSS). The URLs differ between testing and live operations:

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

<!-- For real operations -->
<link href="https://widget.bank131.ru/bank-account-tokenizer.css" rel="stylesheet" />
<script src="https://widget.bank131.ru/bank-account-tokenizer.js" defer></script>

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

Step 3. Add a container

Add a container with a unique ID to place the widget on the page:

<div id="bank131-bank-account-tokenizer"></div>

Step 4. Create an instance of the class

Pass the public token to the Bank131BankAccountTokenizer class constructor:

const bankAccountTokenizer = new Bank131BankAccountTokenizer('public token');

You can also pass settings for widget texts and styles for the input field to the constructor:

const bankAccountTokenizer = new Bank131BankAccountTokenizer(
    'public token',
    {
        texts: {
            // Label field Account number. The default is "Account number".
            bankAccountLabel: '',
            // BIC field label. The default is "BIC".
            bikLabel: '',
            // Account linking button. The default is "Link account".
            submitButtonLabel: '',
            validationErrors: {
              invalidBankAccount: '',
              invalidBankAccountLength: '',
              invalidBikLength: '',
              isRequired: ''
            },
        },
        styles: {
            bankAccountTokenizer: {
            // Styles for the inline input field container.
            inputContainer: { background: 'cornsilk' },
            // Styles for the input field.
            inputField: { background: 'cornsilk' },
            // Styles for the input field when focused.
            inputFieldIsFocused: { background: 'white' },
            // Styles for the error input field.
            inputFieldIsInvalid: { background: 'red' },
            // Styles for the input field placeholder.
            inputFieldPlaceholder: { color: 'blue' },
        },
    }
);

The following key event handlers can be used:

bankAccountTokenizer.onReady = function () {
    // Handler for the widget's readiness event.
};

bankAccountTokenizer.onTokenizationStart = function () {
   // Event handler that occurs when the tokenization process starts.
};

bankAccountTokenizer.onTokenizationFail = function () {
   // Event handler that occurs when the tokenization process fails.
};

bankAccountTokenizer.onTokenizationSuccess = function (result) {
   // Event handler for the successful completion of the tokenization process.
};

Step 5. Display the widget

Call the render() method:

bankAccountTokenizer.render();

How to make a payout with the widget ot by token >