Se você estiver desenvolvendo para usuários na Rússia, use os botões "Salvar no smartphone", porque a Carteira do Google não está disponível nesse país. Consulte os recursos e diretrizes relevantes. Se você estiver desenvolvendo para usuários fora da Rússia, atualize o botão Adicionar à Carteira do Google. Para isso, basta fazer o download dos recursos abaixo.
O objetivo desta documentação é ajudar você a criar imagens e outros elementos da interface do usuário perfeitos para o app Carteira do Google.
Recursos
Botão "Adicionar à Carteira do Google"
Use o botão Adicionar à Carteira do Google sempre que orientar os usuários a salvarem um passe ou cartão do seu app ou site na carteira deles. O botão Adicionar à Carteira do Google precisa chamar um dos fluxos da API Google Wallet. Esses fluxos abrem a Carteira do Google (no app para dispositivos móveis ou na Web) na tela que mostra as instruções para salvar cartões no dispositivo móvel e na Conta do Google. Use esse botão em apps, sites ou e-mails.
Os botões Adicionar à Carteira do Google estão disponíveis nos formatos Android XML, SVG e PNG.
Baixar recursos: XML do Android Baixar recursos: SVG Baixar recursos: PNGBotão "Ver na Carteira do Google"
O botão Ver na Carteira do Google é usado para vincular um usuário à carteira e exibir um cartão salvo anteriormente. Use esse botão em apps, sites ou e-mails.
Os botões Ver na Carteira do Google estão disponíveis nos formatos SVG e PNG.
Fazer o download de recursos: SVG Fazer o download de recursos: PNGTodos os botões exibidos nas comunicações do seu site, app ou e-mail precisam seguir as diretrizes da marca descritas nesta página. Os exemplos dessas diretrizes incluem estes, entre outros:
- Dimensão em relação a outros botões ou elementos semelhantes da página
- A forma e a cor dos botões não podem ser alteradas
- Espaço livre
Botões traduzidos
Os botões traduzidos da Carteira do Google são fornecidos em todos os mercados em que a plataforma está disponível. Se você estiver desenvolvendo para usuários nesses mercados, use sempre os botões listados acima. Não crie sua própria versão dos botões. Se não houver uma versão traduzida do botão disponível no seu mercado, use o botão em inglês.
Os botões Adicionar à Carteira do Google estão disponíveis nos seguintes idiomas: albanês, alemão, árabe, armênio, azerbaijano, bósnio, búlgaro, catalão, cazaque, chinês (Hong Kong), chinês (tradicional), croata, dinamarquês, eslovaco, esloveno, espanhol (América Latina), espanhol (Espanha), estoniano, filipino, finlandês, francês (Canadá), francês (França), georgiano, grego, hebraico, holandês, húngaro, indonésio, inglês (Austrália, Canadá, Estados Unidos, Grã-Bretanha, Índia, Singapura, África do Sul), islandês, italiano, japonês, letão, lituano, macedônio, malaio, norueguês, polonês, português (Brasil), português (Portugal), quirguiz, romeno, russo (Belarus), sérvio, tailandês, turco, ucraniano, uzbeque e vietnamita.
Nome localizado
Para ficar mais claro para os usuários, o nome do produto Carteira do Google é localizado em alguns mercados. Se você estiver desenvolvendo para usuários nesses países, use sempre o nome localizado abaixo para Web, e-mail e impressão. Não crie sua própria versão traduzida da Carteira do Google. Caso seu mercado não esteja listado abaixo, use o nome em inglês.
| País | Nome |
|---|---|
| Bielorrússia | Google Кошелек |
| Brasil | Carteira do Google |
| Chile | Billetera de Google |
| República Tcheca | Peněženka Google |
| Grécia | Πορτοφόλι Google |
| Hong Kong | Google 錢包 |
| Lituânia | Google Piniginė |
| Polônia | Portfel Google |
| Portugal | Carteira da Google |
| Romênia | Portofel Google |
| Eslováquia | Peňaženka Google |
| Taiwan | Google 錢包 |
| Turquia | Google Cüzdan |
| Emirados Árabes Unidos | محفظة Google |
| Ucrânia | Google Гаманець |
|
Estados Unidos (espanhol)
*Use este nome nos EUA se a IU estiver em espanhol |
Billetera de Google |
Tamanho
Ajuste a altura e a largura do botão Adicionar à Carteira do Google para que ele se ajuste ao seu layout. Se houver outros botões na página, o botão Adicionar à Carteira do Google precisará ser igual ou maior. O botão Adicionar à Carteira do Google não pode ser menor do que os outros.
Estilo
Os botões Adicionar à Carteira do Google estão disponíveis em duas variações: principal e compacta. O botão Adicionar à Carteira do Google tem apenas a opção em preto. Há versões traduzidas dos botões disponíveis. Não crie botões com seu próprio texto localizado.
| Principal | Condensado |
|---|---|
|
|
| Use o botão principal em planos de fundo brancos e claros. | Use o botão condensado se não houver espaço suficiente para a largura total ou do principal. |
Espaço livre
Sempre mantenha um espaço livre mínimo de 8 dp em todos os lados do botão Adicionar à Carteira do Google. O espaço livre não pode ser invadido por imagens nem texto.
Altura mínima
Todos os botões Adicionar à Carteira do Google precisam ter uma altura mínima de 48 dp.
O que fazer e o que não fazer
| O que fazer | O que não fazer |
|---|---|
| Recomendação: use somente os botões Adicionar à Carteira do Google fornecidos pelo Google. | Restrição: não crie seus próprios botões Adicionar à Carteira do Google ou altere a fonte, a cor ou o padding do botão. |
| Recomendação: use o mesmo estilo de botão em todo o site. | Restrição: os botões Adicionar à Carteira do Google não podem ser menores do que os outros. |
| Recomendação: verifique se os botões Adicionar à Carteira do Google estão do mesmo tamanho ou maiores que os outros. | Restrição: não altere a cor do botão. |
| Recomendação: mantenha a mesma proporção dos botões Adicionar à Carteira do Google ao redimensionar. | Restrição: não dimensione o botão livremente. |
| Recomendação: use a versão traduzida dos botões. | Restrição: não crie sua própria versão traduzida do botão. |
Práticas recomendadas para posicionamento de botões
Coloque o botão Adicionar à Carteira do Google em telas de confirmação do app, páginas da Web ou e-mails. Consulte as práticas recomendadas a seguir na hora de criar sua interface.
Programas de fidelidade, vales-presente e ofertas
Exiba o botão Adicionar à Carteira do Google nas telas de confirmação. Você também pode incluir o botão no seu site ou app, bem como em e-mails relevantes.
Uso do nome do produto Carteira do Google em textos
É possível usar texto para indicar que a oferta está salva no dispositivo do usuário.
As letras "C" e "G" precisam estar em maiúsculo
Sempre use "C" e "G" em caixa alta, seguidas de letras minúsculas, ao se referir à Carteira do Google. Não escreva todo o nome "Carteira do Google" em letras maiúsculas, a menos que esse seja o estilo tipográfico da sua IU.
Não abrevie "Carteira do Google"
Sempre escreva por extenso as palavras "Carteira", "do" e "Google".
Use o mesmo estilo da sua interface
Use a mesma fonte e estilo tipográfico de todos os textos na sua IU para escrever o nome "Carteira do Google". Não imite o estilo tipográfico do Google.
Sempre use a versão localizada do nome "Carteira do Google"
Sempre escreva "Carteira do Google" no artigo traduzido.
Design
Use os campos height e size da tag HTML g:savetoandroidpay para modificar a altura e a largura dos botões Adicionar à Carteira do Google. Use a
especificação textsize=large para aumentar muito os tamanhos do texto e do
botão nas implementações em dispositivos móveis ou nos casos com requisitos especiais de IU.
Use theme para definir a cor dos botões. Confira na
tabela a seguir como essas configurações afetam o botão
Adicionar à Carteira do Google.
Diretrizes para criação de cartões
Para garantir que seus cartões tenham uma boa aparência e funcionem bem, siga as diretrizes abaixo para limites de caracteres, notificações, cores de fundo e imagens principais.
Cor de fundo do card
É possível definir a cor do plano de fundo com o campo
hexBackgroundColor. Se você não definir o valor, um algoritmo
vai analisar o logotipo, encontrar a cor dominante e usá-la no
plano de fundo.
Evite zonas "vibrantes" de alta saturação (por exemplo, verde neon #00FF00 ou ciano elétrico #00FFFF). Essas cores causam cansaço visual intenso e fazem com que o texto "vaze" ou desapareça no plano de fundo. Use uma das cores recomendadas.
Cores recomendadas
#1a1a1a
#677088
#e8eaed
#f8f9fa
#ffffff
#d6322d
#f78f48
#f9bb2d
#1e7e3b
#216acf
#9147df
#fce8e6
#e6fffa
#e8f0fe
Imagens principais
O campo class.heroImage aparece como uma imagem de largura total abaixo
dos campos de dados do cartão.
Adicione uma imagem se ainda não tiver feito isso. Se você tiver uma imagem, siga as especificações abaixo. Se você não selecionar uma imagem, vamos mostrar uma imagem substituta da categoria do cartão.
Esta é uma lista de recomendações para imagens principais na interface do usuário:
| Diretriz | Descrição | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Tipo de arquivo preferido | PNG. Se você quiser que a cor de fundo do cartão apareça, use um PNG transparente. | ||||||||
| Tamanho recomendado | 1032x812 px | ||||||||
| Proporção | 1032:812 (aproximadamente 5:4) | ||||||||
| O que fazer e o que não fazer |
|
Conteúdo
Títulos, subtítulos, rótulos de campo e dados de campo: para aumentar a compreensão do usuário, mantenha os títulos e outros campos o mais curtos possível. Os limites de caracteres a seguir se aplicam ao inglês, mas serão traduzidos para outros idiomas, resultando em uma experiência de usuário variada em dispositivos e regiões. Em caso de dúvida, simplifique o conteúdo, mas sem deixar de transmitir os detalhes principais.
| Campo | Limite |
|---|---|
| Etiqueta do título | < 47 caracteres |
| Rótulo do subtítulo | < 88 characters |
| Rótulo do campo/título (por exemplo, data, descrição, classe, nome do passageiro) | < 20 caracteres |
| Rótulo de dados de campo (por exemplo, 19 de outubro de 2026, Economy Plus) | < 15 caracteres |
Para garantir a legibilidade, limite os dados a dois campos por linha e até três linhas, se possível.
Notificações
| Campo | Limite |
|---|---|
| Título | < 29 caracteres |
| Corpo recolhido | < 40 caracteres |
| Corpo expandido | < 80 characters |
Recomendamos respeitar os limites de caracteres para evitar truncamento para usuários com dispositivos pequenos ou tamanhos de fonte maiores. Consulte Notificações | Dispositivos móveis | Desenvolvedores Android para mais informações.
Logotipos
Diretrizes para imagens de logotipos
A Carteira do Google mascara seu logotipo em um formato circular.
Esta é uma lista de recomendações para imagens de logotipos na interface do usuário:| Diretriz | Descrição |
|---|---|
| Tipo de arquivo preferido | PNG |
| Tamanho mínimo | 660 pixels por 660 pixels |
| Proporção da imagem | 1:1 |
| Proporção da arte | 1:1 |
| Tamanho real do pixel | Dimensionamento para o tamanho do dispositivo |
| Máscara circular do logotipo |
O logotipo é mascarado para se ajustar em um design circular. Seu logotipo precisa se encaixar na área de segurança. Não mascare o logotipo antes. Deixe o logotipo em um quadrado com uma cor de fundo totalmente preenchida. O logotipo precisa ter uma margem de 15%, para que não seja cortado quando for mascarado. 
|
A Carteira do Google mascara seu logotipo em um formato circular.
Diretrizes para imagens de logotipos largos
As imagens de logotipo amplo são compatíveis com ingressos de um evento, cartões de embarque, cartões de transporte público com QR code, cartões fidelidade, ofertas, vales-presente, cartões genéricos e cartões pessoais genéricos. Esta é uma lista de recomendações para imagens de logotipos largos na interface do usuário:
| Diretriz | Descrição |
|---|---|
| Tipo de arquivo | PNG transparente |
| Tamanho recomendado | 1.280 px por 400 px |
| Tamanho mínimo |
400 px de altura, com largura proporcional (mais orientações na seção de proporção) Use imagens largas e retangulares. |
| Proporção |
16:5 
|
| Cor |
Use uma cor bem clara com alto contraste (como branco) para cartões com fundo escuro. Use uma cor bem escura com alto contraste (como preto) para cartões com fundo claro. 
|
Imagens adicionais
O campo *.imageModulesData.mainImage em uma classe ou objeto aparece como uma imagem de largura total em um cartão abaixo da imagem principal. Use apenas se
o cartão exigir uma imagem adicional para que o usuário entenda melhor.
Outras diretrizes para imagens
Esta é uma lista de recomendações para imagens adicionais na interface do usuário:
| Diretriz | Descrição |
|---|---|
| Tipo de arquivo preferido | PNG |
| Tamanho mínimo |
1860 px de largura, com altura variável. Use imagens largas e retangulares. Use uma imagem com um fundo colorido para conseguir os melhores resultados. |
| Tamanho da exibição |
A largura total do modelo e a altura proporcional. 
|
Imagens de código de barras
Algumas indústrias permitem imagens acima e abaixo do código de barras.
Imagens acima do código de barras
Esta é uma lista de recomendações para imagens acima do código de barras na interface do usuário:
| Diretriz | Descrição |
|---|---|
| Tipo de arquivo preferido | PNG |
| Altura máxima |
20 dp (em proporção máxima) O tamanho recomendado é de 80 pixels de altura, com largura de 80 a 780 pixels, se houver duas imagens. Isso permite que elas fiquem lado a lado. Se uma imagem for um quadrado e a outra, um retângulo, elas vão precisar ter 80x80 pixels e 780x80 pixels. |
| Proporção |
Sem restrições. Com altura e largura máximas de 20 dp em uma única imagem, use uma proporção 20:1. Para usar apenas uma imagem acima do código de barras, ocupe toda a largura (exceto preenchimento). A imagem precisa ter 1600 x 80 pixels. |
| Tamanho máximo da tela (imagem única) | 20 dp de altura e 400 dp de largura |
Imagem abaixo do código de barras
Esta é uma lista de recomendações para imagens abaixo do código de barras na interface do usuário:
| Diretriz | Descrição |
|---|---|
| Tipo de arquivo preferido | PNG |
| Altura máxima |
20 dp (em proporção máxima) O tamanho recomendado é 80 pixels de altura e de 80 a 1.600 pixels de largura. Se for quadrado, 80 x 80 pixels. Se for retangular, 1.600 x 80 pixels. |
| Proporção sem restrições. Com altura e largura máximas de 20 dp em uma imagem, use uma proporção 20:1. | Para ocupar toda a largura com uma imagem (exceto preenchimento), ela precisa ter 1.600 x 80 pixels. |
| O tamanho máximo de exibição é 20 dp de altura e 400 dp de largura. |
Módulos
Um módulo representa um agrupamento de campos em uma seção específica de um modelo. Confira na tabela a seguir as diretrizes sobre o número de módulos que você precisa incluir nas classes e nos objetos para que os cartões apareçam corretamente no app Carteira do Google.
| Diretriz | Descrição |
|---|---|
imageModulesData
|
Use apenas um imageModulesData na sua classe ou nos
objetos criados.
|
infoModuleData
|
Use até dois
Um |
linksModuleData
|
Use um total de até quatro URIs
É possível ter dois URIs |
textModulesData
|
Use até dois campos
É possível ter um URI |
infoModuleData
InfoModuleData contém informações do membro e personalizáveis
e aparece na exibição expandida. Use esse módulo para armazenar informações como
datas de validade, saldos de pontos ou de valores guardados.
linksModuleData
O módulo de links contém URIs para páginas da Web, números de telefone e endereços de e-mail. Esta é uma lista de recomendações para o módulo de links na interface do usuário:
| Diretriz | Exemplo de configuração | Imagem de exemplo |
|---|---|---|
Use o prefixo http: ao atribuir um URI a um site ou
um local no Google Maps. Com ele, o consumidor pode tocar no link e navegar até o site ou ver o local no Google Maps.
Esse prefixo também cria um ícone de um link ou mapa na frente da
descrição no cartão.
|
'uri': 'http://maps.google.com/?q=google'
|
|
'uri': 'http://developer.google.com/wallet/'
|
|
|
Use o prefixo tel: ao definir um número de telefone. Com ele,
o consumidor pode tocar no link para discar o número. Esse prefixo
também cria um ícone de um telefone em frente à descrição de texto
no cartão.
|
'uri': 'tel:6505555555'
|
|
Use o prefixo mailto: ao definir um endereço de e-mail.
Com ele, o consumidor pode tocar no link para enviar um e-mail ao
endereço. Esse prefixo também cria um ícone de e-mail na frente da
descrição de texto no cartão.
|
'uri': 'mailto:jonsmith@email.com'
|
|
Títulos, rótulos e nomes
Escreva títulos, rótulos e nomes com a primeira letra maiúscula em cada palavra.
Políticas de conteúdo
O conteúdo de cada campo em um cartão precisa aderir às políticas de conteúdo do Payments. O conteúdo dos sites que você menciona na classe também precisa seguir essas políticas.
Posicionamento dos dados da plataforma do parceiro
Para garantir que os usuários acessem seu app repleto de recursos ou o site sobre o
cartão, incorpore o link direto do app ou do
site à propriedade linksModuleData.* da classe ou objeto
do cartão. Assim os usuários podem navegar até sua
plataforma usando o cartão, que aparece na
Carteira do Google. Para conferir como é a renderização, acesse as seções de design das
categorias de cartões.