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 Pay 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 1032x336px. Use wide, rectangular images. Use an image with a colored background for best results.
3:1 aspect ratio, or wider.
Display size will be full width of the card, and height scaled proportionally.

Full-width images

The *.imageModulesData.mainImage field in a class or object appears as a full-width image in an expanded loyalty or offer.

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 1860px wide, variable height. Use wide, rectangular images. Use an image with a colored background for best results.
Variable aspect ratio.
Display size will be full width of the template (white background "card"), and height scaled proportionally.
Use the same color scheme that is used for your logo image.

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 px–780 px wide if two images are present. This allows them to be side by side. If one image is a square and the other is a rectangle, then images should be 80 px x 80 px and 780 px x 80 px.
No constrained 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). Image should be 1600 px x 80 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 px–1600 px wide. If square, 80 px x 80 px. If rectangle, 1600 px x 80 px
No constrained aspect ratio. For maximum 20 dp height and width, use a 20:1 aspect ratio. If you want a full width image (exclude padding), image should be 1600 px x 80 px.
Maximum display size is 20 dp high and 400 dp wide.  

Modules

A module represents a grouping of fields in a specific section of a template. The following table contains guidelines for the number of modules you should include in your classes and objects to ensure your cards display correctly in the Google Pay 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. You might have two linksModuleData uris in your object defining 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 textModulesData in the class defining program details and another textModulesData in the object defining a user account-specific details.

infoModuleData

InfoModuleData contains member and customizable information and appears in the expanded view. Information such as expiration date, second point balance, or stored value balance should be stored in the info module.

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 defining a URI to a web site or a location in Google maps. This prefix allows a consumer to touch on the link and navigate to the web site 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/pay/passes/'
Use the tel: prefix when defining a phone number. This prefix allows a consumer to touch on the link dial the number. This prefix also causes an icon of a telephone in front of the description in your Card. 'uri': 'tel:6505555555'
Use the mailto: prefix when defining an email address. This prefix allows a consumer to touch on the link to send an email to the address. This prefix also causes an icon of a email in front of the description in your Card. 'uri': 'mailto:jonsmith@email.com'

Headings, labels, and names

The first letter of each word in headings, labels, and names should be written in title case (first letter of each word is capitalized).

Content policies

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

Save to Google Pay button

Design

Use the height and size fields of the g:savetoandroidpay HTML tag to modify the height and width of the Save to Google Pay buttons. When you specify textsize=large, the result is a dramatically increased text size and button size, which can be useful 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 resulting Save to Google Pay button.

Setting Result
theme of dark
theme of light

Placement

To make sure users can save, redeem, and engage with Passes you've developed, we encourage placing the Save to Google Pay (S2GP) buttons or links on all contextual flows. In general, the button should be positioned next to similar use action buttons, such as the Print Offer button.

The following suggestions are ways to integrate the Save to Google Pay button in your flows that some partners have found to work well.

Loyalty cards

Consider placing the Save to Google Pay button in the flow where a user views your loyalty number or card in your Android app or website. Some partners have found success by presenting the button to users after they sign in or sign up in the app.

Gift cards

Consider placing the Save to Google Pay button on the confirmation screen after a user purchases a gift card in your website or app. You could also place it in the email, SMS, or confirmation screen that a gift card recipient receives.

Offers

You could place the Save to Google Pay button on the website or app where a user accesses the offer or in any email or SMS used to distribute the offer (using our save links).

Tickets

The button can be placed at the end of a purchase flow when a user buys a ticket on your website or app or in the confirmation email or SMS after a purchase. Consider placing the Save to Google Pay button in the same place that a user accesses the ticket in your app or website.

Boarding passes

You can place the button at the end of the check-in flow in your desktop and mobile website or your mobile app. It can also be placed on the screen where a user views the boarding pass on your website or mobile app or in the post-check in confirmation email or SMS.

Download

When you use a link to allow users to download a loyalty, gift card, or offer, a Google Pay 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 orwebsite in the Pass’s class or object linksModuleData.* property. This allows the user to navigate to your platform from the Pass displayed in Google Pay. To see how it's rendered, see the design sections of Pass verticals.