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.
Logos
Google Pay masks your logo into a circular shape when displaying.
Logo image guidelines
The following is a list of user interface recommendations for logo images:
Guideline | Example |
---|---|
Preferred file type: PNG | |
Minimum size is 660px by 660px | |
Image aspect ratio: 1:1. Artwork aspect ratio: 1:1. | |
Actual pixel size will scale to device size. | |
Your logo will be masked to fit within a circular design. Ensure that your logo fits within the Safe Area. Do not pre-mask your logo. Leave the logo in a square with a full bleed background color. The logo should have a 15% margin so that it is not cut off when masked. | ![]() |
Card Background Color
The background color can be set using the field hexBackgroundColor
. If there is no
value set, an algorithm analyzes the logo to find the dominant color to use as the card
background color.
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 - SVGPartner 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.