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

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

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

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

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

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

Сайт продавца может регулировать только цвет, ширину, высоту и скругление кнопки.

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

Примечание

Внешний вид кнопки зависит от доступных для использования методов оплаты, которые указаны в объекте PaymentData в availablePaymentMethods при подключении формы оплаты. Если указан только метод 'SPLIT', кнопка будет зеленой, в остальных случаях — фиолетовой.

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

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

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

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

Цвет

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

color_black_buttons

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

color_white_outline_buttons

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

color_white_buttons

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

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

size_buttons

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

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

size_samples_buttons

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

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

corner_buttons

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

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

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

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

location_buttons

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

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

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

location_checkout_button_1

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

location_checkout_button_2