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

Эти рекомендации помогут вам внедрить Google Pay в ваши приложения.

Кнопки оплаты Google Pay

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

Ресурсы

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

При использовании API PayButton вы получаете:

  • Соответствие бренду: легко интегрируйте кнопку оплаты 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
простой Темные кнопки оплаты Google PayПодсветка кнопок оплаты Google Pay
подписаться Темные кнопки оплаты Google PayПодсветка кнопок оплаты Google Pay

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

Для создания контраста используйте темные кнопки на светлом фоне.

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

Персонализация

Если в аккаунте Google Pay есть соответствующая карта, кнопки «Купить» и «Оплатить» будут отображать название платежной системы и последние четыре цифры номера карты. Название платежной системы будет отображаться там же, где и текст «Купить с помощью» или «Оплатить с помощью».

Тип кнопки Темный Свет
купить и заплатить Темные кнопки оплаты Google PayПодсветка кнопок оплаты Google Pay

Для включения персонализации используйте кнопку «купить» или «оплатить».

Для создания контраста используйте темные кнопки на светлом фоне.

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

Очистить пространство

Всегда соблюдайте минимальное свободное пространство размером 8 dp со всех сторон кнопки оплаты. Убедитесь, что свободное пространство не прерывается графикой или текстом. Это общие рекомендации по дизайну, а не спецификация API PayButton.

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

Минимальная ширина

Кнопка Google Pay должна иметь ширину не менее 90 dp. Все кнопки оплаты «Купить с Google Pay» должны иметь ширину не менее 152 dp.

Иллюстрация минимальной ширины кнопки оплаты 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 Pay» в тексте рядом со знаком, если вы используете его для других брендов. Не изменяйте цвет или насыщенность контура знака и не вносите никаких изменений в сам знак. Используйте только знак, предоставленный Google.

Очистить пространство

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

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

Размер

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

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

Что можно и чего нельзя делать

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

Google Pay в тексте

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

Заглавные буквы «Г» и «П»

Всегда используйте заглавные буквы «G» и «P», за которыми следуют строчные. Не пишите полное название «GOOGLE PAY» заглавными буквами, если только это не требуется для соответствия стилю оформления вашего интерфейса. Никогда не используйте заглавные буквы «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

Увеличьте конверсию с помощью процессов оформления заказов и платежных листов, которые позволяют клиентам быстро и легко просматривать платежную информацию и подтверждать покупку.

Ниже приведены рекомендации по применению:

Сделайте Google Pay основным способом оплаты

По возможности разместите кнопку Google Pay на видном месте и рассмотрите возможность сделать ее способом оплаты по умолчанию или единственным.

Позвольте вашим клиентам совершать покупки без учетной записи

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

Используйте Google Pay для инициирования оплаты за оформление заказа в корзине

Кнопка Google Pay открывает страницу оплаты. На странице оплаты клиенты могут выбрать и подтвердить только один способ оплаты. Убедитесь, что вы получили всю необходимую информацию, прежде чем предоставить клиентам возможность выбрать кнопку Google Pay. Эта информация может включать в себя:

  • Размер, цвет и количество товара
  • Добавленное сообщение о подарке, если таковое имеется
  • Промокод, если есть
  • Предпочтительная скорость доставки
  • Направления для отдельных предметов

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

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

Чтобы ускорить оформление заказа по одному товару, предоставьте клиентам возможность совершать отдельные покупки прямо на страницах с описанием товара. Если покупатель выберет этот вариант, обязательно исключите из корзины все остальные товары, так как на странице оплаты можно только подтвердить информацию об оплате и доставке.

Включайте Google Pay на страницы подтверждения и в квитанции

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

Ниже приведено несколько примеров:

  • «Сеть •••• 1234 с Google Pay»
  • «Сеть •••• 1234 (Google Pay)»
  • «Google Pay (Сеть •••• 1234)»
  • «Paypal abc...d@gmail.com через Google Pay»
  • «Способ оплаты: Google Pay»
  • «Оплачено через Google Pay»

Соедини все это вместе

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

На этих экранах представлена ​​рекомендуемая процедура покупки с использованием Google Pay для корзины покупок.

Получить одобрение

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

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