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

В этом руководстве рассказывается, как правильно использовать элементы бренда Google Pay на сайтах.

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

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

Объекты

Метод JavaScript createButton() динамически добавляет правила каскадной таблицы стилей (CSS) и загружает из CDN Google файл в формате SVG для элемента HTML <button>.

Все кнопки оплаты через Google Pay на сайте должны отвечать нашим правилам фирменного оформления, в том числе указанным ниже.

  • Они не должны быть больше или меньше других аналогичных по назначению элементов интерфейса. Изменить размер кнопки можно с помощью параметра buttonSizeMode в createButton API.
  • Они не должны сливаться с фоном.
  • Они должны быть окружены свободным пространством со всех сторон.

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

Информация о карте

На кнопке с информацией о карте отображается бренд карты и последние четыре цифры ее номера. Дополнительную информацию можно найти в разделе ButtonOptions.

"Оплатить через Google Pay"

Язык кнопки "Оплатить через Google Pay" выбирается в зависимости от настроек браузера пользователя. Дополнительную информацию можно найти в разделе ButtonOptions.

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

Язык кнопок "Сделать пожертвование через Google Pay", "Оплатить через Google Pay", "Подписаться через Google Pay", "Забронировать через Google Pay", "Заказать через Google Pay" и "Посмотреть в Google Pay" автоматически выбирается в зависимости от настроек браузера пользователя. Дополнительную информацию можно найти в разделе ButtonOptions.

Стиль

Для всех вариантов кнопок оплаты через Google Pay доступны две версии оформления: темная и светлая. Примеры можно посмотреть в разделе Объекты. Название бренда Google Pay всегда должно быть на английском. Самостоятельно переводить надписи на кнопках нельзя.

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

Чтобы посмотреть, как будет выглядеть та или иная кнопка, воспользуйтесь инструментом ниже:

Свободное пространство

Кнопка оплаты должна быть окружена свободным пространством со всех сторон. Расстояние до ближайшего рисунка или текстового элемента должно составлять не менее 8 dp. В свободном пространстве не должно быть графических или текстовых элементов.

Пример свободного пространства вокруг кнопки оплаты через Google Pay для Android

Примеры

Свободное пространство вокруг кнопки
Если кнопка оплаты через Google Pay расположена рядом с другими кнопками, она должна совпадать с ними по размеру. Кнопка Google Pay должна находиться на контрастном фоне.
Изменение размеров кнопки
Когда вы изменяете размер кнопки Google Pay, ее пропорции должны оставаться прежними.  

Рекомендации

Что следует делатьЧего делать нельзя
  • Добавлять в приложение только те кнопки Google Pay, которые предлагаются Google.
  • Использовать кнопки Google Pay для инициализации процесса оплаты.
  • Использовать кнопки одного стиля на всем сайте.
  • Следить за тем, чтобы кнопки Google Pay не были меньше других кнопок.
  • Выбирать цветовое оформление кнопок так, чтобы они контрастировали с фоном.
  • Создавать логотипы и символы Google Pay самостоятельно или менять существующие.
  • Использовать кнопки Google Pay для инициализации процессов, не связанных с оплатой.
  • Добавлять на один сайт кнопки разного цвета.
  • Добавлять на один сайт кнопки с надписью и без.
  • Использовать белую кнопку Google Pay на белом фоне или черную – на темном.

Символ Google Pay

Указывая сервис Google Pay в качестве способа оплаты, добавляйте только символ Google Pay, представленный в этих правилах.

Объекты

Чтобы скачать символ Google Pay в формате файла SVG, нажмите кнопку ниже:

Скачать

Символ

Добавьте символ Google Pay на страницы, где сервис указан в качестве способа оплаты.

Символ Google Pay

Если рядом с символами других компаний указаны их названия, вместе с символом нашего сервиса разместите надпись "Google Pay". Сохраните исходный цвет и ширину контура и не меняйте сам символ. Используйте только вариант, предоставленный Google.

Свободное пространство

Оставьте вокруг символа Google Pay столько же свободного пространства, сколько и вокруг других фирменных знаков. Расстояние до ближайшего рисунка или текстового элемента должно составлять не менее половины (0,5x) высоты буквы G.

Пример свободного пространства вокруг символа Google Pay

Размер

Используйте логотип такой же высоты, как и у других логотипов и символов, представленных на странице оплаты. Символ Google Pay не должен быть меньше других фирменных знаков.

Добавьте символ Google Pay на каждую страницу на пути к оформлению покупки.

Рекомендации

Что следует делатьЧего делать нельзя
  • Добавлять в приложение только те символы Google Pay, которые предлагаются Google.
  • Использовать символ Google Pay, чтобы указывать наш сервис в качестве способа оплаты.
  • Создавать символы Google Pay самостоятельно или менять уже существующие.
  • Переводить слово "Pay" на другой язык.
  • Представлять символ Google Pay меньшего размера, чем символы других сервисов, которые принимаются в качестве способа оплаты.

