Правила оформления бренда
Последние требования к визуальной части сайта доступны на сводной странице в Figma. Ниже описан набор рекомендаций в дизайне, который необходимо соблюдать чтобы:
- сайты обладали схожим опытом оплаты через Yandex Pay;
- пользователь быстро совершал покупки, а не изучал новый интерфейс;
- было удобно и красиво.
Кнопки оплаты через Yandex Pay
Если вы корректно реализуете Yandex Pay Web SDK, то получите результат в виде отрисованной кнопки. Правила отображения внешнего вида кнопки регулируются только на стороне Yandex Pay. Сайт продавца может регулировать только некоторые параметры кнопки.
Кнопка оплаты Yandex Pay должна всегда вызывать Yandex Pay API. В ответ интерфейс инициирует появление страницы, на которой пользователи могут выбрать способ оплаты.
Варианты отрисовки кнопок
-
Пользователь авторизован в Яндексе, у него в профиле есть фото и привязана карта в Yandex Pay (варианты для светлого и темного фона):
-
Пользователь авторизован или не авторизован в Яндексе, у него нет фото в профиле и не привязана карта в Yandex Pay (варианты для светлого и темного фона):
Подробнее о кнопках Web SDK.
Параметры кастомизации кнопки
Сайт продавца может регулировать следующие параметры кнопки:
- цвет (для светлого и темного фона);
- высоту и ширину (есть ограничения);
- скругление.
Цвет
Черный. Используйте на белом или светлом фоне, который достаточно контрастен к цвету кнопки. Нельзя использовать на черном или темном фоне.
Белый с обводкой. Используйте на белом или светлом фоне, который недостаточно контрастен к цвету кнопки. Нельзя использовать на черном или темном фоне.
Белая. Используйте на темном фоне, который достаточно контрастен к цвету кнопки.
Высота и ширина
Соблюдайте минимальную высоту и ширину кнопки:
Если в кнопку вашего размера не будут помещаться все ее элементы, система автоматически скроет или уменьшит такие элементы. Минимальная ширина кнопки, при которой будет видны данные пользователя (привязанная карта или аватар) — 200pt.
Кнопка должна быть соразмерна элементам интерфейса и органично в них вписываться.
Скругление углов
По умолчанию углы кнопки скруглены. Измените значение скругления так, чтобы оно совпадало со скруглением остальных кнопок в вашем интерфейсе.
Дополнительные элементы
Если вы подключили опцию оплаты с помощью Сплита, установите на сайт виджет с подписью про Сплит, чтобы пользователи узнали о возможности разбить оплату на части.
Используйте светлую тему для подписи на светлых фонах и темную тему для темных фонов.
Расположение кнопки на странице
Выбор места для кнопки
Преимущество продукта Yandex Pay — это автозаполнение полей ввода карточных данных, данных плательщика и почты. Все эти данные уже есть у Яндекса — пользователю не нужно их заполнять, поэтому кнопку не нужно располагать далеко вниз за все поля на странице.
Используйте сепаратор, чтобы разделить по смыслу визуальные блоки и не путать пользователя.
Кнопка быстрого оформления заказа
Кнопку Yandex Pay можно расположить также на странице товара и в корзине.
На странице товара располагайте кнопку Yandex Pay рядом с кнопкой добавления в корзину, названием товара и ценой. Такое расположение помогает пользователям понять, какой именно товар они покупают и сколько он стоит.
В корзине расположите кнопку так, чтобы пользователю было понятно, что используя Yandex Pay он сможет быстро оформить заказ, минуя заполнение контактных данных и адреса (они автоматически подтянутся из Яндекс ID).
Если на сайте используется всплывающее меню корзины, разместите кнопку Yandex Pay там, как альтернативный быстрый способ оформления заказа.
Оформление при интеграции с формированием ссылки на оплату
Подробнее об интеграции читайте в разделе Схема взаимодействия с формированием ссылки.
Yandex Pay
При интеграции Yandex Pay с формированием ссылки на оплату рекомендуется обозначать способ оплаты следующим образом:
Yandex Pay и Сплит
Если вы также подключили Сплит, обозначьте такую возможность, чтобы пользователи узнали о возможности разбить оплату на части:
Если вы подключаете только оплату частями, то следует обозначать такую возможность так: