Правила фирменного оформления 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 Paymark

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

Ресурсы

Скачайте логотип Google Pay в формате SVG:

Скачать ресурсы

Отметка

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

Google Paymark

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

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

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

Пример использования свободного пространства для отметки 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 в ваших маркетинговых материалах.

Напишите буквы «G» и «P» заглавными.

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

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