# Платёжная страница

На платёжной странице покупатель оплачивает заказ: выбирает способ оплаты, заполняет данные плательщика и получает подтверждение. По умолчанию страница выглядит как сервис Инвойсбокс, но её можно брендировать под вас — от цветов до собственных шапки и подвала. Настройку выполняет Инвойсбокс по вашему запросу.

## Как покупатель попадает на страницу

Покупатель приходит на платёжную страницу по ссылке:

- **из магазина** — после оформления заказа сайт или приложение магазина перенаправляет покупателя на оплату;
- **из письма со счётом** — ссылка ведёт на страницу конкретного заказа;
- **из личного кабинета Инвойсбокс** — по счёту, который ждёт оплаты.

После оплаты покупатель возвращается в магазин. Адреса возврата для успешной и неуспешной оплаты вы передаёте при создании заказа.

## Где работает страница

Страница одна на все устройства: десктоп, планшет и смартфон получают одну и ту же вёрстку, подстроенную под ширину экрана. Кроме открытия в браузере, страницу можно встраивать:

- **в iframe** — прямо на вашем сайте;
- **в WebView** — внутри мобильного приложения.

У встраивания есть ограничения:

- В iframe страница живёт на своём домене, поэтому браузер покупателя должен разрешать сторонние cookie. Без них не сработают вход в профиль и сохранённые данные плательщика; сама оплата работает и без входа.
- Данные карты вводятся не на платёжной странице, а на стороне банка: в момент оплаты происходит переход на страницу банка и обратно. Ваш сайт или приложение не должны блокировать такие переходы.
- Оплата через СБП открывает приложение банка по внешней ссылке. WebView должен пропускать такие ссылки наружу.

> [!NOTE]
> Планируете открывать страницу в iframe или WebView — предупредите менеджера Инвойсбокс: домены и сценарии встраивания лучше согласовать заранее.

## Что можно настроить

- **Логотип** — ваш логотип в шапке страницы вместо логотипа Инвойсбокс.
- **Цвета** — основной текст, кнопки и текст на них, ссылки, иконки способов оплаты, фон карточек и всей страницы, цвета состояний: успех, ошибка, предупреждение. Оттенки для наведения и нажатия рассчитываются автоматически.
- **Изображения** — обложка под шапкой и фоновая картинка всей страницы. Требования к файлам — в разделе ниже.
- **Шапка и подвал** — стандартный шаблон Инвойсбокс, нейтральный вариант без логотипа или собственные компоненты в стиле вашего сайта.
- **Анимация загрузки** — своя заставка, пока заказ готовится: например, самолёт для авиабилетов или поезд для железнодорожных сервисов. Вместе с такой заставкой на странице меняется и терминология: вместо «Заказа» покупатель видит «Бронь».
- **Промо-блоки** — баннеры сопутствующих услуг Инвойсбокс на экранах после оплаты можно отключить.
- **Кнопка оплаты** — отдельный стиль: свой цвет и начертание текста.

> [!TIP]
> Часто хватает логотипа и двух-трёх фирменных цветов, чтобы платёжная страница выглядела продолжением вашего сайта. Собственные шапку и подвал добавляют вторым шагом.

## Без перехода в магазин после гарантийной оплаты

При гарантийной оплате система блокирует сумму заказа на карте или в [гарантийном фонде](/deferral/guarantee-fund/), а счёт оплачивается позже. По умолчанию после такой оплаты покупатель остаётся на платёжной странице: видит, что средства заблокированы, срок оплаты счёта и кнопку «Вернуться», которая открывает магазин в новой вкладке. Так счёт остаётся перед глазами до оплаты.

По вашему запросу можно включить автоматический возврат: физическое лицо попадает на ваш сайт сразу, организация — после окна с напоминанием, что счёт отправлен на почту.

## Требования к изображениям

### Обложка

Обложка занимает полосу во всю ширину окна высотой 154 пикселя под шапкой страницы. Подготовьте два файла:

- **для широких экранов** (шире 1400 пикселей) — картинка выравнивается по центру;
- **для средних экранов** (до 1400 пикселей) — картинка прижимается к левому краю.

Правила подготовки:

- Изображение выводится в натуральном размере, без масштабирования, а недостающая ширина заполняется повтором. Готовьте картинку высотой ровно 154 пикселя и шириной с запасом: около 2560 пикселей для широкой версии и 1400 для средней. Подойдёт и бесшовный узор, рассчитанный на повтор.
- Верхние 80 пикселей обложки закрывает шапка: слева логотип, справа переключатель языка и кнопка «Войти». Не ставьте акцентные элементы у верхнего края, особенно в правом верхнем углу: там они окажутся под элементами шапки.
- Снизу по центру на обложку на 50 пикселей наезжает карточка заказа. Полностью свободными остаются только поля слева и справа от неё и узкая полоса по центру.
- На смартфонах (экраны до 767 пикселей) обложка не показывается. Не размещайте на ней информацию, без которой покупатель не разберётся: мобильная аудитория её не увидит.
- В версии для средних экранов держите акценты ближе к левому краю: при сужении окна правая часть картинки уходит за экран.

### Фон страницы

Фоновая картинка растягивается на всё окно без повторов и центрируется. Подойдёт одно изображение в высоком разрешении; проверьте, что карточки формы и текст читаются поверх него.

## Собственные шапка и подвал

Шапку и подвал можно сделать в стиле вашего сайта. Компоненты разрабатывает Инвойсбокс по вашим материалам; сроки согласуйте с менеджером.

Что подготовить:

- логотип в векторном формате;
- фирменные цвета и, если есть, макеты шапки и подвала;
- содержимое подвала: телефон поддержки, ссылки на соцсети и мобильные приложения, адрес вашей политики конфиденциальности.

Устройство шапки единое для всех тем: слева ваш логотип, справа переключатель языка и кнопка входа в профиль. Убрать переключатель и вход нельзя, они нужны покупателю на любой теме. Добавить своё можно: например, ваш телефон для мобильной версии.

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

> [!IMPORTANT]
> В любом подвале обязателен блок Инвойсбокс: логотип Инвойсбокс, текст о том, что переводы принимает ООО «ОРЦ» как уполномоченное поставщиком лицо, и ссылки «Оферта» и «Поддержка». Без них принимать платежи нельзя, поэтому в макете они остаются всегда.

## Дополнительные поля для покупателя

К форме заказа для юридических лиц и ИП можно добавить поля, которых нет в стандартном наборе. Заполненные значения сохраняются в заказе и доступны вам.

Поле бывает:

- **текстовым** — с ограничением длины;
- **числовым**;
- **списком** — покупатель выбирает из заданных значений; список бывает и сгруппированным, с разделами внутри.

Любое поле можно сделать обязательным — без него заказ не отправится.

Например:

- **«Тип бизнеса»** — организация выбирает свой профиль из списка, и вы сразу знаете, с кем работаете;
- **адрес доставки** — если у организации в Инвойсбокс сохранены адреса доставки, покупатель выбирает нужный из списка прямо на платёжной странице.

## Как включить настройки

Напишите своему менеджеру Инвойсбокс или в поддержку: [c-support@invoicebox.ru](mailto:c-support@invoicebox.ru), [+7 (812) 448-08-01](tel:+78124480801) (9:00–21:00 МСК). Опишите, что хотите изменить, и приложите материалы: логотип, цвета, изображения. Если вы ещё не принимаете платежи через Инвойсбокс — начните с раздела [«Подключение и приём платежей»](/connect/).