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
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
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.
Este projeto foi iniciado com Create React App e recomendamos o uso do Yarn para o fluxo de desenvolvimento.
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.
docker-compose up
Caso queira rodar o container em background
docker-compose up -d
docker exec -it artis sh
Para instalar as dependências do projeto usando yarn
:
$ `yarn install`
Usando npm
:
$ `npm i`
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`
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`
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`
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`
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`
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`
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>
Para mais informações sobre como contribuir, clique aqui.
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.