pagarme/artis

:credit_card: Projeto de Checkout desenvolvido em parceria entre MundiPagg e Pagar.me.

Artis Checkout |

Projeto em desenvolvimento em parceria entre Mundipagg e Pagar.me.

Este repositório está em fase de desenvolvimento, então muitas mudanças ainda podem acontecer. A ideia é construirmos um Checkout que possa ser facilmente integrado em diversos e-commerces do Brasil, de forma segura e confiável.

O desenvolvimento é open source, ou seja, todo o código fonte estará disponível para as pessoas que queiram conhecer, contribuir e melhorar este projeto.

Veja online os componentes desenvolvidos no nosso Storybook

Rodando o projeto

Para executá-lo, basta instalar as dependências do projeto e rodar o comando start usando seu gerenciador de dependências.

Ex:

yarn start

npm start

Implementando o modal de checkout

O checkout renderizará um modal contendo os passos necessários para habilitar o pagamento de diversas formas (boleto, cartões com opção de parcelamento, etc).

Nos arquivos custom.html e simple.html você pode ver um exemplo de como ficaria a implementação em cada um dos casos, a intenção é que ambas possibilitem uma implementação fácil, sendo que uma delas permite um nível de customização maior.

Desenvolvimento

Este projeto foi iniciado com Create React App e recomendamos o uso do Yarn para o fluxo de desenvolvimento.

Docker

Caso não queira executar os comandos que colocarei posteriormente, você pode executar os arquivos contidos na pasta docker:

• docker_bootstrap - Cria imagem e sobe o container;
• docker_run - Sobe o container;
• docker_bash - Acessa o bash do container.

Criando a imagem e subindo container

docker-compose up

Caso queira rodar o container em background

docker-compose up -d

Acessando o bash

docker exec -it artis sh

Instalação

Para instalar as dependências do projeto usando yarn:

$ `yarn install`

Usando npm:

$ `npm i`

Outros scripts disponíveis

start

Este comando inicia o projeto em ambiente de desenvolvimento, você pode acessá-lo pela URL http://localhost:3000 em seu browser de preferência.

• yarn

$ `yarn start`

• npm

$ `npm start`

storybook

O Storybook é um ambiente de desenvolvimento para testes de UI. Utilizamos essa ferramenta para renderizar componentes e verificar seus comportamentos.

Ao rodar o comando, acesse o Storybook pela URL http://localhost:6006.

• yarn

$ `yarn storybook`

• npm

$ `npm run storybook`

coverage

O script de coverage valida o código em ./webapp/src e retorna tanto no próprio terminal quanto em uma página HTML (./webapp/coverage/index.html) um report final gerado pelo Jest em conjunto com o nyc

• yarn

$ `yarn coverage`

• npm

$ `npm run coverage`

test-coverage

Este comando está disponível caso você queira rodar somente o report de coverage no terminal, sem gerar o arquivo HTML.

• yarn

$ `yarn test-coverage`

• npm

$ `npm run test-coverage`

test

O comando test usa o Jest para validar os testes definidos em arquivos *.test.js em modo watch por padrão, ou seja, caso você altere o teste salve o arquivo, os testes serão revalidados automaticamente.

• yarn

$ `yarn test`

• npm

$ `npm t`

lint

Este comando usa o estlint para validar a sintaxe de arquivos .js e o stylelint para validar arquivos .css e mantermos os padrões definidos nos arquivos de configuração (.eslintrc e .stylelintrc, respectivamente).

• yarn

$ `yarn lint`

• npm

$ `npm run lint`

Estrutura dos componentes

Estamos usando o Zeplin, em conjunto com o time de UX, para definir e seguir os layouts em desktop e mobile (somente pessoas com acesso conseguirão ver o conteúdo):

• Layout Mobile: https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/59e75a8daa565b58180d071b
• Layout Desktop: https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/59e75a07380b7f748505409e

E a estrutura inicial definida segue a seguinte composição dos principais componentes (pode sofrer alterações):

<Header>
/*
  Contém logo e botões de navegação
*/
</Header>

<Content>
/*
  Será responsável por mostrar o contéudo em si de cada página
  Também lida com progress bar
*/
</Content>

<Footer>
/*
  Contém botão de navegação e valor total
*/
</Footer>

Contribuindo

Para mais informações sobre como contribuir, clique aqui.

Licença

Este projeto está licenciado sob a Licença MIT, ou seja, você pode usá-lo da forma que preferir, incluindo suas próprias modificações em versões próprias.

