1

Estoy implementando un pago por tarjeta y hago todo lo que me pide el proceso:

Instalar los JS y el antifraude + el DEVICEHIDDENFIELNAME

<!-- Openpay Anti-fraud system-->
  <script type="text/javascript"
        src="https://js.openpay.mx/openpay.v1.min.js"></script>
<script type='text/javascript'
  src="https://js.openpay.mx/openpay-data.v1.min.js"></script>

<script type="text/javascript">
 $(document).ready(function() {
  OpenPay.setId('mikey'); //aqui todo OK
  OpenPay.setApiKey('mipk'); //aqui todo OK
  OpenPay.setSandboxMode(true);
  var deviceSessionId = OpenPay.deviceData.setup("payment-form", "deviceIdHiddenFieldName");
  });
</script>

Agregue el form:

<form action="#" method="POST" id="payment-form" class="hide-element form-group need-validation" novalidate>
            <input type="hidden" name="token_id" id="token_id">
            <input type="hidden" name="use_card_points" id="use_card_points" value="false">

            <div class="row">
              <div class="margin-t col-12">
                <h4><b>Aceptamos tarjetas de débito y crédito</b></h4>
              </div>
                <div class="col-4">
                  <h6>Tarjetas de crédito</h6>
                  <img src="assets/img/tarjeta-de-credito.png" class="img-tdc">
                </div>
                <div class="col-8">
                  <h6>Tarjetas de débito</h6>
                  <img src="assets/img/tarjeta-de-debito.png" class="img-tdc">
                </div>
                <div class="col-12"><br></div>
                <div class="col-6">
                  <label>Nombre del titular</label><input type="text" id="nombre_tarjeta" name="nombre_tarjeta" minlength="5" maxlength="400" class="form-control" placeholder="Como aparece en la tarjeta" autocomplete="off" data-openpay-card="holder_name" pattern="^[a-zA-Z0-9 ]*$" required>
                  <div class="valid-feedback">Correcto.</div>
                  <div class="invalid-feedback">Este dato es obligatorio. Min 5, Max 50 letras. No utilizar (*%/$+-.,').</div>
                </div>
                <div class="col-6">
                  <label>Número de tarjeta</label><input type="text" id="num_tarjeta" name="num_tarjeta" maxlength="30" class="form-control" autocomplete="off" pattern="[0-9]+"data-openpay-card="card_number" required="">
                  <div class="valid-feedback">Correcto.</div>
                  <div class="invalid-feedback">Ingresa un número de cuenta correcto, sin letras y sin espacios.</div>
                </div>
                <div class="col-12"><br></div>
                <div class="col-6">
                  <label>Fecha de expiración</label><br>
                  <input type="number" id="mes_tarjeta" name="mes_tarjeta" placeholder="Mes" max="12" step="1" class="form-control special-size rigth-marg" data-openpay-card="expiration_month"  required=""><input type="text" id="anio_tarjeta" name="anio_tarjeta" maxlength="2" class="form-control special-size" placeholder="Año" data-openpay-card="expiration_year" pattern="[0-9]+"  required="">
                  <div class="valid-feedback">Correcto.</div>
                  <div class="invalid-feedback">Ingresa un mes o año de vencimiento correcto, solo dos números para mes o año ej: 02/20 - 01/23 - 04/21.</div>
                </div>
                <div class="col-6">
                  <label>Código de seguridad</label><br>
                  <input type="text" id="cvv_tarjeta" name="cvv_tarjeta" class="form-control special-size rigth-marg" maxlength="3" placeholder="3 dígitos" autocomplete="off" data-openpay-card="cvv2" pattern="[0-9]{3}"  required=""> <img src="assets/img/cvv.png" class="img-cvv rigth-marg"> <img src="assets/img/cvv-v2.png" class="img-cvv-two ">

                   <div class="valid-feedback">Correcto.</div>
                  <div class="invalid-feedback">Ingresa un CVV correcto.</div>

                </div>
                <div class="col-12"><br></div>
                <div class="col-1"></div>
                <div class="col-5">
                  <small><b>Transacciones realizadas vía:</b></small>
                  <img src="assets/img/openpay.png" class="img-opn">
                </div>
                <div class="col-6">
                  <table style="width:100%">
                  <tr>
                    <th><img src="assets/img/secure.png" class="img-secure"></th>
                    <th class="secure-text"><small> Tus pagos se realizan de forma segura con encriptación de 256 bits.</small></th>
                  </tr>
                </table>

                </div>

              

            </div>
          </form>

Se agregan 2 funciones Javascript más para el token, como pueden ver SUCCESS_CALLBACK es quien asigna en el frontend el TOKEN_ID y su valor:

 var success_callbak = function(response) {
    var token_id = response.data.id;
    $('#token_id').val(token_id);
    $('#payment-form').submit();
  };

  var error_callbak = function(response) {
   var desc = response.data.description != undefined ?
   response.data.description : response.message;
   alert("ERROR [" + response.status + "] " + desc);
   $("#pay-button").prop("disabled", false);
 };

Cuando ya hago el token, todo funciona bien, lo recibe la plataforma sin problemas,

function formPay(){
          var holder_name = $('#nombre_tarjeta').val();
      var card_number = $('#num_tarjeta').val();
      var expiration_month = $('#mes_tarjeta').val();
      var expiration_year = $('#anio_tarjeta').val();
      var cvv  = $('#cvv_tarjeta').val();

      var address = orderDelivery.direccion + " " + orderDelivery.cp;

      var deviceIdHiddenFieldName  = $('#deviceIdHiddenFieldName').val();          
      
      /*AQUI HAGO EL TOKEN EN JS - Se activa success_callback y al ejecutarse esa function
      se asigna el token_id al INPUT OCULTO, pero a mi no me devuelve nada*/
      OpenPay.token.extractFormAndCreate('payment-form', success_callbak, error_callbak);   

      /* 
         INTENTE CON ESTE TOQUEN PERSONALIZADO PERO NO ME FUNCIONO TAMPOCO

          OpenPay.token.create({
          "card_number":card_number,
          "holder_name":holder_name,
          "expiration_year":expiration_year,
          "expiration_month":expiration_month,
          "cvv2":cvv,
        }, success_callbak, error_callbak);
      */
        //AQUI OBTENGO YO EL TOKEN_ID para mandarlo por POST con AJAX 
        var token_id  = $('#token_id').val();

        var formData = new FormData();
        formData.append('phone_number',orderDelivery.telefono);
        formData.append('holder_name',holder_name);
        formData.append('card_number',card_number);
        formData.append('expiration_month',expiration_month);
        formData.append('expiration_year',expiration_year);
        formData.append('cvv',cvv);
        formData.append('address',address);
        formData.append('amount',orderDelivery.total);
        formData.append('email',orderDelivery.correo);
        formData.append('token_id',token_id);
        formData.append('deviceIdHiddenFieldName',deviceIdHiddenFieldName);
        
        formData.append('function',"addPay");
                     
        $.ajax({
          data:  formData, //send data via AJAX
          url:   'controller/ctrlPago.php', //url file controller PHP
          dataType:'json',
          contentType: false,
          processData: false,
          type:  'post', //send POST data
          success:function(response) { //get request

            /*if(response.success){ 
              

            //CODE 
          }
        }); 

}

Como pueden ver necesito recabar el token_id, para MANDARLO POR POST a mi ARCHIVO PHP y generar el cargo, entonces mando mis datos sin problemas, pero el cargo falla porque no logro CACHAR el token_id

Aqui el código PHP:

$openpay = Openpay::getInstance('mikey','misk');

        // Establecer la zona horaria predeterminada a usar. Disponible desde PHP 5.1
        date_default_timezone_set('America/Mexico_City');

        $fecha = date("m.d.y");

        $customer = array(
             'name' => $_POST["holder_name"],
             'email' => $_POST["email"],
             'phone_number' => $_POST["phone_number"],
             'card_number' => $_POST["card_number"],
             'expiration_month' => $_POST["expiration_month"],
             'expiration_year' => $_POST["expiration_year"],
             'creation_date' => $fecha,
             'cvv2' => $_POST["cvv"],);

        $chargeData = array(
            'method' => 'card',
            'source_id' => $_POST["token_id"],
            'amount' => $_POST["amount"], // formato númerico con hasta dos dígitos decimales. 
            'description' => "Compra de comida rápida",
            'device_session_id' => $_POST["deviceIdHiddenFieldName"],
            'customer' => $customer
            );

        $charge = $openpay->charges->create($chargeData);

Token efectivo:

{
    "holder_name": "MArian Miranda M",
    "card_number": "424242XXXXXX4242",
    "expiration_month": "11",
    "expiration_year": "23",
    "cvv2": "XXX"
}
Respuesta
{
    "id": "k9gzznpuhv8ankcktcbo",
    "card": {
        "card_number": "424242XXXXXX4242",
        "holder_name": "MArian Miranda M",
        "expiration_year": "23",
        "expiration_month": "11",
        "address": null,
        "creation_date": null,
        "brand": "visa",
        "points_card": true,
        "points_type": "bancomer"
    }
}

No entiendo porque NO obtiene el token_id, si se supone que si hace el token, aqui mis códigos de OPENPAY DEL BAD REQUEST del CARGO:

LLAMADA:

{
    "method": "card",
    "source_id": "",
    "amount": "120.00",
    "description": "Compra de comida r\u00e1pida",
    "device_session_id": "Jp74we8dc0ROf2FxeH1QGhT00Le8rGFv",
    "customer": {
        "name": "MArian Miranda M",
        "email": "r@g.com",
        "phone_number": "6654465654",
        "card_number": "424242XXXXXX4242",
        "expiration_month": "11",
        "expiration_year": "23",
        "creation_date": "09.12.20",
        "cvv2": "XXX"
    }
}

RESPUESTA:

{
    "http_code": 400,
    "error_code": 1001,
    "category": "request",
    "description": "Please specify card info",
    "request_id": "2773509d-f31b-4b15-a2c5-31a593c2026e"
}

Como pueden ver souce_id va vacio, estoy 100% seguro que es porque no envio el token_id, ustedes ven algo mal a la hora de obtenerlo?

*Cuando hago el debug con la consola del navegador, todo lo hace bien, pero parece que el SUCCESS_CALLBACK no asigna el EL TOKEN_ID en el formulario de vuelta para cacharlo como yo lo hago.

Ajustes en relación al BOTÓN

No lo tengo dentro del form, pero obtengo los datos desde el siguiente botón:

<button id="btn_pay" class="btn btn-success hide-element" type="button" onclick="formPay()">Pagar pedido</button>

No lo agregue, lo pase por alto, pero ese boton llama a la function formPay(); que a su vez, ejecuta mi codigo de creación del token, todo bien hasta aqui, ya que si obtengo el token, pero despues no se que pasa con él:

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

6
  • Estás saltando un paso, quizá el más importante, que es cuando el usuario hace clic en el botón de pago, donde generas el token de forma asíncrona, es decir, que el navegador se conectará a Openpay para enviar los datos mediante una promesa, por lo que continuará ejecutando el resto del código y el token no estará disponible hasta que la promesa sea resuelta, llamando a alguna de las funciones definidas para éxito (success_callback) o error (error_callback), que es donde debes controlar las acciones a realizar.
    – Triby
    el 14 sep. 2020 a las 21:25
  • @Triby agregue mejoras en la descripción, si lo tengo el botón de HECHO YA LOGRE ver que si me responde Openpay con el TOKEN pero después desaparece cuando quiero obtenerlo. el 14 sep. 2020 a las 21:35
  • No desaparece, deberías tener un botón que al hacer clic obtenga el token y, después, en success_callback() es donde lo recibes y conservas. Ahí mismo es donde debes hacer ejecutar o llamar el submit del formulario.
    – Triby
    el 14 sep. 2020 a las 21:39
  • 1
    ¡Exactamente, así es!
    – Triby
    el 14 sep. 2020 a las 21:56
  • 1
    @Triby gracias por tu apoyo, ya lo logre! YA HICE MI TOKEN :) el 14 sep. 2020 a las 22:27

1 respuesta 1

1

Realmente lo que estaba haciendo mal era esto:

OpenPay.token.extractFormAndCreate('payment-form', success_callbak, error_callbak);  

          
          var token_id  = $('#token_id').val(); 

          var formData = new FormData();
          formData.append('phone_number',orderDelivery.telefono);
          formData.append('holder_name',holder_name);
          formData.append('card_number',card_number);
          formData.append('expiration_month',expiration_month);
          formData.append('expiration_year',expiration_year);
          formData.append('cvv',cvv);
          formData.append('address',address);
          formData.append('amount',orderDelivery.total);
          formData.append('email',orderDelivery.correo);
          formData.append('token_id',token_id);
          formData.append('deviceIdHiddenFieldName',deviceIdHiddenFieldName);


          formData.append('function',"addPay");

            $.ajax({
              data:  formData, //send data via AJAX
              url:   'controller/ctrlPago.php', //url file controller PHP
              dataType:'json',
              contentType: false,
              processData: false,
              type:  'post', //send POST data
              success:function(response) { //get request

                if(response.success){ 
                  //code
                }else{
                  //code
                }
                  
              }
            });

El error esta en que QUERIA SEGUIR EJECUTANDO EL CÓDIGO DE MANERA SINCRONA y la respuesta al TOKEN era una variable llamada SUCCESS_CALLBACK que funciona de manera RECURSIVA, entonces para lograr ejecutar el cargo hice esto:

var success_callbak = function(response) {
    var token_id = response.data.id;
    $('#token_id').val(token_id);

    var holder_name = $('#nombre_tarjeta').val();
    var card_number = $('#num_tarjeta').val();
    var expiration_month = $('#mes_tarjeta').val();
    var expiration_year = $('#anio_tarjeta').val();
    var cvv  = $('#cvv_tarjeta').val();
    var address = orderDelivery.direccion + " " + orderDelivery.cp;
    var deviceIdHiddenFieldName  = $('#deviceIdHiddenFieldName').val();
    var formData = new FormData();

    formData.append('phone_number',orderDelivery.telefono);
    formData.append('holder_name',holder_name);
    formData.append('card_number',card_number);
    formData.append('expiration_month',expiration_month);
    formData.append('expiration_year',expiration_year);
    formData.append('cvv',cvv);
    formData.append('address',address);
    formData.append('amount',orderDelivery.total);
    formData.append('email',orderDelivery.correo);
    formData.append('token_id',token_id);
    formData.append('deviceIdHiddenFieldName',deviceIdHiddenFieldName);

    formData.append('function',"addPay");

    $.ajax({
              data:  formData, //send data via AJAX
              url:   'controller/ctrlPago.php', //url file controller PHP
              dataType:'json',
              contentType: false,
              processData: false,
              type:  'post', //send POST data
              success:function(response) { //get request

                /*if(response.success){ 
                 

                }else{
                  
                }*/
                     
              }
            });

  };

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.