El token no se genera adecuadamente

Rebuilding · #1 (**permalink**) 02/08/2015, 12:44

Estoy usando la API de Conekta https://www.conekta.io/es/docs/referencias/conekta-js, principalmente un ejemplo que dan en otra pagina complementado con el del vinculo que puse, pero la consola del Chrome dice que el token es invalido, y la venta no se procesa adecuadamente al parecer por la culpa de este javascript
Este es el archivo examples.js que viene incluido en el HTML

Código Javascript:

Ver original<script>
$(document).ready(function(){
  $('.version').click(function(){
    var callType = $(this).attr('id');
    if(callType == "basic"){
      $('.advanced').slideUp(350);
      $('#advanced').removeClass('active');
      $(this).addClass('active');
    }
    if(callType == "advanced"){
      $('.advanced').slideDown({queue: false}, 350);
      $('#basic').removeClass('active');
      $(this).addClass('active');
    }
  });
  // CVC Input security
  $("input[name='card_cvc']").focus(function(){$(this).attr('type','text');});
  $("input[name='card_cvc']").blur(function(){$(this).attr('type','password');});
  // Input formats
  // Cards
  $('input[name="card_number"]').formatter({
    'pattern': '{{9999}} {{9999}} {{9999}} {{9999}}'
  });
  $('input[name="card_exp"]').formatter({
    'pattern': '{{99}} / {{9999}}'
  });
  $('input[name="card_cvc"]').formatter({
    'pattern': '{{999}}'
  });
});
 
function validar(){
    var numtarjeta=$('input[name="card_number"]').val();
    var nombretarjeta=$('input[name="customer_name"]').val();
    var cvc=$('input[name="card_cvc"]').val();
    var card_exp=$('input[name="card_exp"]').val();
    var resultado=card_exp.split(" ");
    var mes = $.trim(resultado[0]);
    var ano = $.trim(resultado[2]);
    var numtarjetaerror=Conekta.card.validateNumber(numtarjeta);
    var expiraerror=Conekta.card.validateExpirationDate(mes, ano);
    var cvcerror=Conekta.card.validateCVC(cvc); 
    var guardarerror=" ";
    if(numtarjetaerror==false){
        guardarerror+="La tarjeta introducida es incorrecta\n";
    }
    if(expiraerror==false){
        guardarerror+="La fecha de expiracion no es correcta\n";
    }
    if(cvcerror==false){
        guardarerror+="El codigo de verificacion no es correcto\n";
    }
    if(numtarjetaerror==true && expiraerror==true && cvcerror==true){
        enviartarjeta(nombretarjeta,numtarjeta,ano,mes,cvc);
    }else{
        alert(guardarerror);
    }
     $("#enviarinfo").prop("disabled", true);
}
 
function enviartarjeta(nombretarjeta,numtarjeta,ano,mes,cvc){
    Conekta.setPublishableKey("key_Cyt1btNDJrsZ5m2xjmKTekg");
    Conekta.getPublishableKey();
/* Los parámetros pueden ser un objeto de javascript, una forma de HTML o una forma de JQuery */
    var errorResponseHandler, successResponseHandler, tokenParams;
    tokenParams = {
        "card": {
        "number": numtarjeta,
        "name": nombretarjeta,
        "exp_year": ano,
        "exp_month": mes,
        "cvc": cvc
        }
    };
/* Después de tener una respuesta exitosa, envía la información al servidor */
    successResponseHandler = function(token) {
      return $.post('cargotarjeta.php?token_id=' + token.id, function() {
//      return document.location = 'cargotarjeta.php';
 
      });
    };
 
    /* Después de recibir un error */
    errorResponseHandler = function(error) {
        $("#tarjeta-errors").text(response.message);
//    return console.log(error.message);
    };
    /* Tokenizar una tarjeta en Conekta */
    Conekta.token.create(tokenParams, successResponseHandler, errorResponseHandler);
//  window.location.assign("http://localhost/a/test/cargotarjeta.php"); 
}
</script>

Este es el HTML

Código HTML:

Ver original<script src='jquery.js'></script>
  <script src='examples.js'></script>
  <script src='jquery.formatter.js'></script>
  <script type="text/javascript" src="conekta.js"></script>
</head>
<body>
<form method="post">
<div id="AjaxCapa"></div>
<div id="tarjeta-errors"></div>
        <div class='input_box'>
            <div class="descripciones">
          <label for='customer_name'>Nombre del Tarjetahabiente</label>
            </div>
          <input name='customer_name' type='text' class="infofinanciera" size="30"  data-conekta="card[name]">
        </div>
        <div class='input_box'>
           <div class="descripciones">
              <label for='card_number'>Número de tarjeta (sin guiones)</label>
           </div>
          <input name='card_number' value="4242424242424242" placeholder='' type='text'  class="infofinanciera" size="12" data-conekta="card[number]">
        </div>
        <div class='input_box'>
            <div class="descripciones">
              <label for='card_exp'>F. de Expiración</label>
            </div>
          <input name='card_exp' placeholder='' type='text'  class="infofinanciera" size="3" >
          <br>
        </div>
        <div class='input_box'>
            <div class="descripciones">
              <label for='card_cvc'>Cód. de Seguridad</label>
            </div>
          <input name='card_cvc' placeholder='' type='text'  class="infofinanciera" size="1"data-conekta="card[cvc]">
          <br>
      
          <input type="submit" value="validar" onClick="validar()" id="enviarinfo">
</form>
        </div>

man0l0 · #2 (**permalink**) 05/08/2015, 16:34

Seguí el código, y si te genera error en el token, es porque se dispara el evento errorResponseHandler, este evento se dispara luego de haber llamado a Conekta.token.create con los parámetros incluidos en tokenParams

Es decir, de haber algún error, está en los valores que lleva el tokenParams (basta con hacer un console.log(tokenParams) para ver qué está mandando y revisar si está en el formato correcto).

Luego de eso ya sería problema de lo que hace Conekta.token.create

Saludos!