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

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

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

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

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

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

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

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

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

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

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

Примечание

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

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

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

Совет

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

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

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

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

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

Обложка

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

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

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

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

Фон страницы

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

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

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

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

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

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

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

Важно

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

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

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

Поле бывает:

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

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

Например:

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

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

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