Diretrizes da marca

As diretrizes a seguir mostram como incluir a marca Google Pay nos seus sites.

Botões de pagamento do Google Pay

O botão de pagamento do Google Pay precisa sempre chamar a API Google Pay, que exibe a página em que os usuários podem selecionar a forma de pagamento.

Recursos

O método createButton() em JavaScript insere dinamicamente regras de CSS e um arquivo SVG da CDN do Google para ser usado com um elemento HTML <button>.

Todos os botões de pagamento do Google Pay no seu site precisam estar em conformidade com nossas diretrizes de marca, incluindo, entre outros, os requisitos a seguir:

O tamanho precisa ser relativo a outros botões ou elementos semelhantes da página. Você pode ajustar o tamanho do botão com a opção buttonSizeMode da API createButton.
A cor do botão precisa contrastar com a cor do plano de fundo da área ao redor.
O botão precisa manter uma quantidade mínima de espaço livre em todos os lados.

Se esse método de conveniência ou os idiomas compatíveis não atenderem às suas necessidades, entre em contato conosco.

Informações do cartão

A opção de informações do cartão exibe a rede da marca dele e os últimos quatro dígitos do cartão. Veja mais informações: ButtonOptions.

"Comprar com o Google Pay"

A opção "Comprar com o Google Pay" mostra um botão traduzido para um idioma compatível que corresponde às configurações do navegador do visitante. Veja mais informações: ButtonOptions.

Variantes de botões

Os botões "Doar", "Pagar", "Assinar", "Reservar", "Finalizar a compra", "Pedir" e "Ver" são exibidos automaticamente no idioma compatível que corresponde às configurações do navegador do visitante. Veja mais informações: ButtonOptions.

Estilo

Todos os botões de pagamento do Google Pay existem em dois estilos: escuro e claro. Veja exemplos de ambos na seção de recursos. O nome da marca Google Pay não pode ser traduzido. Não crie botões com seu próprio texto localizado.

Para oferecer contraste, use botões escuros em planos de fundo claros e botões claros em planos de fundo escuros ou coloridos.

Use a seguinte ferramenta para ter uma visualização prévia da aparência de cada botão:

Espaço livre

Sempre mantenha um espaço livre mínimo de 8 dp em todos os lados do botão de pagamento. O espaço livre não pode ser invadido por imagens nem texto.

Exemplos

Se você colocar um botão do Google Pay ao lado de outro botão, garanta que eles tenham o mesmo tamanho.

Use sempre um botão do Google Pay que contraste com o plano de fundo em que é exibido.

Ao ajustar o tamanho do botão do Google Pay, mantenha sempre as proporções consistentes.

O que fazer e o que não fazer

O que fazer	O que não fazer
Use somente os botões do Google Pay fornecidos pelo Google. Use os botões do Google Pay para iniciar o fluxo de pagamento. Use o mesmo estilo de botão em todo o site. Verifique se o tamanho dos botões do Google Pay permanece igual ou maior que os outros botões. Sempre escolha uma cor de botão que tenha contraste com o plano de fundo.	Não crie seus próprios botões do Google Pay nem altere a fonte, a cor, o raio do botão ou o preenchimento no botão de nenhuma maneira. Não use os botões de pagamento do Google Pay para iniciar uma ação que não seja o fluxo de pagamento. Não alterne entre diferentes estilos de cor. Não alterne entre versões com e sem texto. Não use uma cor de botão que seja semelhante ao plano de fundo. Por exemplo, não use o botão branco em um fundo da mesma cor.

O que fazer

O que não fazer

Use somente os botões do Google Pay fornecidos pelo Google.
Use os botões do Google Pay para iniciar o fluxo de pagamento.
Use o mesmo estilo de botão em todo o site.
Verifique se o tamanho dos botões do Google Pay permanece igual ou maior que os outros botões.
Sempre escolha uma cor de botão que tenha contraste com o plano de fundo.

Não crie seus próprios botões do Google Pay nem altere a fonte, a cor, o raio do botão ou o preenchimento no botão de nenhuma maneira.
Não use os botões de pagamento do Google Pay para iniciar uma ação que não seja o fluxo de pagamento.
Não alterne entre diferentes estilos de cor.
Não alterne entre versões com e sem texto.
Não use uma cor de botão que seja semelhante ao plano de fundo. Por exemplo, não use o botão branco em um fundo da mesma cor.

Marca Google Pay

Use somente a marca Google Pay fornecida nestas diretrizes quando você for mostrar o Google Pay como opção de pagamento nos seus fluxos.

Recursos

Clique no botão a seguir para fazer o download da marca Google Pay em um formato de arquivo SVG:

Fazer o download dos recursos

Marca

Use a marca Google Pay para mostrar o produto como opção de pagamento:

Inclua o nome "Google Pay" no texto próximo à marca caso já faça isso com outras marcas. Não mude a cor ou o tamanho do contorno da marca nem faça qualquer tipo de alteração. Use apenas a marca fornecida pelo Google.

Espaço livre

Sempre mantenha pelo menos metade (0,5x) da altura do G maiúsculo em todos os lados da marca de aceitação do Google Pay. O espaço livre precisa estar igual ao das outras identidades da marca exibidas.

