Este é um documento destinado aos integradores de novos meios de pagamento ao Smart Checkout da VTEX. Além da integração back-end com o PCI Gateway, é essencial que os integradores forneçam uma interface com o usuário que contenha a identidade visual do meio de pagamento a ser apresentada.
Oferecemos o código de um dos nossos meios de pagamentos já integrados para servir de base na contrução de novos meios. A UI pode ser vista neste endereço.
index.html: HTML do checkout (não deve ser alterado)guide: pasta dos arquivos do guiapayment: pasta dos arquivos do pagamentopayment.html: HTML de exemplo do pagamentopayment.less: estilo de exemplo do pagamentoimg: pasta das imagens do pagamentolocale: pasta dos arquivos de traduçãopt-BR.json: português do Brasilen-US.json: inglês dos EUAes.json: espanhol LATAM
Para começar a escrever seu código, você deve fazer um fork do repositório. Após clonar o repositório na sua máquina, existem duas formas de rodar o projeto:
- Com servidor local: você pode utilizar o http-server para rodar um simples servidor local;
- Sem servidor local (não funciona no Chrome): basta abrir o arquivo
index.htmlno navegador.
A comunicação sobre o meio de pagamento é iniciada ao selecioná-la. É o momento em que o consumidor manifesta algum interesse em utilizá-la. Dessa maneira, é importante comunicar, resumidamente e de forma clara, como funciona e quais são as vantagens de se utilizar este meio. Dados de contato, sendo telefone ou e-mail, também podem ajudar o consumidor a resolver algum problema ou dúvida no momento da compra.
Os textos devem ser produzidos em três idiomas: português, inglês e espanhol. Você pode utilizar o seletor de idiomas localizado no canto superior direito para validar os textos na UI.
As imagens utilizadas na UI também podem ser alteradas para atender melhor cada idioma.
A utilização de cores e imagens deve seguir a identidade visual do meio de pagamento, sem restrições. Idealmente, as imagens devem ser otimizadas e agrupadas em uma só, utilizando a técnica de css sprites.
Seguindo o padrão do Bootstrap, as fontes adotadas no Smart Checkout são, nesta ordem: Helvetica Neue, Helvetica, Arial, sans-serif. Não é recomendado utilizar outras fontes para textos. Caso seja extremamente necessário, estas fontes devem fazer parte do pacote padrão do sistema operacional, já que não é possível importar novas fontes.
É vetada a utilização de links e scripts. Além de não ser essencial para o fechamento da compra, o uso de links e scripts pode distrair o consumidor e até levá-lo para fora do checkout. Dessa forma, o conteúdo deve ser apenas informativo e o único call-to-action apresentado na tela deve ser o botão de Finalizar compra, já apresentado atualmente.
A interface desenvolvida deve atender os dispositivos:
- Desktop e tablet horizontal (largura maior ou igual a 768px). O container possui 462px de largura e altura que pode variar entre 200px e 330px, dependendo do conteúdo;
- Tablet vertical e mobile (largura menor que 768px). O container possui 100% de largura, com margin de 30px e padding de 15px.
Outros breakpoints podem ser adicionados livremente.
O código do Smart Checkout é baseado nos padrões do Bootstrap v2.3.2. Classes de grid, alinhamento e outras podem ser utilizadas para estruturar o código do HTML e do CSS.
O código do estilo pode ser escrito utilizando o pré-processador CSS, LESS.
Na escrita do código, é recomendado:
- Utilizar apenas classes como seletores;
E obrigatório:
- Não utilizar seletores globais, que podem interferir na estrutura ou em outros elementos da página;
- Não utilizar IDs como seletores;
- Utilizar no máximo dois seletores aninhados;
- Utilizar classes em inglês, com letras minúsculas e palavras separadas por hífen. Ex: “.my-payment-method”.