Следующие рекомендации показывают, как интегрировать бренд Google Pay на ваши веб-сайты.
Кнопки оплаты Google Pay
Кнопка оплаты Google Pay всегда должна вызывать API Google Pay. API Google Pay, в свою очередь, вызывает форму оплаты, где пользователи могут выбрать способ оплаты.
Ресурсы
Метод JavaScript createButton() динамически вставляет правила CSS и SVG-файл из CDN Google для HTML-элемента <button> .
При использовании метода createButton() вы получаете:
- Соответствие фирменному стилю: Бесшовная интеграция кнопки оплаты Google Pay, которая автоматически соответствует последним рекомендациям Google Pay по фирменному стилю, предлагая при этом настраиваемые параметры для соответствия дизайну вашего пользовательского интерфейса с минимальными усилиями.
- Настраиваемая форма: точно отрегулируйте закругление углов кнопки, чтобы она идеально соответствовала существующему дизайну.
- Локализованный интерфейс: надпись на кнопке автоматически переводится на язык браузера пользователя, что повышает доступность.
- Персонализированный подход для пользователей: Помогите пользователям найти доступные способы оплаты в своем кошельке Google Pay для более быстрого оформления заказа.
Если этот удобный способ или поддерживаемые языки вам не подходят, свяжитесь с нами .
Стиль
Все кнопки оплаты Google Pay доступны в двух стилях: темном и светлом. Примеры обоих стилей можно посмотреть в разделе «Ресурсы» . Название бренда Google Pay не должно быть переведено. Не создавайте кнопки с собственным локализованным текстом.
| Тип кнопки | Темный | Свет |
| книга |  |  |
| купить |  |  |
| проверить |  |  |
| пожертвовать |  |  |
| заказ |  |  |
| платить |  |  |
| простой |  |  |
| подписаться |  |  |
Используйте текст, наиболее подходящий для вашей страницы оформления заказа, в зависимости от типа кнопки. | Используйте темные кнопки на светлом фоне для создания контраста. | Используйте светлые кнопки на темном или цветном фоне. |
Персонализация
Если у пользователя есть подходящая карта в аккаунте Google Pay, на кнопках оплаты «Купить», «Оплатить» и «Простая» будет отображаться платежная система и последние четыре цифры номера карты. Платежная система будет отображаться в том же месте, что и текст «Купить с помощью» или «Оплатить с помощью».
| Тип кнопки | Темный | Свет |
| купить, оплатить и спланировать |  |  |
Используйте кнопки типа «Купить», «Оплатить» или «Простая», чтобы включить персонализацию. | Используйте темные кнопки на светлом фоне для создания контраста. | Используйте светлые кнопки на темном или цветном фоне. |
Пользовательская кнопка
Воспользуйтесь следующим инструментом для предварительного просмотра внешнего вида каждой кнопки:
Свободное пространство
Всегда оставляйте как минимум 8 dp свободного пространства со всех сторон кнопки оплаты. Следите за тем, чтобы это свободное пространство никогда не было нарушено графикой или текстом.
Примеры
| Если вы размещаете кнопку Google Pay рядом с другой кнопкой, убедитесь, что кнопка Google Pay по размеру равна другой кнопке. | Всегда используйте кнопку Google Pay, которая контрастирует с фоном, на котором она отображается. |
| При изменении размера кнопки Google Pay всегда сохраняйте её пропорции неизменными. |
Что можно и чего нельзя делать
| Делать | Не |
|---|---|
|
|
Google Paymark
При отображении Google Pay в качестве варианта оплаты в ваших платежных системах используйте только указанный в этих рекомендациях знак Google Pay.
Ресурсы
Нажмите на следующую кнопку, чтобы загрузить товарный знак Google Pay в формате SVG:
Скачать ресурсыОтметка
При отображении Google Pay в качестве способа оплаты используйте следующий логотип Google Pay:
Если вы используете товарный знак других брендов, отображайте рядом с ним текст «Google Pay». Не изменяйте цвет или толщину контура товарного знака и не вносите в него никаких изменений. Используйте только тот товарный знак, который предоставлен Google.
Свободное пространство
Всегда оставляйте не менее половины (0,5x) высоты заглавной буквы G со всех сторон от знака принятия платежа 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 так же, как и другие способы оплаты.
- Никогда не отображайте пользователю полные номера счетов, сроки действия или другие данные о способе оплаты. Всегда используйте описательный текст, возвращаемый 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 и этап завершения покупки .
Получите одобрение
После интеграции API Google Pay для получения доступа к рабочей версии необходимо получить одобрение для всех мест, где отображается или упоминается Google Pay.
Заполните наш контрольный список по интеграции , чтобы отправить вашу веб-интеграцию на проверку. Вы получите одобрение или обратную связь в течение одного рабочего дня.