Skip to main content

SberPay payment widget

Our SberPay payment widget allows you to accept payments without entering card details.

Example of a page with the widget
<!DOCTYPE html>

<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title>SberPay payment</title>

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

    <!-- Connecting the widget script and styles. -->
    <link href="https://widget.bank131.ru/sber-pay-payment.css" rel="stylesheet" />
    <script src="https://widget.bank131.ru/sber-pay-payment.js" defer></script>
  </head>

  <body>
    <main>
      <div id="bank131-sber-pay-payment"></div>
    </main>

    <script>
      const publicToken = 'publicToken'; // public token from the token request

      document.addEventListener('DOMContentLoaded', function () {
        if (!window.Bank131SberPayPayment) {
          return;
        }

        const widget = new Bank131SberPayPayment(publicToken);

        widget.onReady = function () {
          console.log('SberPayPayment is ready.');
        };

        widget.onSberPayStart = function () {
          console.log('SberPayPayment started.');
        };
        widget.onSberPayFail = function (error) {
          console.log('SberPayPayment failed', error);
        };
        widget.onSberPaySuccess = function () {
          console.log('SberPayPayment succeeded.');
        };

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

How the widget works​

You embed the widget on your website. The widget opens a SberPay window, where the user authorizes and confirms the payment. After that, the widget displays the status and result of the operation.

Widget initialization​

Step 1. Get a public token​

Send a request to Bank 131 to create a token (token), passing the widget type (sber_pay_widget) in it. In the response you will receive a public token.

Step 2. Connect the script and styles​

Connect the widget script (JS) and styles (CSS):

<!-- For operations with real data -->
<link href="https://widget.bank131.ru/sber-pay-payment.css" rel="stylesheet" />
<script src="https://widget.bank131.ru/sber-pay-payment.js" defer></script>

After connecting the script, the Bank131SberPayPayment class will appear in the global scope.

Step 3. Add a container​

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

<div id="bank131-sber-pay-payment"></div>

Step 4. Create a class instance​

Pass the public token to the constructor of the Bank131SberPayPayment class:

const widget = new Bank131SberPayPayment('publicToken');

Step 5. Render the widget​

Call the render() method:

widget.render();

Widget API​

Constructor: Bank131SberPayPayment​

Widget class constructor:

const widget = new Bank131SberPayPayment(publicToken)
ParameterTypeMandatoryDescription
publicTokenstring+Public token

Method: widget.render()​

It renders the widget inside the container specified in id="bank131-sber-pay-payment":

widget.render();

Event handler: widget.onReady​

It is called when the widget is ready to work:

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

Event handler: widget.onSberPayStart​

It is called at the start of the payment process via SberPay:

widget.onSberPayStart = function () { /* handler */ }

Event handler: widget.onSberPaySuccess​

It is called when the payment is successfully completed:

widget.onSberPaySuccess = function () { /* handler */ }

Event handler: widget.onSberPayFail​

It is called when the payment fails:

widget.onSberPayFail = function (error) { /* handler */ }

How to accept a payment via SberPay >