artis's Issues

Nome do projeto

Nosso squad acredita que mercurio-checkout não é um nome adequado para o projeto. O nome mercurio foi dado ao nosso squad e é um nome apenas para uso interno aqui na Pagar.me.

Chegou a hora de fazermos um brainstorm! Então convocamos todo mundo para comentar nessa issue sugerindo um nome legal para o projeto. Depois disso podemos fazer uma votação para escolher o nome final.

Se você tem uma sugestão comente aqui, toda ideia é bem vinda =)

Criar parâmetro "customerData"

No checkout 1.0 e 1.1 uma das propriedades que o cliente passa é data-customer-data, que habilita os passos necessários para que sejam incluídas informações sobre o comprador e serão posteriormente enviadas para o antifraude.

Isso é algo que pensamos nesse checkout? Se sim, talvez seja necessário criar uma task para que possamos inserir no App alguma prop que valide se deve ou não mostrar os primeiros passos

Ref.: https://github.com/pagarme/mercurio/issues/5

Adicionar Título: pages e progressbar

Tivemos algumas mudanças de layout e agora temos titulo na Progressbar e na Página:
https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/5a2ed6521e5fb8ed46013511

Página "dados pessoais"

Ajustes Finos no style do projeto

E preciso deixar o mais próximo possível do layout exposto no Zeplin.

Telas MVP Checkout

O que é o MPV de Checkout?
Corresponde ao processo de finalização de uma compra usando cartão de crédito ou boleto bancário. Faremos de forma responsiva, então precisaremos das telas desktop e mobile, mantendo consistência entre eles.

Telas MVP

Tema: Dark

Cor default: Situação/cor default caso o lojista não escolha a cor primária do checkout.

Erros: exemplo campos com dados inconsistentes.

Textos: atualizar com textos finais revisados pela Bia

Passos:

1. Identificação do cliente

• Dados pessoais (Nome, E-mail, CPF, DDD e telefone);

2. Endereço de cobrança

• CEP, Rua, número, complemento, bairro, cidade, estado;

3. Endereço de entrega

• mesmo endereço de cobrança e outro endereço já cadastrado;
• fluxo de excluir endereço cadastrado;
• fluxo de editar endereço cadastrado;
• fluxo de cadastrar novo endereço de entrega.

4. Forma de pagamento

Cartão de crédito:

• Imagem do cartão sem dados preenchidos (ficará vazio)?
• Imagem do cartão com dados preenchidos
• Verso do cartão sem dados preenchidos (ficará vazio)?
• Verso do cartão com dados preenchidos
• Valor da compra,
• Número do cartão
• Nome
• Quantidade de parcelas (simular o comportamento)
• Data de validade
• Cvv (simular tooltip)

Boleto bancário

• É necessário ter uma confirmação/ clique para gerar o boleto (manter consistência do fluxo de confirmação da tela de cartão de crédito)

5. Mensagem feedback da transação

• Mensagem de sucesso de Cartão de crédito

Mensagem de sucesso de Boleto
Inserir as funcionalidades de:

• Salvar arquivo
• Encaminhar por email (comportamento)
• Copiar código de barras (comportamento)
• Mensagem aguardando confirmação

6. Mensagem de transação recusada
   Referência de textos e situações de erro: pagarme-checkout #142

• Mensagem de recusa de Cartão de crédito
• Mensagem de recusa de Boleto

Dúvida sobre o Render do projeto

Questão levantada pelo @vcapretz no Slack:

só que o ponto é: um app react de verdade tem um public/index.html, que contém um div pai, ou mesmo só o body, o webpack processa isso e adiciona o js gerado nos scripts, dentro do header, pra fazer a parada funcionar.

o src/index.js tem o render master do react, que pega o componente paizão e renderiza na div root (ou dentro do body).

a questão aqui é: nós nao sabemos onde renderizar até o cliente dizer em qual elemento o checkout vai abrir. uma possível solução é tirarmos a opcao do cliente de escolher onde renderizar, e deixar com o nosso app a responsabilidade de criar uma div com uma classe/id aleatorio pra nao dar conflito com o html dele e renderizarmos lá.

outra questão que fico pensando: o JS final gerado pelo webpack na build nao faz com o que o React seja dependencia né? pode ser colocado em qualquer pagina que funciona?

Componente MaskedInput

Precisamos desenvolver um componente de MaskedInput, ele basicamente vai ser um wrapper do input, mas contará com a opção de definir qual máscara ele recebe, para que possamos aplicar telefone, cep, cpf, etc

