Оплата через 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` встраивает форму в указанную область страницы (нужно передать идентификатор элемента).

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

Об iFrame​

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

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

Запуск Robokassa.StartPayment​

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

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

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