Documentation

Documentation

  • Bank 131 API
  • Languages iconEnglish
    • Русский

›Widgets

131 Documentation

  • API features
  • Where to begin

Introduction to API

  • Interaction
  • API libraries
  • Testing
  • Version history

How Payouts Work

  • Features
  • How it all works
  • Main payout scenario
  • Payout refunds
  • The Self-employed

    • Payouts to the self-employed
    • Linking the self-employed
    • Fiscalization

    Payout Methods

    • To a Russian bank card
    • To a Russian bank account
    • To a QIWI Wallet
    • To a YooMoney (Yandex.Money)
    • To the Russian Federal Tax Agency
    • Via FPS by a phone number

    Payout Scenarios

    • Payout to a card via widget
    • Payout from a nominal account to a bank card
    • Single-request payout
    • Payout to a card with PCI DSS
    • Payout to a self-employed person with fiscal receipt

How Payments Work

  • Features
  • Payment process
  • Payments via bank card
  • Payments with later capture
  • Refunds
  • Recurring payments
  • Payments via FPS by QR code
  • Payments via Telegram

    • How to create your Telegram bot
    • How to connect your Telegram bot
    • How to setup your Telegram bot

    Split Payments

    • Features and options
    • Split payments out of the box
    • Split payments using API

    Payment Scenarios

    • Paying via payment form
    • Paying with PCI DSS
    • Single-request payment

Widgets

  • Widget to get card details
  • Payment form widget
  • Widget for linking a self-employed person to the Bank

Passport Verification

  • Features
  • Interaction
  • Methods

    • Verification request
    • Verification status
  • Response and errors

Reports

  • Payouts report
  • Payments report
  • Monthly report

API Reference

  • Objects
  • Methods
  • Webhooks
  • Error codes

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 →
  • What the widget looks like
  • Code example: a page with a widget
  • How to add a widget to a page
  • Widget API
    • Bank131PaymentForm
    • Method: paymentForm.render()
    • Event handler: paymentForm.onReady
    • Event handler: paymentForm.onPaymentStart
    • Event handler: paymentForm.onPaymentSuccess
    • Event handler: paymentForm.onPaymentFail
  • Widget customization
    • Hide CVV/CVC details
    • Appearance
Documentation
Documentation
PayoutsPaymentsAPI ReferenceService documents
Step by step
Payout to a card via widgetPayout to a card with PCI DSSPayout to the self-employed Paying via payment form
Get in touch
Ideas and partnerships — partners@131.ruMedia — press@131.ru
© 2023 Bank 131