Icons (alinhar com Pilot)

Add storybook deployer

Install dependencies:

• storybook/storybook-deployer
• gh-pages

Add script in package.json

• "deploy-storybook": "storybook-to-ghpages"

Enable GH Pages on gh-pages branch

• https://github.com/mundipagg/mercurio-checkout/settings

Remove isDesktop from each file and place it under a helper file

This const is used (and declared) in a lot of different places, we should export it on a helper file and import where needed

Componente "progress bar"

Estrutura de Componentes

Fizemos uma reunião para definir a estrutura de componentes do Checkout e chegamos no resultado abaixo. Essa estrutura não é definitiva, ela deve apenas nortear o desenvolvimento dos componentes.

Layout Mobile: https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/59e75a8daa565b58180d071b

Layout Desktop: https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/59e75a07380b7f748505409e

<Header>
  <Logo />
  <Title text='Dados Pessoais'/>
  <Button>X</Button>
</Header>

<ProgressBar step='1'/>

<Content>
  <Steps>
    <Step>
      <CustomerData>
        <Input
          name='name'
          icon={<Icon className='icon-customer'/>}
        />
      </CustomerData>
    </Step>
    <Step>
      <AddressData>
        <Input
          name='zipcode'
          icon={<Icon className='icon-zipcode'/>}
        />
      </AddressData>
    </Step>
    <Step>
      <PaymentMethod>
        <Radio title="Cartão" subtitle="Em até 4x"/>
        <Radio title="Boleto" subtitle="10% de desconto"/>
        <PaymentCard>
          <Input
            name='card-number'
            icon={<Icon className='icon-payment-card'/>}
          />
        </PaymentCard>
        <PaymentBoleto>
          <Button
            iconAlign='right'
            icon={<Icon className='icon-barcode'/>}>
            Copiar código de barras
          </Button>
          <Button
            iconAlign='right'
            icon={<Icon className='icon-mail'/>}>
            Encaminhar por e-mail
          </Button>
          <Button
            iconAlign='right'
            icon={<Icon className='icon-download'/>}>
            Salvar arquivo
          </Button>
        </PaymentBoleto>
      </PaymentMethod>
    </Step>
    <Step>
      <Result type='success'/>
    </Step>
  </Steps>
</Content>

<Footer>
  Valor a pagar: R$ 99,99
  <Button>Continuar</Button>
  Ambiente Seguro - Pagar.me
</Footer>

Escrever o README.md

Escrever um README para o projeto.

BrowserStack - Testes em Browsers e S.O's

Precisamos desenvolver um bot que utiliza o serviço do BrowserStack para automatizar nossos testes e gerar prints de navegação das páginas do Checkout em diversos browsers e sistemas operacionais diferentes. Esses prints deverão ser analisados pela equipe do Checkout com objetivo de encontrar problemas críticos no layout.

Para isso, eu fiz um levantamento pelo Google Analytics dos Browsers e S.O's mais utilizados no Checkout da Pagar.me no período de 1 ano: entre 07/12/2016 à 07/12/2017.

Abaixo, segue os dados coletados que deverão nortear o desenvolvimento do bot:

Browsers

Em ordem, os mais utilizados e a versão mínima que devemos oferecer suporte:

• Chrome - 55.0
• Firefox - 38.0
• Android - 30.0
• Edge - 12.1
• Safari - 9.0
• Internet Explorer - 11.0
• Opera - 42.0

S.O's

Em ordem, os mais utilizados e a versão mínima que devemos oferecer suporte:

• Windows - 7
• Android - 5.1.1
• Mac OS X - 10.12 (Sierra)
• iOS - 10.2.1

Content container

Especificações

Vamos manter a discussão das especificações neste tópico. Abaixo podemos comentar o que cada um de nós já tem no "checkout atual" e o que queremos pro próximo. :)

Corrigir styles do componente Input

Conforme no zeplin: https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/59e8c0ba367525f917d5019c

Implementar Styleguide

Precisamos implementar o guia de estilos criado pela equipe de UI: tipografias, espaçamentos, parágrafos, etc.

Referência:
https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/59e8c0ba367525f917d5019c

Ao recompilar Storybook, página fica sem estilização do tema

Erro acontece ao modificar qualquer CSS/JS, logo que ele recompila tudo.

Temos um problema de CSS para resolver!

