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 task build e injeta os arquivos no index.html

• build-example-minify Executa a task build-minify e injeta os arquivos no index.html

• build-final Compila os arquivos, minifica e junta eles para a distribuição em /dist

• build-minify Executa a task build e minifica os arquivos .js e .css

• clean Limpa a pasta /build

• clean-all Executa as tasks clean e clean-final

• clean-final Limpa a pasta /dist

• default Executa a task build-final

• inject-essentials Injeta os arquivos essenciais para o exemplo

• inject-minify Injeta os arquivos essenciais para o exemplo minificado

• run-example Executa a task build-example e depois inicia o servidor na porta :5001

• run-example-minify Executa a task build-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

{
  //opicionais
  opt: {
    breadcrumb: true,
    logo: true,
    isUserInfoRequired: true
  }
  //valores de fundo
  placeholders: {
    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 mensagens
  messages: {
    //mensagens no cartão
    card: {
      validDate: 'valido\naté',
      monthYear: 'mês/ano',
    },
    //mensagens no painel
    panel: {
      select: 'Bandeiras disponíveis',
      title: 'Valor do serviço'
    },
    //html para revisão
    review: {
        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-jquery
  cardOptions: {
    width: 350,
    debug: app.debug,
    formatting: true
  },
  //objeto para os eventos do painel
  events: {
    //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
  errorResponse: function (responseOrString) {}
}

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": [console.log, function(e, etapa){
    fazerAlgo(etapa);
  }],
  "pv-checkoutv2.finalizouPagamento": function (e, finalizou) {
    if(finalizou)
      console.log("Jobs done");
  },
  "pv-checkoutv2.finalizandoPagamento": function (e, dadosCartao, recusar) {
      if (!confirm("Certeza?")) {
          recusar();
      }
  }
}

Temas

O checkout usa o sistema de temas do angular-material. Para mais informações veja em #referências.

Referências

• angular-card
• angular-material
• card
• material
• temas no angular-material