Brand guidelines

This section of the documentation is designed to help you create images and other user interface elements so that they look great in the Google Wallet app.

Hero images

The class.heroImage field appears as a full-width banner across the body of the card.

Hero image guidelines

The following is a list of user interface recommendations for hero images:

Guideline Example
Preferred file type: PNG
Recommended size is 1032x336 px. Use wide, rectangular images. Use an image with a colored background for best results.
3:1 aspect ratio, or wider.
The display size is the full width of the card, and the height is proportional.

Full-width images

The *.imageModulesData.mainImage field in a class or object appears as a full-width image in a pass.

Full-width image guidelines

The following is a list of user interface recommendations for full-width images:

Guideline Example
Preferred file type: PNG
Minimum size is 1860 px wide, variable height. Use wide, rectangular images. Use an image with a colored background for best results.
Variable aspect ratio.
The display size is the full width of the template, and the height scales proportionally.
Use the same color scheme that you use for your logo.

Barcode images

Certain verticals allow for images above and below the barcode.

Images above the barcode

The following is a list of user interface recommendations for the images above the barcode:

Guideline Example
Preferred file type: PNG  
Maximum height is 20 dp (at maximum aspect ratio). Recommended size is 80 px tall and 80-780 px wide if two images are present. This lets them be side by side. If one image is a square and the other is a rectangle, then the images need to be 80x80 px and 780x80 px.
Unconstrained aspect ratio. For maximum 20 dp height and width of a single image, use a 20:1 aspect ratio. If you only want a single image above the barcode, take the full width (exclude padding). The image needs to be 1600x80 px.
Maximum display size for a single image is 20 dp high and 400 dp wide.  

Image below the barcode

The following is a list of user interface recommendations for the image below the barcode:

Guideline Example
Preferred file type: PNG  
Maximum height is 20 dp (at maximum aspect ratio). Recommended size is 80 px tall and 80-1600 px wide. If square, 80x80 px. If rectangular, 1600x80 px.
Unconstrained aspect ratio. For maximum 20 dp height and width, use a 20:1 aspect ratio. If you want a full width image (exclude padding), the image must be 1600x80 px.
Maximum display size is 20 dp high and 400 dp wide.  

Modules

A module represents a group of fields in a specific section of a template. The following table contains guidelines for the number of modules that you must include in your classes and objects to ensure that your cards display correctly in the Google Wallet app.

Guideline Example
Use only one imageModulesData either in your class or in the objects you create.
Use up to two infoModuleData, either in your class or in the objects you create. An infoModuleData might define user account-specific information such as "Member Name" and "Membership #".
Use up to four linksModuleData URIs total in either in your class or in the objects you create. You might have two linksModuleData URIs in your class; one to the URI for your website and one to a phone number for your help center. Two linksModuleData URIs in your object might define a user account-specific URI and nearby locations.
Use up to two textModulesData fields between the class and objects you create. You might have one textModuleData URIs in your class that defines program details and another textModulesData in the object that defines user account-specific details.

infoModuleData

InfoModuleData contains member and customizable information and appears in the expanded view. Use this module to store information such as expiration dates, second point balances, or stored value balances.

linksModuleData

The links module contains URIs to web pages, telephone numbers, and email addresses. The following is a list of user interface recommendations for the links module:

Guideline Example
Use the http: prefix when you assign a URI to a website or a location in Google maps. This prefix lets a consumer touch on the link and navigate to the website or view the location in Google Maps. This prefix also causes an icon of a link or map in front of the description in your Card. 'uri': 'http://maps.google.com/?q=google'

'uri': 'http://developer.google.com/wallet/'

Use the tel: prefix when you define a phone number. This prefix lets a consumer touch on the link to dial the number. This prefix also creates an icon of a telephone in front of the text description on the Card. 'uri': 'tel:6505555555'
Use the mailto: prefix when you define an email address. This prefix lets a consumer touch on the link to send an email to the address. This prefix also creates an icon of an email in front of the text description on the Card. 'uri': 'mailto:jonsmith@email.com'

Headings, labels, and names

Write headings, labels, and names in title case, so that each word starts with a capital letter.

Content policies

The contents of each field in a Pass must adhere to the Payments content policies. The contents of the websites that you reference in the class must also adhere to these policies.

Add to Google Wallet button [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.

Design

Use the height and size fields of the g:savetoandroidpay HTML tag to modify the height and width of the Add to Google Wallet buttons. Use the textsize=large specification to dramatically increase text and button sizes for mobile implementations or cases with special UI requirements.

Use the theme to set the color of the buttons. The following table shows how these settings affect the Add to Google Wallet button.

Placement

To make sure users can save, redeem, and engage with Passes you've developed, we recommend that you place the Add to Google Wallet (S2GW) buttons or links on all contextual flows. In general, we recommend that you position the button next to similar use action buttons, such as the Print Boarding Pass or Download Boarding Pass button.

Download

When you use a link to let users download a Boarding Pass, a button image in front of the deep link guarantees a consistent experience to the user. Click Download assets to download the Google Pay buttons, which are available in multiple languages as EPS or SVG files:

Download assets - EPS Download assets - SVG

Partner platform data placement

To make sure users can get to your feature-rich app or website about the Pass, make sure to incorporate your app deep link or website in the Pass's class or object linksModuleData.* property. This lets a user navigate to your platform from the Pass, which appears in Google Wallet. To see how it's rendered, go to the design sections of the Pass verticals.