Conversando com algumas pessoas da Pagar.me, inclusive com aval do time de Segurança, optamos por não fazer o checkout dentro de um iframe. Porém, nos deparamos com um problema e não sabemos exatamente como resolver, então vamos discutir nessa issue soluções para isso.

O problema

Basicamente o checkout será montado dentro uma div especificada pelo cliente:

<html>
  <body>
    <!-- o cliente escolheu essa div para montar o checkout -->
    <div id="wrapper-checkout">
      <!-- o checkout cria uma outra div aqui dentro -->
      <div class="checkout">
        ...
      </div>
    </div> 
  </body>
</html>

O checkout terá seus próprios styles a partir da div com a classe .checkout. Porém, o cliente pode definir algum style do seu site com !important, e isso pode sobrescrever os styles do checkout, exemplo:

/* style do cliente */
h1 { font-size: 50px !important; }

/* style do checkout */
.checkout h1 { font-size: 30px; }

Como podemos resolver isso?

Tela de confirmação

Tela de Pagamento

Preenchimento automático dos campos a partir do CEP

Quando digitar o CEP buscar por nome de rua, bairro, cidade e estado. Mudar o foco para o input de número da casa.

Aqui teremos que usar container com a lógica de busca e preenchimento

Implementar estratégia de tema

Pretendemos usar a seguinte lib para theming: https://github.com/javivelasco/react-css-themr

Componente Footer

Botão "Voltar" no header deve sumir na primeira página

Atualmente o Header possui um botão com o ícone da flecha de voltar para navegar para trás, mas ele fica visível mesmo na primeira página e clicar nele não gera ação nenhuma.

Seria massa se ele sumisse ou simplesmente ficasse desabilitado se não houver mais páginas para trás.

(O mesmo acontece com o botão continuar, mas esse não é no Header)

Estrutura inicial do projeto

Precisamos criar a estrutura inicial do projeto como:

• bootstrap do create-react-app
• storybook
• redux
• estrutura de pastas
• travis
• postcss
• etc...

teste

related https://github.com/pagarme/mercurio/issues/4

Componente Botão

Componente Header

MVP: Criar validação de inputs

Stylelint não reclama nas builds

Assim como o eslint, o stylelint deve rodar junto com os comandos de build (storybook, build e start), atualmente se um erro de CSS é apitado ao rodar yarn lint ele não apita também nas builds.

O comportamento esperado é que seja mostrado o log também do stylelint

MVP: Corrigir styles do componente Button

Componente Icon

Criar validação de inputs

Background quebrado quando tela não está em full screen

Ao abrir o checkout e abrir o console na parte debaixo, dá pra ver que ao fazer scroll até o fim o background não acompanha:

ficando essa parte branca no fim.

Imagino que alguma coisa não está com o height certo, tem q ser verificado

Componente Logo

Definição dos dados API (transaction, customer, billing, shipping...)

Precisamos definir uma interface para receber os dados de transaction, customer, billing, shipping e items.

Essa interface deve atender tanto a API da Pagar.me quanto a API da MundiPagg, será necessário 'casar' os dados iguais e definir uma interface final.

Dado que o backend está sob responsabilidade da MundiPagg, precisamos de uma call com eles para alinhar isso.

Criar testes para ProgressBar

O ProgressBar ainda está sem testes de componente, precisamos adicionar alguns!

Remover autoprefixer do webpack

como descrito na imagem acima, o postcss-next já tem o autoprefixer e não precisamos dele separadamente.

Página "endereço de cobrança"

Desktop:
https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/5a2ed6da2e24168d02cfd178

Mobile:
https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/5a1dd5858225fb98afbfd83d

Error Boundary

Precisamos criar um Error Boundary para exibir mensagens de erro amigáveis ao usuário. Podemos usar um método chamado componentDidCatch adicionado no lifecycle do React 1.6.

Exemplo: https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html

Move `./src/config/ErrorReport.js` to `./config`?

Is there a reason for the ErrorReport config file be placed under the src folder instead of the config folder directly?

This way we are creating two config folders and IMO we could move the ErrorReport file outside the src folder!

Let me know if there's a specific reason, otherwise I will open a PR changing it 😃

Corrigir styles do componente Button

Implementar Grid

Podemos aproveitar o componente Grid que o Pagar.me criou no projeto Pilot da nova dashboard.

https://github.com/pagarme/pilot

Componente Input

Atualizar styles do componente Button

Conforme no zeplin: https://app.zeplin.io/project/59e66a2ad508e5fb822f1776/screen/59e8c0ba367525f917d5019c

Implementar Redux

Página "endereço de entrega"