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

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

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

Кнопки оплаты через Яндекс Пэй

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

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

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

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

    personalized-buttons

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

    buttons

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

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

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

Цвет

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

color_black_buttons

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

color_white_outline_buttons

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

color_white_buttons

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

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

size_buttons

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

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

size_samples_buttons

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

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

corner_buttons

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

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

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

badges_buttons

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

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

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

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

location_buttons

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

Кнопку Яндекс Пэй можно расположить также на странице товара и в корзине.

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

location_checkout_button_1

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

location_checkout_button_2

Если на сайте используется всплывающее меню корзины, разместите кнопку Яндекс Пэй там, как альтернативный быстрый способ оформления заказа.

location_checkout_button_3

Подробнее об интеграции читайте в разделе Оплата Яндекс Пэй и Сплит по cсылке.

При интеграции Яндекс Пэй с формированием ссылки на оплату рекомендуется обозначать способ оплаты следующим образом:

psp_pay_logo

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

psp_pay_split_logo

Если вы подключаете только оплату частями, то следует обозначать такую возможность так:

psp_pay_split_logo_2