Se você estiver desenvolvendo para usuários na Rússia e no Japão, use os botões "Salvar no smartphone", porque a Carteira do Google não está ativa nesses países. Consulte os recursos e diretrizes relevantes. Se você estiver desenvolvendo para usuários fora da Rússia e do Japão, faça o download dos recursos abaixo para atualizar o botão Adicionar à Carteira do Google.
Esta seção da documentação foi projetada para ajudar a criar imagens e outros elementos da interface do usuário. Com isso, eles terão uma aparência incrível no app Carteira do Google.
Botão "Adicionar à Carteira do Google"
O botão Adicionar à Carteira do Google é usado sempre que você direciona os usuários para salvar um cartão 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 exibem o app Carteira do Google em que os usuários podem seguir as instruções para salvar cartões no dispositivo Android e na Conta do Google deles. Esse botão pode ser usado em apps, sites ou e-mails.
Recursos
Os botões Adicionar à Carteira do Google estão disponíveis nos formatos Android XML, SVG e PNG.
Fazer o download dos recursos: XML do Android Fazer o download dos recursos: SVG Fazer o download dos recursos: PNGTodos os botões Adicionar à Carteira do Google exibidos nos seus sites, apps ou e-mails precisam aderir às diretrizes da marca descritas nesta página. Veja alguns exemplos dessas diretrizes: 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 localizados
Os botões localizados da Carteira do Google são fornecidos para todos os mercados em que a Carteira do Google está disponível. Se você estiver desenvolvendo para usuários nesses mercados, use sempre os botões vinculados acima. Não crie sua própria versão do botão Adicionar à Carteira do Google. Se uma versão localizada do botão não estiver disponível no seu mercado, use a versão em inglês do botão.
O durante a çamos O teremsens Verifique!! nossa terem: O foi mesma:ver!!! == !!! O
Nome localizado
Para esclarecer o usuário, o nome do produto da Carteira do Google é localizado em mercados selecionados. 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 localizada da "Carteira do Google". Se o mercado não estiver listado abaixo, use a "Carteira do Google" em inglês.
| País | Nome |
|---|---|
| Belarus | Google КоКелек |
| Brasil | Carteira do Google |
| Chile | Billetera do Google |
| República Tcheca | Peněěenka, Google |
| Grécia | |
| Hong Kong | 錢包 do Google |
| Lituânia | Google Pinigingce |
| Polônia | Portfel |
| Portugal | Carteira da Google |
| Romênia | Google Portofel |
| Eslováquia | PeňaDeployenka Google |
| Taiwan | 錢包 do Google |
| Turquia | Google Cüzdan |
| Emirados Árabes Unidos | محفظة do Google |
| Ucrânia | Google Уаманець |
|
Estados Unidos (espanhol)
*Use esse nome nos EUA se a IU estiver em espanhol |
Billetera do Google |
Tamanho
Ajuste a altura e a largura do botão Adicionar à Carteira do Google para se ajustar ao layout. Se houver outros botões na página, o botão Adicionar à Carteira do Google precisa ser igual ou maior. Não reduza o botão Adicionar à Carteira do Google menor que os outros botões.
Estilo
Os botões Adicionar à Carteira do Google estão disponíveis em duas variações: principal e condensada. O botão Adicionar à Carteira do Google só fica em preto. São fornecidas versões localizadas do botão. 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 principal ou de largura total. |
Espaço livre
Sempre mantenha o 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 preenchido por imagens ou textos.
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. | Don't: crie seus próprios botões Adicionar à Carteira do Google ou altere a fonte, a cor, o raio ou o preenchimento do botão de alguma maneira. |
| Recomendação:use o mesmo estilo de botão em todo o site. | Don't: deixe os botões Adicionar à Carteira do Google menores do que os outros. |
| Recomendação: verifique se o tamanho dos botões Adicionar à Carteira do Google permanece igual ou maior que os outros botões. | Don't:muda a cor do botão. |
| Recomendação:mantenha a proporção dos botões Adicionar à Carteira do Google ao redimensionar. | Don't: faça o escalonamento do botão. |
| Recomendação: use a versão localizada dos botões. | Don't: cria sua própria versão localizada do botão. |
Práticas recomendadas para posicionamento de botões
Mostre o botão Adicionar à Carteira do Google nas telas do app de confirmação, páginas da Web ou e-mails. Consulte as práticas recomendadas a seguir para orientar o design da IU.
Fidelidade, vales-presente, ofertas
Mostre 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 ou incluí-lo em e-mails relevantes.
Uso do nome do produto da Carteira do Google em texto
É possível usar texto para indicar que o cartão de fidelidade do usuário é salvo no dispositivo.
As letras maiúsculas usam as letras "G" e "W"
Use sempre uma letra maiúscula "quot;G" e uma letra "quot;W"" seguida de letras minúsculas para fazer referência à Carteira do Google. Não use letras maiúsculas no nome completo "quot;Google Wallet" a menos que corresponda ao estilo tipográfico da sua IU.
Não abrevie a Carteira do Google
Sempre escreva as palavras "Google" e "Wallet."
Combine o estilo na sua IU
Defina "Google Wallet" na mesma fonte e no mesmo estilo tipográfico que todos os outros textos da sua IU. Não imite o estilo tipográfico do Google.
Sempre usar a versão localizada da "Carteira do Google"
Sempre escreva "Google Wallet" no texto localizado fornecido.
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 drasticamente os tamanhos de
texto e botão em implementações para dispositivos móveis ou casos com requisitos especiais de IU.
Use o theme para definir a cor dos botões. A tabela a seguir mostra como essas configurações afetam o botão Adicionar à Carteira do Google.
Logotipos
A Carteira do Google mascara seu logotipo em forma circular.
Diretrizes para imagens de logotipos
Esta é uma lista de recomendações de interface do usuário para imagens de logotipos:
| Diretriz | Descrição |
|---|---|
| Tipo de arquivo preferido | PNG |
| Tamanho mínimo | 660 x 660 pixels |
| Proporção da imagem | 1:1 |
| Proporção da arte | 1:1 |
| Tamanho real do pixel | Escalonamento para o tamanho do dispositivo |
| Máscara circular do logotipo |
O logotipo é mascarado para caber em um design circular. Certifique-se de que o logotipo se encaixe na área segura. Não pré-oculte seu logotipo. Deixe o logotipo em um quadrado com uma cor de fundo totalmente preenchida. O logotipo precisa ter uma margem de 15%. Dessa maneira, ele não é cortado quando mascarado. 
|
Cor de fundo do cartão
Você pode definir a cor do plano de fundo com o campo
hexBackgroundColor. Se você não definir o valor, um algoritmo analisará o logotipo, encontrará a cor dominante e a usará para a cor de fundo.
Imagens principais
O campo class.heroImage aparece como um banner de largura total atravessando o corpo do cartão.
Diretrizes para imagens principais
Esta é uma lista de recomendações de interface do usuário para imagens principais:
| Diretriz | Descrição |
|---|---|
| Tipo de arquivo preferido | PNG |
| Tamanho recomendado |
1.032 x 336 px Use imagens largas e retangulares. Use uma imagem com um plano de fundo colorido para conseguir os melhores resultados. |
| Proporção | 3:1 ou maior |
| Tamanho da exibição |
Indica a largura total do cartão e a altura proporcional. 
|
Imagens de largura total
O campo *.imageModulesData.mainImage em uma classe ou objeto
aparece como uma imagem de largura total em um cartão.
Diretrizes para imagens de largura total
Esta é uma lista de recomendações de interface do usuário para imagens de largura total:
| Diretriz | Descrição |
|---|---|
| Tipo de arquivo preferido | PNG |
| Tamanho mínimo |
A largura variável é de 1.860 px. Use imagens largas e retangulares. Use uma imagem com um plano de fundo colorido para conseguir os melhores resultados. |
| Proporção | Variável |
| Tamanho da exibição |
É a largura total do modelo e a altura proporcional.
|
| Use o mesmo esquema de cores utilizado no seu logotipo. |
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
Veja a seguir uma lista de recomendações para imagens acima do código de barras na interface do usuário:
| Guideline | 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 80 a 780 pixels de largura, se houver duas imagens. Isso permite que elas fiquem lado a lado. Se uma imagem for um quadrado e a outra for um retângulo, as imagens precisarão ter 80 x 80 px e 780 x 80 px. |
| Proporção |
Sem restrições. Para um máximo de 20 dp de altura e largura de 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 ser de 1600x80 px. |
| Tamanho máximo de exibição (imagem única) | 20 dp de altura e 400 dp de largura |
Imagem abaixo do código de barras
Veja a seguir uma lista de recomendações para a imagem abaixo do código de barras na interface do usuário:
| Guideline | 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 1600 pixels de largura. Se quadrado, 80 x 80 px. Se for retangular, 1600 x 80 pixels. |
| Proporção sem restrições. Para um máximo de 20 dp de altura e largura, use uma proporção 20:1. | Se você quiser uma imagem de largura total (exceto preenchimento), ela precisará ter 1600 x 80 px. |
| O tamanho máximo de exibição é 20 dp de altura e 400 dp de largura. |
Módulos
Um módulo representa um grupo de campos em uma seção específica de um modelo. A tabela a seguir contém diretrizes para o número de módulos que você precisa incluir nas classes e nos objetos, a fim de garantir que os cartões sejam exibidos 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
Uma |
linksModuleData
|
Use 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 é mostrado na visualização expandida. Use esse módulo para armazenar informações como
datas de validade, saldos de pontos ou saldos de valores armazenados.
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 de interface do usuário para o módulo de links:
| Guideline | Exemplo de configuração | Imagem de exemplo |
|---|---|---|
Use o prefixo http: ao atribuir um URI a um site ou
local no Google Maps. Esse prefixo permite que um consumidor toque no link e navegue até o site ou visualize o local no Google Maps.
Ele 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. Esse
prefixo permite que um consumidor toque no link para discar o número. Esse prefixo
também cria um ícone de um telefone em frente à descrição em texto
no cartão.
|
'uri': 'tel:6505555555'
|
|
Use o prefixo mailto: ao definir um endereço de e-mail.
Esse prefixo permite que um consumidor toque no link para enviar um e-mail ao
endereço. Esse prefixo também cria um ícone de um e-mail na frente da
descrição do texto no card.
|
'uri': 'mailto:jonsmith@email.com'
|
|
Títulos, rótulos e nomes
Escreva títulos, rótulos e nomes em letras maiúsculas, de modo que cada palavra comece com uma letra maiúscula.
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 referenciados na classe também precisa aderir a essas políticas.
Posição de 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
o site na propriedade do cartão ou do
objeto linksModuleData.* do cartão. Isso permite que um usuário navegue até sua
plataforma pelo cartão, que aparece na
Carteira do Google. Para ver como ele é renderizado, acesse as seções de design das indústrias de
cartões.