{"id":21835847,"url":"https://github.com/vtex/checkout-ui-payment-guide","last_synced_at":"2025-06-11T17:03:08.913Z","repository":{"id":35918998,"uuid":"40206626","full_name":"vtex/checkout-ui-payment-guide","owner":"vtex","description":"Guia de integração de meios pagamentos com a UI do Smart Checkout","archived":false,"fork":false,"pushed_at":"2015-08-05T22:27:43.000Z","size":172,"stargazers_count":2,"open_issues_count":0,"forks_count":4,"subscribers_count":6,"default_branch":"gh-pages","last_synced_at":"2025-04-07T07:36:43.137Z","etag":null,"topics":["srv-checkout-ui","xp-shopping"],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vtex.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-04T20:09:07.000Z","updated_at":"2019-07-03T20:48:34.000Z","dependencies_parsed_at":"2022-09-18T01:46:29.688Z","dependency_job_id":null,"html_url":"https://github.com/vtex/checkout-ui-payment-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vtex/checkout-ui-payment-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Fcheckout-ui-payment-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Fcheckout-ui-payment-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Fcheckout-ui-payment-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Fcheckout-ui-payment-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vtex","download_url":"https://codeload.github.com/vtex/checkout-ui-payment-guide/tar.gz/refs/heads/gh-pages","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vtex%2Fcheckout-ui-payment-guide/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259301677,"owners_count":22836976,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["srv-checkout-ui","xp-shopping"],"created_at":"2024-11-27T20:25:26.616Z","updated_at":"2025-06-11T17:03:08.892Z","avatar_url":"https://github.com/vtex.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Guia de desenvolvimento de layout para meio de pagamento no _Smart Checkout_ VTEX\n\n## Introdução\nEste é 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.\n\nOferecemos 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](http://vtex.github.io/checkout-ui-payment-guide/).\n\n## Como utilizar este repositório\n\n### Estrutura\n\n* `index.html`: HTML do checkout (não deve ser alterado)\n* `guide`: pasta dos arquivos do guia\n* `payment`: pasta dos arquivos do pagamento\n    * `payment.html`: HTML de exemplo do pagamento\n    * `payment.less`: estilo de exemplo do pagamento\n    * `img`: pasta das imagens do pagamento\n    * `locale`: pasta dos arquivos de tradução\n        * `pt-BR.json`: português do Brasil\n        * `en-US.json`: inglês dos EUA\n        * `es.json`: espanhol LATAM\n\n### Desenvolvimento\n\nPara 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:\n\n* __Com servidor local__: você pode utilizar o [http-server](https://www.npmjs.com/package/http-server) para rodar um simples servidor local;\n* __Sem servidor local (não funciona no _Chrome_)__: basta abrir o arquivo `index.html` no navegador.\n\n## Como projetar a solução de interface com o usuário\n\n### Comunicação\nA 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.\n\nOs 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_.\n\n![Seletor de idioma](/guide/img/locale.png)\n\nAs imagens utilizadas na _UI_ também podem ser alteradas para atender melhor cada idioma.\n\n### Design e elementos de _UI_\n\n#### Cores e imagens\nA 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.\n\n#### Tipografia\nSeguindo 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.\n\n#### Links e scripts\nÉ 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.\n\n#### Responsividade\nA interface desenvolvida deve atender os dispositivos:\n\n* ___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;\n* ___Tablet_ vertical e _mobile_ (largura menor que 768px)__. O container possui 100% de largura, com margin de 30px e padding de 15px.\n\nOutros _breakpoints_ podem ser adicionados livremente.\n\n### Front-end\n\n#### Bootstrap Framework\nO 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.\n\n#### CSS e LESS\nO código do estilo pode ser escrito utilizando o pré-processador CSS, LESS.\n\nNa escrita do código, é recomendado:\n\n* Utilizar apenas classes como seletores;\n\nE obrigatório:\n\n* __Não__ utilizar seletores globais, que podem interferir na estrutura ou em outros elementos da página;\n* __Não__ utilizar IDs como seletores;\n* Utilizar no máximo dois seletores aninhados;\n* Utilizar classes em inglês, com letras minúsculas e palavras separadas por hífen. Ex: “.my-payment-method”.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex%2Fcheckout-ui-payment-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvtex%2Fcheckout-ui-payment-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvtex%2Fcheckout-ui-payment-guide/lists"}