Перейти к основному содержимому

Оплата через iFrame

Об iFrame​

Вариант оплаты через iFrame позволяет оставить пользователя на сайте магазина и открыть платёжную форму Robokassa во всплывающем окне или встроенном блоке. Его используют на сайтах, а при наличии технической возможности — и в мобильных приложениях или webview. На этой странице собраны требования к подключению, примеры кода и демонстрация пользовательского сценария.

Попробуйте демо iFrame​

Дизайн кнопки оплаты может быть задан интернет-магазином. Использование данной функции предполагает небольшую настройку программного кода на стороне интернет магазина.

к сведению

В демо используется тестовый магазин «robo-demo». Параметры и контрольная сумма подходят только для примера: замените их на значения из своего личного кабинета перед запуском в продакшн.

Подключение скрипта​

Добавьте на страницу с кнопкой оплаты подключение JavaScript-файла Robokassa. Скрипт должен располагаться в основной части страницы рядом с кнопкой или виджетом оплаты.

<script type="text/javascript" src="https://auth.robokassa.ru/Merchant/bundle/robokassa_iframe.js"></script>
Важно

Скрипт должен загружаться только один раз на странице. Если iFrame отображается в модальном окне, подключайте его в общем шаблоне, чтобы не добавлять <script> при каждом открытии.

Запуск Robokassa.StartPayment​

Метод Robokassa.StartPayment вызывает отрисовку платёжной формы. Его удобно повесить на обработчик нажатия кнопки «Оплатить».

<script type="text/javascript" src="https://auth.robokassa.ru/Merchant/bundle/robokassa_iframe.js"></script>
<input
  type="submit"
  value="Оплатить"
  onclick="Robokassa.StartPayment({
    MerchantLogin: 'demo',
    OutSum: '11.00',
    InvId: 10,
    Description: 'Оплата заказа в Тестовом магазине ROBOKASSA',
    Shp_Item: '1',
    Culture: 'ru',
    Encoding: 'utf-8',
    SignatureValue: '3925b771e47d405cbcbb492daa936824'
  })"
/>

Обязательные параметры​

ПараметрЗначение
MerchantLoginОбязательный. Идентификатор магазина в системе Robokassa.
OutSumОбязательный. Сумма заказа в рублях. Используйте точку в качестве разделителя: например, 123.45.
SignatureValueОбязательный. Контрольная сумма в шестнадцатеричном виде. Рассчитывается из строки MerchantLogin:OutSum:InvId:Пароль#1 (а также пользовательских параметров Shp_*, если они передаются) с использованием настроенного метода хэширования, выбранного в настройках магазина.
DescriptionНеобязательный. Краткое описание покупки. Допускаются буквы русского и английского алфавита, цифры и знаки препинания (до 100 символов).
InvIdНеобязательный. Номер счёта или заказа в магазине.
CultureНеобязательный. Язык интерфейса платёжной формы. Возможные значения: ru — русский, en — английский. Если параметр не передан, используется язык браузера покупателя.
IsTestНеобязательный. Показывает, является ли платеж тестовым (1) или реальным (0).
подсказка

Пользовательские параметры Shp_* возвращаются в уведомлениях Robokassa, если вы передали их при старте оплаты. Подробнее см. в описании параметров сценария.

примечание

В демо-платеже дополнительно передаётся параметр Receipt с JSON-описанием товара, преобразованным через encodeURIComponent. Этот параметр нужен для онлайн-кассы и должен формироваться в соответствии с требованиями 54-ФЗ.

Пример с Robokassa.Render и параметром Settings​

Метод Robokassa.Render позволяет заранее настроить внешний вид платёжного интерфейса. Передайте параметр Settings в формате JSON, сериализованный функцией JSON.stringify.

<script type="text/javascript" src="https://auth.robokassa.ru/Merchant/bundle/robokassa_iframe.js"></script>
<input
  type="submit"
  value="Оплатить"
  onclick="Robokassa.Render({
    MerchantLogin: 'robo-demo',
    OutSum: '11',
    InvId: '',
    Description: 'Оплата заказа в Тестовом магазине ROBOKASSA',
    Culture: 'ru',
    Encoding: 'utf-8',
    Settings: JSON.stringify({ PaymentMethods: ['BankCard', 'SBP'], Mode: 'modal' }),
    SignatureValue: '00c6675e103f387ae5a3c0ba80695b98'
  })"
/>

Что можно передать в Settings​

ПараметрОписание
PaymentMethodsМассив допустимых способов оплаты. Например, BankCard — банковские карты, SBP — система быстрых платежей.
ModeРежим отображения интерфейса. Значение modal открывает окно поверх контента, widget встраивает форму в указанную область страницы (нужно передать идентификатор элемента).

Настройки можно комбинировать: ограничьте список методов оплаты, выберите модальный или встроенный сценарий и отрисуйте интерфейс в нужном месте страницы.

Режим widget и передача блока страницы​

Если в Settings.Mode указано значение widget, передайте идентификатор блока в качестве второго аргумента Robokassa.Render. Вызов выглядит как обычный запуск, но весь объект параметров обрамлён скобками, а идентификатор блока указывается после объекта в кавычках.

<button id="paymentButton" type="button" onclick="Robokassa.Render({
  MerchantLogin: 'robo-demo',
  OutSum: '11.00',
  InvId: 10,
  Description: 'Оплата заказа в Тестовом магазине ROBOKASSA',
  Shp_Item: '1',
  Culture: 'ru',
  Encoding: 'utf-8',
  Settings: JSON.stringify({
    PaymentMethods: ['BankCard', 'SBP'],
    Mode: 'widget'
  }),
  SignatureValue: '648b0f9d83c5a4d2e5420b9f425a9210'
}, 'first-block')">
  Оплатить
</button>

Идентификатор блока (first-block) задаётся при создании страницы и может быть любым, главное — совпадение с id контейнера.

Важно

Виджет iFrame адаптируется под размеры блока только начиная от ширины 320 пикселей. При меньшем размере отображение может быть некорректным. Отрисовка внутри блока начинается после нажатия кнопки «Оплатить», то есть при вызове скрипта iFrame.

Полный пример разметки​

<!-- Первый блок с идентификатором -->
<div class="box1" id="first-block">
  Это первый блок
</div>
<!-- Второй блок -->
<div class="box2">Это второй блок</div>

<!-- Скрипт robokassa_iframe.js -->
<script src="https://auth.robokassa.ru/Merchant/bundle/robokassa_iframe.js"></script>

<!-- Кнопка, которая рендерит виджет внутри первого блока -->
<button id="paymentButton" type="button" onclick="Robokassa.Render({
  MerchantLogin: 'robo-demo',
  OutSum: '11.00',
  InvId: 10,
  Description: 'Оплата заказа в Тестовом магазине ROBOKASSA',
  Shp_Item: '1',
  Culture: 'ru',
  Encoding: 'utf-8',
  Settings: JSON.stringify({
    PaymentMethods: ['BankCard', 'SBP'],
    Mode: 'widget'
  }),
  SignatureValue: '648b0f9d83c5a4d2e5420b9f425a9210'
}, 'first-block')">
  Оплатить
</button>