Платёжный виджет SberPay для размещения оплаты на странице продавца

Модуль предназначен для размещения на страницах продавца с целью организации оплаты услуг посредством использования сервиса Сбербанк Онлайн, не покидая страницу магазина.

Платёжный виджет SberPay поддерживает работу с диплинком, push-уведомлением и СМС-уведомлением.

Если клиент оплачивает посредством мобильного устройства, то оплата будет производиться по диплинку.
Если клиент оплачивает с десктоп устройства - оплата производится по push-уведомлению.
При наличии соответствующей пермиссии у мерчанта также возможна оплата по СМС-уведомлению.

Подключение

На сайте продавца

Для подключения функционала на своем сайте продавец должен разместить на своей странице следующий код в блоке <head></head>: 

<head>
    ...
	<script src="https://securecardpayment.ru/payment/modules/sbol-pay/sbol-pay.js"></script>
	...
</head>

На платежной странице

Для подключения функционала на платежной странице продавец должен разместить на своей странице следующий код в блоке <head></head>: 

<head>
    ...
	<script src="../../modules/sbol-pay/sbol-pay.js"></script>
	...
</head>

Это относится к платежным страницам, находящимся на одном из URL:

и которые не имеют логин rbs, sbersafe, sbersafe_id, sbersafe_cardholder, sbersafe_sberid - там этот модуль уже есть

Адрес скрипта на тестовом и боевом стенде

Инициализация скрипта

Инициализацию скрипта рекомендуется делать в конце документа, перед закрытием тега <body>, разместив аналогичный указанному ниже блок: 

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var sbolWidget = new window.SbolPay({
      // Селектор DOM-элемента на странице, куда будет добавлен виджет оплаты
      selector: '#sbol-pay-container',
      // Адрес, на который требуется перенаправить пользователя в случае успешной оплаты
      returnUrl: 'https://example-shop.com/success'
      // Адрес, на который требуется перенаправить пользователя в случае неуспешной оплаты
      failUrl: 'https://example-shop.com/fail'
      // Индивидуальный открытый ключ продавца
      token: 'j5d0bk0h860v407jg00806ab0p',
      // Сумма платежа в копейках
      amount: '123400',
      // Название магазина для отображения в окне виджета
      shopName: 'ООО «Промтовары»',
      // Номер заказа в системе магазина
      orderNumber: '123456',
    });
  });
</script>

Значение token можно получить в личном кабинете в разделе Настройки – Основные (см. ссылку).

Платежный виджет SberPay поддерживает двухстадийные платежи. Для регистрации двухстадийного платежа в скрипте необходимо указать параметр registerPreAuth со значением true. Пример скрипта: 

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var sbolWidget = new window.SbolPay({
      // Селектор DOM-элемента на странице, куда будет добавлен виджет оплаты
      selector: '#sbol-pay-container',
      // Адрес, на который требуется перенаправить пользователя в случае успешной оплаты
      returnUrl: 'https://example-shop.com/success'
      // Адрес, на который требуется перенаправить пользователя в случае неуспешной оплаты
      failUrl: 'https://example-shop.com/fail'
      // Индивидуальный открытый ключ продавца
      token: 'j5d0bk0h860v407jg00806ab0p',
      // Сумма платежа в копейках
      amount: '123400',
      // Название магазина для отображения в окне виджета
      shopName: 'ООО «Промтовары»',
      // Регистрация двухстадийного платежа. <<<<<<<<<<<<<<<<<<<
      registerPreAuth: 'true',
    });
  });
</script>

Доступные параметры инициализации виджета

Ниже представлен полный перечень параметров для инициализации скрипта. Помеченные как обязательные параметры должны быть обязательно указаны при инициализации и не имеют значения по умолчанию.

Параметр Обязательный Значение по умолчанию Описание

selector

Да -

Селектор DOM-элемента, куда будет размещен виджет оплаты.

token

Да -

Открытый ключ продавца.

Чтобы получить открытый ключ, обратитесь в техническую поддержку.

amount

Да -

Сумма заказа. Указывается в минорных единицах (в копейках).

Например для записи значения 10 руб. нужно указать значение «1000» (в формате строки)

returnUrl

Да -

