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

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

  • сайты обладали схожим опытом оплаты через Яндекс Пэй;

  • пользователь быстро совершал покупки, а не изучал новый интерфейс;

  • было удобно и красиво.

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

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

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

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

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

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

    full-buttons

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

    cashback-buttons

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

    split-buttons

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

    simple-buttons

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

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

Цвет

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

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

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

location_checkout_button_3

Подробнее об интеграции читайте в разделе Интеграция для онлайн-магазинов (без SDK).

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

psp_pay_logo

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

psp_pay_split_logo

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

psp_pay_split_logo_2