Overview

These guidelines help you implement the Google Wallet API within your apps or websites.

Add to Google Wallet [coming soon]

Until the release of Google Wallet - continue to use the "Save to Google Pay" buttons that are available for download below in your current integrations.

Add to Google Wallet button

The Add to Google Wallet button must call one of the Google Wallet API flows. These flows surface a screen where users can save transit pass to their Android-powered device. This button can be used in merchant apps, websites, emails, or SMS texts.

Assets

Download assets - EPS Download assets - SVG

All Add to Google Wallet buttons displayed on your site, app, or email communications must adhere to our brand guidelines. Examples of these guidelines include, but aren't limited to, the following:

  • Size relative to other similar buttons or elements of the page
  • Contrast with the background color of the surrounding area
  • Clear space

The Add to Google Wallet will be available in the Arabic, Croatian, Czech, Danish, Dutch, English, Finnish, French, German, Indonesian, Italian, Japanese, Korean, Norwegian (Bokmal), Polish, Portuguese, Russian, Simplified Chinese, Slovak, Spanish, Swedish, Thai, Traditional Chinese, and Ukranian languages.

Size

Adjust the height and width of the Add to Google Wallet button to fit your layout. If there are other buttons on the page, the Add to Google Wallet button needs to be equal in size to or larger than these buttons. Don't make the Add to Google Wallet button smaller than other buttons.

Style

The "Add to Google Wallet" buttons are available in three variations: primary button, full-width button, and condensed button. The "Add to Google Wallet" button only comes in black. Localized versions of the button are provided. Do not create buttons with your own localized text.

Primary Add to Google Wallet button Full-width Add to Google Wallet button Condensed Add to Google Wallet button

Primary

Use the primary button on white and light backgrounds.

Full-width

Use the full-width button if there is enough space in your integration. Use the full-width button to match other wide buttons.

Condensed

Use the condensed button if there is not enough space for the primary or full-width.

Clear space

Always maintain the minimum clear space of 8 dp on all sides of the Add to Google Wallet button. Ensure that the clear space is never broken with graphics or text.

Minimum height

All Add to Google Wallet buttons need to have a minimum height of 36 dp.

Dos and don'ts

Dos Don'ts
Do: Use only the Add to Google Wallet buttons provided by Google. Don't: Don't create your own Add to Google Wallet buttons or alter the font, color, button radius, or padding within the button in any way.
Do: Use the same style of button throughout your site. Don't: Don't make the Add to Google Wallet buttons smaller than other buttons.
Do: Ensure that the size of the Add to Google Wallet buttons remain equal to or larger than other buttons. Don't: Don’t free scale the button.
Do: Keep the button ratio the same when you resize the Add to Google Wallet buttons.

Best practices for button placement

To maximize the number of saved objects, display the Add to Google Wallet buttons prominently within your app, website, or email. You need to adhere to the following best practices in order to receive brand approval from Google.

Display the Add to Google Wallet button at the end of your purchase flow or on confirmation app screens, web pages, or emails. We recommend that you place the Add to Google Wallet button where users access their tickets in your app or website.

Use of the Google Wallet product name in text

You can use text to indicate to the user that their transit pass is saved to their device.

Capitalize the letters "G" and "W"

Always use an uppercase "G" and an uppercase "W" followed by lowercase letters to refer to Google Wallet. Don't capitalize the full name "Google Wallet" unless it's to match the typographic style in your UI.

Don't abbreviate Google Wallet

Always write out the words "Google" and "Wallet."

Match the style in your UI

Set "Google Wallet" in the same font and typographic style as the rest of the text in your UI. Don't mimic Google's typographic style.

Don't translate Google Wallet

Always write "Google Wallet" in English. Don't translate the name to another language.