Правила оформления бренда

Кнопки оплаты через Yandex Pay
Варианты отрисовки кнопок
Параметры кастомизации кнопки
Расположение кнопки на странице
- Выбор места для кнопки
- Кнопка быстрого оформления заказа
Оформление при интеграции с формированием ссылки на оплату
- Yandex Pay
- Yandex Pay и Сплит

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

сайты обладали схожим опытом оплаты через Yandex Pay;
пользователь быстро совершал покупки, а не изучал новый интерфейс;
было удобно и красиво.

Кнопки оплаты через Yandex Pay

Если вы корректно реализуете Yandex Pay Web SDK, то получите результат в виде отрисованной кнопки. Правила отображения внешнего вида кнопки регулируются только на стороне Yandex Pay. Сайт продавца может регулировать только некоторые параметры кнопки.

Кнопка оплаты Yandex Pay должна всегда вызывать Yandex Pay API. В ответ интерфейс инициирует появление страницы, на которой пользователи могут выбрать способ оплаты.

Варианты отрисовки кнопок

Пользователь авторизован в Яндексе, у него в профиле есть фото и привязана карта в Yandex Pay (варианты для светлого и темного фона):
Пользователь авторизован или не авторизован в Яндексе, у него нет фото в профиле и не привязана карта в Yandex Pay (варианты для светлого и темного фона):

Подробнее о кнопках Web SDK.

Параметры кастомизации кнопки

Сайт продавца может регулировать следующие параметры кнопки:

цвет (для светлого и темного фона);
высоту и ширину (есть ограничения);
скругление.

Цвет

Черный. Используйте на белом или светлом фоне, который достаточно контрастен к цвету кнопки. Нельзя использовать на черном или темном фоне.

color_black_buttons

Белый с обводкой. Используйте на белом или светлом фоне, который недостаточно контрастен к цвету кнопки. Нельзя использовать на черном или темном фоне.

color_white_outline_buttons

Белая. Используйте на темном фоне, который достаточно контрастен к цвету кнопки.

color_white_buttons

Высота и ширина

Соблюдайте минимальную высоту и ширину кнопки:

size_buttons

Если в кнопку вашего размера не будут помещаться все ее элементы, система автоматически скроет или уменьшит такие элементы. Минимальная ширина кнопки, при которой будет видны данные пользователя (привязанная карта или аватар) — 200pt.

Кнопка должна быть соразмерна элементам интерфейса и органично в них вписываться.

size_samples_buttons

Скругление углов

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

corner_buttons

Дополнительные элементы

Если вы подключили опцию оплаты с помощью Сплита, установите на сайт виджет с подписью про Сплит, чтобы пользователи узнали о возможности разбить оплату на части.

Используйте светлую тему для подписи на светлых фонах и темную тему для темных фонов.

badges_buttons

Расположение кнопки на странице

Выбор места для кнопки

Преимущество продукта Yandex Pay — это автозаполнение полей ввода карточных данных, данных плательщика и почты. Все эти данные уже есть у Яндекса — пользователю не нужно их заполнять, поэтому кнопку не нужно располагать далеко вниз за все поля на странице.

Используйте сепаратор, чтобы разделить по смыслу визуальные блоки и не путать пользователя.

location_buttons

Кнопка быстрого оформления заказа

Кнопку Yandex Pay можно расположить также на странице товара и в корзине.

На странице товара располагайте кнопку Yandex Pay рядом с кнопкой добавления в корзину, названием товара и ценой. Такое расположение помогает пользователям понять, какой именно товар они покупают и сколько он стоит.

location_checkout_button_1

В корзине расположите кнопку так, чтобы пользователю было понятно, что используя Yandex Pay он сможет быстро оформить заказ, минуя заполнение контактных данных и адреса (они автоматически подтянутся из Яндекс ID).

location_checkout_button_2