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 Generic 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 - SVGAll 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.
|
|
|
PrimaryUse the primary button on white and light backgrounds. |
Full-widthUse the full-width button if there is enough space in your integration. Use the full-width button to match other wide buttons. |
CondensedUse 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.
Use of the Google Wallet product name in text
You can use text to indicate to the user that their Generic 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.