Адрес, на который требуется перенаправить пользователя в случае успешной оплаты, а также в случае неуспешной оплаты (при отсутствии переданного параметра failUrl). Адрес должен быть указан полностью, включая используемый протокол (например, https://test.ru вместо test.ru).

Адрес нельзя указывать относительным путем, т.е. они не должны начинаться на «.» и «/». В противном случае вернется ошибка 4: «URL возврата некорректен». Например:

failUrl

Нет -

Адрес, на который требуется перенаправить пользователя в случае неуспешной оплаты. Адрес должен быть указан полностью, включая используемый протокол (например, https://test.ru вместо test.ru).

Адрес нельзя указывать относительным путем, т.е. они не должны начинаться на «.» и «/». В противном случае вернется ошибка 4: «URL возврата некорректен». Например:

Параметр необязательный. В таком случае при неуспешной оплате, так же как и при успешной оплате, будет происходить переход на returnUrl.

shopName

Нет -

Название магазина для отображения в окне виджета.

clientId

Нет -

Номер (идентификатор) клиента в системе магазина.

orderNumber

Да -

Номер заказа в системе магазина.

Необязательно только в случае подключения автоматической генерации номера заказа на шлюзе (для этого обратитесь в техническую поддержку).

description

Нет -

Описание заказа.

jsonParams

Нет -

Дополнительные параметры заказа в формате объекта.

В параметре запрещено передавать зарезервированные имена (в случае их передачи заказ может быть отклонен):

  • sbrf_spasibo:amount_bonus
  • sbrf_sbermiles:amount_bonus
  • loyaltyId
  • overridenClientId

cartItems

Нет -

Массив объектов для описания товаров в корзине.

Пример: 

[
  {
    // Описание товарной позиции
    name: 'Шариковая ручка',
    // Объект, описывающий общее количество товарных позиций
    quantity: {
      // Количество товарных позиций
      value: 1,
      // Мера измерения количества товарной позиции
      measure: "шт"
    },
    // Сумма стоимости всех товарных позиций указанного типа
    itemAmount: 23400,
    // Номер (идентификатор) товарной позиции в системе магазина
    itemCode: 'code_1',
    // Стоимость одной товарной позиции в минимальных единицах валюты
    itemPrice: 100
  },
  {
    name: 'Сыр. Российский',
    quantity: {
      value: 1.4,
      measure: "кг"
    },
    itemAmount: 100000,
    itemCode: 'code_2'
  }
]

onlyButton

Нет false

Признак того, что виджет будет отображаться одной кнопкой без контейнера с описанием.

flatButton

Нет -

Признак, который делает стиль кнопки вызова виджета плоской (вместо градиентной). Пример:

rowView

Нет false

Отображение виджета в виде линейного представления. Пример:

rowViewMinWidth

Нет 400

Значение ширины окна со страницей, при которой применяется стиль rowView (действителен только в случае выставления значения «rowView: true»)

phone

Нет -

Телефон клиента, осуществляющего оплату. Если телефон заранее известен, Вы можете его передать в опцию. В таком случае виджет не будет запрашивать телефон у пользователя, а сразу отправить подтверждение оплаты на указанный номер телефона.

noStyle

Нет false

Не добавлять на страницу стили, описывающие внешний вид для виджета. (На случай, если вебмастеру нужно будет назначить собственные стили для виджета).

Методы

Название Описание

destroy

Метод удаления инициированной кнопки. 

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var sbolWidget = new window.SbolPay({
        // Параметры
    });
 
    function funcExample() {
        sbolWidget.destroy();
    }
  });
</script>

.on

Метод для отслеживания состояния виджета. 

// Инициализация как обычно
const sbolPay = new window.SbolPay( ... );

// Обработка изменений статуса виджета
sbolPay.on('CHANGE_WIDGET_STATUS', function (event) {
  console.log('new status:', event.status, 'old status:', event.previousStatus);
});

Возможные состояния:

  • IDLE - модальное окно виджета закрыто
  • IN_PROGRESS - модальное окно виджета открыто

Пример: 

// Инициализация как обычно
const sbolPay = new window.SbolPay(...);

// Обработка изменений статуса виджета
sbolPay.on('CHANGE_WIDGET_STATUS', function(event) {
  if (event.status === 'IDLE') {
    // Пользователь закрыл модальное окно
  } else if (event.status === 'IN_PROGRESS') {
    // Пользователь открыл модальное окно
  }
});

Пример кода для страницы на стороне продавца с подключенным модулем:

Данный пример будет работать только на стороне продавца. Наличие PCI DSS у продавца не обязательно, так как в модуле отсутствуют карточные данные. 

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SBOL Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.3/jquery.inputmask.js"></script>
 
  <script src="https://3dsec.sberbank.ru/payment/modules/sbol-pay/sbol-pay.js"></script>
  <style type="text/css">
    body {
      padding: 20px;
    }
    h1 {
      font-size: 18px;
      margin-top: 40px;
    }
  </style>
</head>
<body>
  <h1>Оплата с вводом номера телефона в модуле</h1>
  <div id="container"></div>
 
  <h1>Оплата с вводом номера на странице продавца</h1>
  <div class="row">
    <div class="col-3">
     <div class="form-group">
       <label for="exampleInputEmail1">Номер телефона</label>
       <input type="text" id="phone" class="form-control">
     </div>  
    </div>
  </div>
  <div id="container_with_phone"></div>
  <script>
    // Дожидаемся когда все DOM-элементы загрузятся
    document.addEventListener("DOMContentLoaded", function() {
      $('#phone').inputmask({"mask": "+7(999) 999-9999"});
 
      // Инициализация скрипта для оплаты с вводом номера телефона внутри модуля
      var sbolWidget = new window.SbolPay({
        // Селектор DOM-элемента на странице, куда будет добавлен виджет оплаты
        selector: '#container',
        // Индивидуальный  открытый ключ продавца
        token: 'j5djbk3h86qv4k7jg40826abbp',
        // Сумма платежа в копейках
        amount: '123400',
        // Название магазина для отображения в окне виджета
        shopName: 'ООО «Промтовары»',
        returnUrl: 'http://yandex.ru'
      });
 
      // Инициализация скрипта для оплаты с вводом номера телефона на сайте продавца
      // Переинциализируется при изменении номера телефона и если он полностью заполнен
      $('#phone').on('input', function(e) {
        var rawPhone = $(this).val().replace(/\D/g,'').slice(1);
 
        // Проверка на длину номера. Поддерживаемый формат 9123456789
        if (rawPhone.length === 10) {
          var sbolWidgetPhone = new window.SbolPay({
            // Селектор DOM-элемента на странице, куда будет добавлен виджет оплаты
            selector: '#container_with_phone',
            // Индивидуальный  открытый ключ продавца
            token: 'j5djbk3h86qv4k7jg40826abbp',
            // Сумма платежа в копейках
            amount: '123400',
            phone: rawPhone,
            // Название магазина для отображения в окне виджета
            shopName: 'ООО «Промтовары»',
            returnUrl: 'http://yandex.ru'
          });
        }
      })
    });
  </script>
</body>
</html>

Пример подключения модуля SberPay на кастомной платежной странице: