Payment form widget

You will need to use the payment form widget to perform payouts if you do not have PCI DSS.

You add the widget to the page, show it to the user, and the user then interacts with the widget, going through all the payment steps from beginning to end. The user first securely enters their card details, and then sees a message telling them that the payment has been successful (or an error message if anything goes wrong).

You need to create a payment session, and the widget does the rest: it will send the payment request, redirect the user to the appropriate address, and show them the screen with the result of the operation.

How to perform a payment through the payment form

What the widget looks like

Regular widget

Payment form widget

With a checkbox for enabling recurrent payments

Automatic payment widget

Code example: a page with a widget

<!DOCTYPE html>

<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>Payment form widget</title>

    <link href="https://widget.bank131.ru/payment-form.css" rel="stylesheet" />
    <script src="https://widget.bank131.ru/payment-form.js" defer></script>
  </head>

  <body>
    <div id="bank131-payment-form"></div>

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

        const paymentForm = new Bank131PaymentForm('publicToken', {
          isCvcMasked: true,
          });

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

How to add a widget to a page

1. Link the scripts and styles

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

<!-- For real payments -->
<link href="https://widget.bank131.ru/payment-form.css" rel="stylesheet" />
<script src="https://widget.bank131.ru/payment-form.js" defer></script>

2. Add a container with the widget

<div id="bank131-payment-form"></div>

3. Create an instance of the widget

Once the script is linked to the page, the Bank131PaymentForm class will appear in the global scope. To create the payment form, pass the public token obtained to work with the widget to the constructor.

const paymentForm = new Bank131PaymentForm('public token');

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

paymentForm.render();

Widget API

Bank131PaymentForm

Payment form class constructor.

const paymentForm = new Bank131PaymentForm(publicToken[, options])
Parameter Type Description
publicToken String Mandatory. The public token
options Object Additional settings object.
options.container HTMLElement The container into which the form will be inserted.
The default value is:
<div id="bank131-payment-form"></div>

Method: paymentForm.render()

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

paymentForm.render([options])
Parameter Type Description
options Object Additional settings object.
options.container HTMLElement The container into which the form will be inserted.
The default value is:
<div id="bank131-payment-form"></div>

Event handler: paymentForm.onReady

Handles the event of the form becoming ready for work.

paymentForm.onReady = function () { /* handler */ }

Event handler: paymentForm.onPaymentStart

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

paymentForm.onPaymentStart = function () { /* handler */ }

Event handler: paymentForm.onPaymentSuccess

Handles the event occurring when the payment process finishes successfully.

paymentForm.onPaymentSuccess = function () {
  /* handler */
};

Event handler: paymentForm.onPaymentFail

Handles the event occurring when the payment process finishes unsuccessfully.

paymentForm.onPaymentFail = function (error) { /* handler */ }

Widget customization

Hide CVV/CVC details

You can customize the CVV/CVC field of the widget to make it display only the latest digit entered by customers and mask the others entered before with *. To do this, add the isCvcMasked flag into the widget constructor, as follows:

const paymentForm = new Bank131PaymentForm('publicToken', {
         isCvcMasked: true,
         });

Appearance

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

<link href="https://widget.bank131.ru/payment-form.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 values entered inside the iframe. This functionality will be added later.

← Widget to get card detailsWidget for linking a self-employed person to the Bank →