Campus ID branding

Add to Google Wallet button

The Add to Google Wallet button is used whenever you are directing users to save a pass or card from your app to Google Wallet. The Add to Google Wallet button must call the Campus ID provisioning flow. This flow surfaces the Google Wallet app where users can follow the instructions to save their Campus ID.

Assets

Add to Google Wallet buttons are available in Android XML, PNG, and SVG format.

Download assets - Android XML Download assets - PNG 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
  • Shape and color of buttons must not be altered
  • Clear space

Localization

Localized Google Wallet buttons are provided for all markets where Wallet is available. If you're developing for users in these markets, always use the buttons linked above. Do not create your own version of the Add to Google Wallet button. If a localized version of the button is not available in your market, use the English version of the button.

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 two variations: primary button and condensed buttons. 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 Condensed Add to Google Wallet button

Primary

Condensed

The primary button is preferred in most cases. Use the primary on black, white or colorful backgrounds. Use the condensed button if there is not enough space for the primary button.

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.

Clear space must be 8 dp on all sides.

Minimum height

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

Minimum height of the button is 48 dp.

Dos and don'ts

Dos Don'ts
Do: Use only the Add to Google Wallet buttons provided by Google. Don't: Create your own Add to Google Wallet buttons or alter the font, color or padding within the button in any way.
Do: Use the same style of button throughout your app. 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 remains equal to or larger than other buttons. Don't: >Alter the button color.
Do: Keep the button ratio the same when resizing the Add to Google Wallet buttons. Don't: Free scale the button.

Best practices for button placement

To maximize the number of saved objects, display the Add to Google Wallet buttons prominently within your app. Refer to the following best practices to guide your UI design.

Campus IDs

Display the Add to Google Wallet button on confirmation app screens. Below is an example of best practice button placement with Campus IDs.

Add to Google Wallet button placed prominently in the student account
       app.

Use of the Google Wallet product name in text

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

Capitalize the letters "G" and "W"

Always use an uppercase first letter in "Google" and "Wallet" 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." If the product name is localized in your market, please use the full localized name in text.

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.

Always use the localized version of "Google Wallet"

Always write "Google Wallet" in the provided localized copy.

Localized name

For user clarity, the Google Wallet product name is localized in select markets. If you're developing for users in these countries, always use the localized name. For web, email, and print, use the localized name outlined below. Do not create your own localized version of "Google Wallet". If your market isn't listed below, use "Google Wallet" in English.


Country

Name

Belarus

Google Кошелек

Brazil

Carteira do Google

Chile

Billetera de Google

Czechia

Peněženka Google

Greece

Πορτοφόλι Google

Hong Kong

Google 錢包

Lithuania

Google Piniginė

Poland

Portfel Google

Portugal

Carteira da Google

Romania

Portofel Google

Slovakia

Peňaženka Google

Taiwan

Google 錢包

Turkey

Google Cüzdan

UAE

محفظة Google

Ukraine

Google Гаманець

United States (Spanish)

*Use this name in the US if your UI is in Spanish

Billetera de Google