Google Pay в тексте

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

Пишите оба слова в названии сервиса с прописной буквы
Заглавными должны быть только первые буквы слов: G и P. Писать полное название заглавными буквами (GOOGLE PAY) можно, только если остальные текстовые элементы сайта представлены в таком же виде. Делать это в маркетинговых материалах запрещается.
Не указывайте название Google Pay в виде аббревиатуры
Всегда пишите оба слова полностью.
Придерживайтесь того же оформления, которое используется на сайте
Название сервиса должно быть написано тем же шрифтом, который используется для остального текста. Не пытайтесь копировать шрифтовое оформление Google.
Не переводите название Google Pay
Оно должно быть указано на английском языке. Не используйте написание на других языках.
Добавляйте символ товарного знака к первому упоминанию Google Pay в маркетинговых текстах
Когда название Google Pay упоминается в рекламных материалах впервые или в особо значимом месте, рядом с ним должен быть надстрочный символ ™. Добавлять его к названию сервиса на странице с выбором способа оплаты не нужно.
Если на странице нет изображений, которые относятся к другим способам оплаты, то добавлять их для Google Pay не нужно. Достаточно написать название сервиса. Оно должно быть написано тем же шрифтом, который используется для остального текста на сайте.

Рекомендации по работе с Google Pay

Хотите получать как можно больше конверсий? Настройте процесс и страницы оплаты так, чтобы покупателям было удобно проверять свои платежные данные и подтверждать покупки.

Следуйте приведенным ниже рекомендациям.

Сделайте Google Pay основным способом оплаты
Мы рекомендуем добавить кнопку оплаты через Google Pay на заметное место и сделать наш сервис основным или единственным способом оплаты.
Разрешите покупки без регистрации аккаунта
Необходимость создавать аккаунт замедляет процесс покупки. В результате пользователь может покинуть магазин, не оформив заказ. Используйте оплату через Google Pay, чтобы посетители могли быстро оплачивать покупки без регистрации. Предложение создать аккаунт можно перенести на этап, следующий за оформлением покупки.
Используйте Google Pay для запуска процесса оплаты при оформлении покупки
Нажимая кнопку Google Pay, пользователь переходит на страницу оплаты. Там он может только выбрать и подтвердить один способ оплаты, а также указать адрес доставки. Всю остальную необходимую информацию пользователь должен указать до того, как нажмет кнопку Google Pay. Дополнительная информация может включать следующее:
  • размер, цвет или количество товара;
  • возможность добавить комментарий для подарка или применить промокод;
  • возможность выбрать другие способы доставки и пункты назначения для отдельных товаров.
Если пользователь не предоставил нужные данные, сообщите ему, что сделать это необходимо, до перехода на страницу оплаты.
Добавьте кнопку оплаты через Google Pay на страницы с информацией о товаре
Вы можете позволить клиентам переходить к оформлению покупки прямо со страницы товара. В этом случае при нажатии кнопки Google Pay не должны учитываться другие товары, находящиеся в корзине, поскольку на странице оплаты можно только подтвердить платежные данные и сведения о доставке.
Добавляйте информацию о Google Pay в квитанции и на страницы подтверждения
Указывайте на страницах подтверждения и в квитанциях, которые вы отправляете по электронной почте, что оплата была выполнена через Google Pay. Добавьте на них логотип или символ Google Pay аналогично тому, как это сделано для других способов оплаты.
Никогда не показывайте полные номера счетов, сроки действия карт и другие платежные данные. Вместо этого используйте описание способа оплаты, предоставленное Google Pay API.
Примеры допустимых текстов:
  • "Платежная система •••• 1234 через Google Pay"
  • "Платежная система •••• 1234 (Google Pay)"
  • "Google Pay (Платежная система •••• 1234)"
  • "PayPal abc...d@gmail.com через Google Pay"
  • "Способ оплаты: Google Pay"
  • "Оплачено через Google Pay"
Подтверждение платежа
Указывайте, что оплата была выполнена через Google Pay, на страницах подтверждения и в квитанциях, которые отправляете по электронной почте.

Выводы

На рисунке ниже показано, как может выглядеть процесс оплаты через Google Pay на сайте. Интеграция с Google Pay охватывает такие этапы совершения покупки, как выбор товара/предзаказ, проверка данных, выбор способа оплаты Google Pay и просмотр подтверждения.

Покупки через интернет
На этих изображениях показан рекомендуемый процесс оплаты онлайн-покупок через Google Pay.

Согласование

После того как вы завершите интеграцию с Google Pay API, вам потребуется согласовать все места размещения кнопок Google Pay и ссылок на сервис в интерфейсе.

Выполните все условия, указанные в Контрольном списке интеграции, чтобы отправить заявку на интеграцию. Мы проведем проверку и свяжемся с вами в течение одного рабочего дня.