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

Введение

Приведённые в этом руководстве требования и рекомендации по интеграции кнопки оплаты МТС Pay в интерфейс вашего продукта помогут сократить time-to-market и выстроить оптимальный клиентский путь.

Не пренебрегайте тем, что здесь написано и отнеситесь к руководству со всей серьёзностью.

— Команда МТС Pay

Виды кнопки и текст

Кнопка оплаты МТС Pay бывает двух видов — не персонализированная и персонализированная.

Не персонализированная кнопка

Используется в неавторизованной зоне или в тех случаях, когда по той или иной причине не удаётся получить данные о пользователе. CTA-текст скрывается, если кнопка не влезает по ширине.

Персонализированная кнопка

Используется в авторизованной зоне и включает в себя элементы персонализации — последние четыре цифры номера карты или мобильного счёта.

Call-to-action (CTA) текст

В зависимости от вашего пользовательского пути вы можете менять CTA-текст на наиболее подходящий из предоставленного нами набора вариантов.
По умолчанию используется вариант «Оплатить с».

Упоминание сервиса

Вы можете писать, что принимаете оплату через МТС Pay и упоминать наш сервис в своих материалах.

Писать все название заглавными буквами (МТС PAY) можно, только если на вашем сайте все слова пишутся таким образом.

Не сокращайте МТС Pay до аббревиатуры — всегда используйте оба слова названия полностью.

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

Не пытайтесь копировать шрифтовое оформление МТС. Фирменный шрифт МТС — отдельная единица интеллектуальной собственности и её отчуждение от бренда МТС Pay недопустимо.

Скины

Кнопка оплаты МТС Pay имеет три скина — красный, чёрный и белый.

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

Красный

Используйте на светлом или тёмном фоне:

Не используйте на красном или неконтрастном фоне:

Черный

Используйте на светлом фоне:

Не используйте на тёмном или неконтрастном фоне:

Белый

Используйте на тёмном фоне:

Не используйте на светлом или неконтрастном фоне:

Размеры и безопасная зона

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

Ширина

Кнопка может растягиваться вширь с выравниванием элементов по центру:

Минимально допустимая ширина без скрытия элементов персонализации и CTA-текста определяется сохранением отступов по 10pt слева и справа:

Такая модель обусловлена тем, что в зависимости от используемого CTA-текста общая ширина кнопки может меняться, но внутренние отступы в ней должны оставаться неизменными.

При необходимости уменьшить ширину допускается скрытие CTA-текста. В этом случае минимально допустимая ширина имеет конкретное значение в 213pt: