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 loyalty card to their Android-powered device. This button can be used in merchant apps, websites, emails, or SMS texts.
AssetsDownload assets - EPS 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
- 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.
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.
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.
Use the primary button on white and light backgrounds.
Use the full-width button if there is enough space in your integration. Use the full-width button to match other wide buttons.
Use the condensed button if there is not enough space for the primary or full-width.
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.
All Add to Google Wallet buttons need to have a minimum height of 36 dp.
Dos and 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.
We recommend that you place the Add to Google Wallet button near user experiences in your app, site, or email communication where you display current customer loyalty information. It’s also useful to display the button on confirmation screens that surface right after users sign up for your loyalty program in your app or website.
Use of the Google Wallet product name in text
You can use text to indicate to the user that their loyalty card 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.