Checkout PV

Instalação

• npm i pagueveloz-checkout-icetranv2

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: Endpoint para procura das logos das bandeiras
• C

Configuração

Exemplo de um objeto de configuração para o painel do checkout

{
  //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',
      buttonConfirm: 'Revisar'
    }
  },
  //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',
      showTitle: true
    }
  },
  //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)
  errorResponse: function (res) {}
}

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 painel de entrada de dados do cartão
• review 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();
      }
  }
}

Referências

• angular-card
• card