Checkout PV
Instalação
npm i pagueveloz-checkoutv2
Especificações
O pagueveloz-cardv2 tem como dependencias packages do bower para testes e desenvolvimento (não serão incluidos na package final) e do npm que são as dependencias do produto final
Contribuindo
- Clone o repositório
- Execute os seguintes comandos
npm install
bower install
- Envie suas alterações em um pull request
Tasks
-
build
Compila os arquivos da solução em/build
. -
build-example
Executa a taskbuild
e injeta os arquivos noindex.html
-
build-example-minify
Executa a taskbuild-minify
e injeta os arquivos noindex.html
-
build-final
Compila os arquivos, minifica e junta eles para a distribuição em/dist
-
build-minify
Executa a taskbuild
e minifica os arquivos.js
e.css
-
clean
Limpa a pasta/build
-
clean-all
Executa as tasksclean
eclean-final
-
clean-final
Limpa a pasta/dist
-
default
Executa a taskbuild-final
-
inject-essentials
Injeta os arquivos essenciais para o exemplo -
inject-minify
Injeta os arquivos essenciais para o exemplo minificado -
run-example
Executa a taskbuild-example
e depois inicia o servidor na porta:5001
-
run-example-minify
Executa a taskbuild-example-minify
e depois inicia o servidor na porta:5001
Constantes
- ConsultaIconeBandeirasCartaoUrl: Procura das logos das bandeiras
- ConsultaListaBandeirasCartaoUrl: Procura de bandeiras disponíveis
- ConsultaListaParcelasCartaoUrl: Procura as parcelas por bandeira
- ConsultarTransacaoCartaoUrl: Busca informações sobre uma transação existente
- GeraTransacaoCartaoUrl: Envia as informações do cartão e do cliente para iniciar a transação
- PagarTransacaoCartaoUrl: Faz o pagamento da transação sem confirmar
- ConfirmarPagamentoCartaoUrl: Confirma o pagamento já feito
- CancelarPagamentoCartaoUrl: Cancela o pagamento já feito
- ConsultaInformacoesServicoUrl: Busca os dados do serviço à ser cobrado
Valores Obrigatórios
- ContinuacaoCheckout: Ação pós pagamento
Configuração
Exemplo de um objeto de configuração para o painel do checkout
//opicionaisopt:breadcrumb: truelogo: trueisUserInfoRequired: true//valores de fundoplaceholders:card:name: 'Nome no cartão'number: '•••• •••• •••• ••••'expiry: 'MM/AA'cvc: '•••'form:name: 'Nome no cartão'number: 'Número do cartão'expiry: 'Data de expiração'cvc: 'CVC'cpf: 'CPF'rg: 'RG'tel1: 'Telefone Fixo'tel2: 'Telefone Celular'email: 'Email'buttonBack: "Voltar"buttonNext: "Próximo"buttonReview: "Revisar"buttonConfirm: 'Pagar!'notify: "Deseja receber noticações desta transação por:"notifyEmail: "Email"notifySms: "SMS"//objeto de mensagensmessages://mensagens no cartãocard:validDate: 'valido\naté'monthYear: 'mês/ano'//mensagens no painelpanel:select: 'Bandeiras disponíveis'title: 'Valor do serviço'//html para revisãoreview:preConfirm: "<a href=\"termos.pdf\">Termos</a>"postConfirm: "<b>Sucesso!!!!</b>"logoUrl: ''//Url da sua logo de preferência, com 40px de altura, em png e sem fundo//opções do cartão ver em: https://github.com/jessepollak/card#usage-without-jquerycardOptions:width: 350debug: appdebugformatting: true//objeto para os eventos do painelevents://veja no próx topico//Função para lidar com as respostas sem sucesso (que não são 200:OK) ou mensagens de erro{}
Eventos
Deve ser implementado no objeto de eventos uma função ou vetor de funções, com as seguintes chaves para ser válido.
pv-checkoutv2.finalizandoPagamento Evento chamado após o usuário verificar os dados do pagamento e clicar em confirmar. Chamado antes de fazer a chamada da finalização.
pv-checkoutv2.finalizouPagamento Evento chamado após a receber a resposta da finalização.
pv-checkoutv2.mudouEtapa Evento chamado para cada alteração de etapa do checkout
- panel-card painel de entrada de dados do cartão
- panel-client painel de entrada de dados do cliente
- review-payment pagina de verificação do pagamento
- finish página de vizualização das informações da transação (Revisão pós-finalizado)
Exemplo
"pv-checkoutv2.mudouEtapa": consolelog {;}{iffinalizouconsole;}{if !;}
Temas
O checkout usa o sistema de temas do angular-material. Para mais informações veja em #referências.