Skip to main content

Widget for getting tokenized bank account details

The widget for bank account tokenization is used to save the bank account details in the bank, while the token will be stored with you.

You add the widget to a page. Once the user fills in the bank account number, you will be able to retrieve the tokenized data.

You can find out information about a token using the token/info method. The token's validity period is unlimited. To tokenize an account, use the tokenize method.

Paying via payment form, step by step

What the widget looks like​

Initial state of the widget​

Code example: a page with the widget​

<!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: '',
            },
            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 (error) {
          console.log(
            'The tokenization process was finished with an error',
            error
          );
        };
        bankAccountTokenizer.onTokenizationSuccess = function (bankAccountToken) {
          console.log(
            'The tokenization process was successfully finished.',
            bankAccountToken
          );
        };

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

How to add the widget to a page​

To use the widget, 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/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>

2. Add a container with the widget​

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

3. Create an instance of the widget​

After linking the script to the page, the Bank131BankAccountTokenizer 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 bankAccountTokenizer = new Bank131BankAccountTokenizer('public token');

You can also pass settings for widget texts and styles for the input field to the constructor of the bank account tokenization form class.

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: '',
        },
        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 event handlers can be used to handle token receipt events:

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

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

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

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

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

bankAccountTokenizer.render();