Tamanho

Ajuste a altura à das outras identidades de marca exibidas no seu fluxo de pagamento. Não deixe a marca Google Pay menor que as outras.

Use a marca Google Pay para representar essa opção de pagamento em todo o fluxo de compra.

O que fazer e o que não fazer

O que fazer	O que não fazer
Use somente a marca Google Pay fornecida pelo Google. Use a marca Google Pay para indicar o produto como opção de pagamento durante os fluxos de finalização de compra.	Não faça nenhum tipo de alteração na marca nem crie a sua. Não traduza a palavra "Pay". Não exiba a marca Google Pay em um tamanho diferente ou menor que os logotipos das outras opções de pagamento.

Google Pay em textos

Você pode usar textos para indicar que aceita o Google Pay como opção de pagamento e promovê-lo na comunicação de marketing.

As letras “G” e “P” precisam estar em maiúsculo: Sempre use as letras "G" e "P" em caixa alta, seguidas de letras minúsculas. Não escreva todo o nome “GOOGLE PAY” em letras maiúsculas, a menos que esse seja o estilo tipográfico do seu site. Nunca escreva “GOOGLE PAY” em letras maiúsculas na sua comunicação de marketing.
Não abrevie o nome Google Pay: Sempre escreva as palavras "Google" e "Pay".
Ajuste ao estilo do seu site: Use a mesma fonte e o mesmo estilo tipográfico de todos os textos do seu site para escrever o nome "Google Pay". Não imite o estilo tipográfico do Google.
Não traduza o nome Google Pay: Sempre escreva "Google Pay" em inglês. Não traduza esse nome para outro idioma.
Use o símbolo de marca registrada na primeira vez que "Google Pay" aparecer na comunicação de marketing: Ao usar “Google Pay” nos seus materiais de marketing, inclua o símbolo de marca registrada (™) na primeira ocorrência do nome ou naquela que tiver o maior destaque. Não use esse símbolo para indicar o Google Pay como opção de pagamento no seu site.

Caso você não exiba identidades de marca para outras opções de pagamento, inclua o Google Pay apenas em forma de texto.

"Google Pay" precisa estar escrito na mesma fonte e no mesmo estilo tipográfico que todos os outros textos do seu site.

Práticas recomendadas do Google Pay

Maximize as conversões com páginas de pagamento e fluxos de finalização de compra que permitem ao cliente analisar as informações de pagamento e confirmar a transação de forma rápida e fácil.

Veja a seguir as práticas recomendadas:

Defina o Google Pay como sua opção de pagamento principal.: Sempre que possível, exiba o botão do Google Pay em destaque. Também é possível torná-lo a opção padrão ou a única opção de pagamento.
Permita que seus clientes façam compras sem configurar uma conta.: A criação de contas atrasa o processo de finalização da compra e pode resultar em carrinhos abandonados. Use o Google Pay para permitir que o usuário faça o pagamento com ainda mais rapidez. Se você quiser que seus clientes criem uma conta, permita que eles façam isso depois de concluir a compra.
Use o Google Pay para iniciar o pagamento ao finalizar a compra no carrinho: O botão do Google Pay exibe a página de pagamento. Nessa página, os clientes só podem selecionar e confirmar uma única forma de pagamento e um endereço de entrega. Verifique se você tem todas as outras informações necessárias antes de oferecer aos clientes a opção de selecionar o botão do Google Pay. Outras informações podem incluir o seguinte:; Se um cliente não fornecer as informações necessárias, ofereça um feedback em tempo real sobre os dados que estão faltando antes de mostrar a página de pagamento.
Além da finalização da compra no carrinho, adicione também o botão do Google Pay às páginas de detalhes dos produtos.: Acelere a compra de itens únicos ao permitir que os clientes façam compras individuais diretamente nas páginas de detalhes dos produtos. Se um cliente escolher essa opção, exclua os outros itens do carrinho, já que a página de pagamento permite confirmar apenas as informações da transação e do frete.
Inclua o Google Pay nas páginas de confirmação e nos recibos.: Ao exibir informações de pagamento em páginas de confirmação e comprovantes por e-mail, indique se o cliente pagou com o Google Pay e confira se você exibe o Google Pay da mesma maneira que outras formas de pagamento.; Nunca mostre os números da conta, as datas de validade dos cartões ou outros detalhes da forma de pagamento por completo ao usuário. Use sempre o texto descritivo retornado pela API Google Pay para identificar a forma de pagamento.; Veja a seguir exemplos de textos descritivos aceitáveis:

Combinar todas as informações

A imagem a seguir ilustra uma integração concluída. A integração também inclui as etapas Seleção do item/Pré-compra, Transação, Seletor do Google Pay e Pós-compra.

Essas telas representam um processo de compra recomendado do Google Pay para uma experiência no carrinho de compras.

Receber aprovação

Depois de fazer a integração da API Google Pay, é necessário solicitar a aprovação para todos os locais onde o Google Pay aparece ou é citado para receber acesso de produção.

Preencha nossa Lista de verificação de integração e envie sua integração da Web para análise. Você receberá aprovação ou feedback em um dia útil.