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