Diretrizes da marca

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 Google Pay.

Imagens principais

O campo class.heroImage é exibido 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 Exemplo
Tipo de arquivo preferido: PNG.
O tamanho recomendado é 1032 x 336 pixels. Use imagens largas e retangulares. Use uma imagem com um fundo colorido para conseguir resultados melhores.
Proporção 3:1 ou mais larga.
O tamanho de exibição será a largura total do cartão, além da altura dimensionada proporcionalmente.

Imagens de largura total

O campo *.imageModulesData.mainImage em uma classe ou em um objeto é exibido como uma imagem de largura total em um programa de fidelidade ou em uma oferta expandida.

Diretrizes para imagens de largura total

Esta é uma lista de recomendações de interface do usuário para imagens de largura total:

Diretriz Exemplo
Tipo de arquivo preferido: PNG.
O tamanho mínimo é 1860 pixels de largura, com altura variável. Use imagens largas e retangulares. Use uma imagem com um fundo colorido para conseguir os melhores resultados.
Proporção variável.
O tamanho de exibição será a largura total do modelo ("cartão" de fundo branco), além da altura dimensionada proporcionalmente.
Use o mesmo esquema de cores utilizado na imagem do 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:

Diretriz Exemplo
Tipo de arquivo preferido: PNG.  
A 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 for um retângulo, as imagens deverão ter 80 x 80 pixels e 780 x 80 pixels.
Sem proporção restrita. 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). As imagens precisam ter 1600 x 80 pixels.
O tamanho máximo de exibição de uma única imagem é 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:

Diretriz Exemplo
Tipo de arquivo preferido: PNG.  
A 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 for quadrado, 80 x 80 pixels. Se for retangular, 1600 x 80 pixels.
Sem proporção restrita. Para um máximo de 20 dp de altura e largura, use uma proporção 20:1. Para ocupar toda a largura com uma imagem (exceto preenchimento), ela deve ter 1600 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. A tabela a seguir contém diretrizes para o número de módulos que você precisa incluir nas classes e nos objetos para garantir que os cartões sejam exibidos corretamente no app Google Pay.

Diretriz Exemplo
Use apenas um imageModulesData na classe ou nos objetos criados.
Use até dois infoModuleData, na classe ou nos objetos criados. Um infoModuleData pode definir informações específicas da conta do usuário, como "Nome do membro" e "Número da assinatura".
Use até quatro URIs linksModuleData no total na classe ou nos objetos criados. Convém ter dois URIs linksModuleData na classe: um para o URI do site e outro para um número de telefone da central de ajuda. Convém ter dois URIs linksModuleData no objeto que define um URI específico da conta do usuário e locais por perto.
Use até dois campos textModulesData entre a classe e os objetos criados. Convém ter um textModulesData na classe que define detalhes do programa e outro textModulesData no objeto que define detalhes específicos de uma conta do usuário.

infoModuleData

InfoModuleData contém informações do membro e personalizáveis. Ele é mostrado na exibição expandida. Informações como data de validade, saldo de pontos ou saldo do valor armazenado precisam ser armazenadas no módulo de informações.

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 interface do usuário destinada ao módulo de links:

Diretriz Exemplo
Use o prefixo http: ao definir um URI para um site ou um 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. 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/pay/passes/'

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. Ele também cria um ícone de um telefone na frente da descrição 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. Ele também cria um ícone de um e-mail na frente da descrição no cartão. 'uri': 'mailto:jonsmith@email.com'

Títulos, rótulos e nomes

A primeira letra de cada palavra em títulos, rótulos e nomes precisa ser escrita em 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.

Botão Salvar no Google Pay

Design

Use os campos height e size da tag HTML g:savetoandroidpay para modificar a altura e a largura dos botões Salvar no Google Pay. Quando você especifica textsize=large, o tamanho do texto e do botão aumenta drasticamente, o que pode ser útil 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 Salvar no Google Pay resultante.

Configuração Resultado
theme de dark
theme de light

Posição

Para garantir que os usuários possam salvar, resgatar e se engajar com cartões desenvolvidos por você, recomendamos colocar os botões ou os links Salvar no Google Pay (S2GP) em todos os fluxos contextuais. Em geral, o botão precisa ser posicionado próximo de botões de ação de uso semelhante, como o botão Imprimir oferta.

As sugestões a seguir são maneiras de integrar o botão Salvar no Google Pay aos fluxos que alguns parceiros descobriram que funcionam bem.

Cartões de fidelidade

Considere colocar o botão Salvar no Google Pay no fluxo em que um usuário visualize o número ou o cartão de fidelidade no app Android ou site. Alguns parceiros foram bem-sucedidos apresentando o botão aos usuários depois que eles fizeram login ou se inscreveram no app.

Vales-presente

Considere colocar o botão Salvar no Google Pay na tela de confirmação depois que um usuário comprar um vale-presente no site ou no app. Também é possível colocá-lo no e-mail, no SMS ou na tela de confirmação que um destinatário do vale-presente recebe.

Ofertas

É possível colocar o botão Salvar no Google Pay no site ou no app em que um usuário acessa a oferta ou em qualquer e-mail ou SMS usado para distribuir a oferta (usando nossos links para salvar).

Ingressos

O botão pode ser colocado ao final de um fluxo de compra, quando um usuário compra um ingresso no site ou no app, no e-mail de confirmação ou no SMS após uma compra. Considere colocar o botão Salvar no Google Pay no mesmo lugar em que um usuário acessa o ingresso no app ou no site.

Cartões de embarque

É possível colocar o botão ao final do fluxo de check-in no site para computadores e dispositivos móveis ou no app para dispositivos móveis. Ele também pode ser colocado na tela em que um usuário visualiza o cartão de embarque no site ou no app para dispositivos móveis ou no pós-check-in no e-mail ou SMS de confirmação.

Fazer download

Quando você usa um link para permitir que usuários façam o download de um cartão de fidelidade, um vale-presente ou uma oferta, uma imagem do botão do Google Pay sobreposta ao link direto garante uma experiência consistente ao usuário. Clique em Fazer download dos recursos para fazer o download dos botões do Google Pay, disponíveis em vários idiomas:

Fazer o download dos recursos

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 na classe do cartão ou na propriedade linksModuleData.* do objeto. Isso permite ao usuário navegar até a plataforma pelo cartão exibido no Google Pay. Para ver como ele é renderizado, consulte as seções de design das indústrias de cartões.