Conekta.js

Conekta.js permite procesar pagos directamente del lado del cliente y generar cargos en los servidores de Conekta evitando que la información pase por tus servidores.


En esta sección, te mostraremos cómo integrar conekta.js en tu proyecto.

Configurar Conekta.js

Para empezar, incluye conekta.js en tu página agregando el siguiente bloque de código:

<script type="text/javascript" src="https://conektaapi.s3.amazonaws.com/v0.3.2/js/conekta.js"></script>

Configura tu llave pública

Para empezar a usar conekta.js es necesario configurar tu llave pública que identifica tu sitio cuando se comunica con Conekta. Para esto, usa el método setPublishableKey. Recuerda reemplazar tu llave de modo sandbox por la de producción cuando estés listo para procesar cargos reales. Puedes obtener todas las llaves en el admin dentro de la sección API Keys.

Conekta.setPublishableKey("YOUR_PUBLISHABLE_KEY");
Conekta.setPublishableKey "YOUR_PUBLISHABLE_KEY"

Puedes recuperar la llave pública usando el siguiente comando:

Conekta.getPublishableKey();
Conekta.getPublishableKey()

Tokenización de tarjetas

La función principal de conekta.js es poder tokenizar tarjetas. Esto te permite enviar información de tarjetas a Conekta de manera segura sin que esta información pase por tu servidor. De esta manera evitarás tener qué obtener certificación de PCI DSS en tus servidores. Una vez que el token haya sido generado, lo podrás enviar de manera segura a tus servidores para procesar pagos o guardarlos por un largo período en tus servidores. La llamada para generar el token es la siguiente:

/* 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": "4242424242424242",
    "name": "Javier Pedreiro",
    "exp_year": "2014",
    "exp_month": "12",
    "cvc": "123",
    "address": {
        "street1": "Calle 123 Int 404",
        "street2": "Col. Condesa",
        "city": "Ciudad de Mexico",
        "state": "Distrito Federal",
        "zip": "12345",
        "country": "Mexico"
     }
  }
};

/* Después de tener una respuesta exitosa, envía la información al servidor */

successResponseHandler = function(token) {
  return $.post('/process_payment?token_id=' + token.id, function() {
    return document.location = 'payment_succeeded';
  });
};

/* Después de recibir un error */

errorResponseHandler = function(error) {
  return console.log(error.message);
};

/* Tokenizar una tarjeta en Conekta */

Conekta.token.create(tokenParams, successResponseHandler, errorResponseHandler);
### Los parámetros pueden ser un objeto de javascript, una forma de HTML o una forma de JQuery ###
tokenParams =
  "card":
    "number":"4242424242424242",
    "name":"Javier Pedreiro",
    "exp_year":"2014",
    "exp_month":"12",
    "cvc":"123"

### Después de tener una respuesta exitosa, envía la información al servidor ###
successResponseHandler = (token)->
  $.post(
    '/process_payment?token_id=' + token.id,
    ()->
      document.location = 'payment_succeeded'
  )

### Después de recibir un error ###
errorResponseHandler = (error)->
  console.log(error.message)

### Tokenizar una tarjeta en Conekta ###
Conekta.token.create tokenParams, successResponseHandler, errorResponseHandler

El primer parámetro, tokenParams, puede ser un hash, una forma de HTML o una forma de JQuery. EL sub parámetro card debe contener los parámetros de number, name, cvc, exp_month y exp_year.

El segundo parámetro successResponseHandler recibe el token como un objeto de javascript. La parte importante es el id, el cual necesitarás para procesar el pago en un futuro.

El tercer parámetro errorResponseHandler será usado para cualquier condición generada por una respuesta no exitosa. Esto se debe normalmente a errores en la validación de la tarjeta pero pueden ocurrir en integración si se envía tokenParams que no está bien formado.


card.validateNumber

Revisa que el número de la tarjeta esté formado de manera correcta y que pasa la prueba de Luhn exitosamente.

/* Todos estos valores regresan `true`, lo que indica que la tarjeta es válida (espacios y guiones serán ignorados pero errores serán regresados con otros caracteres). */

Conekta.card.validateNumber('4242424242424242');
Conekta.card.validateNumber('4242-42424242-4242');
Conekta.card.validateNumber('4242 4242 4242 4242');

/* Los siguoentes valores no pasan la prueba de Luhn y por lo cual se regresa un `false` */

Conekta.card.validateNumber('4242-1111-1111-1111');
Conekta.card.validateNumber('12345678');
Conekta.card.validateNumber('mistake');
### Todos estos valores regresan `true`, lo que indica que la tarjeta es válida (espacios y guiones serán ignorados pero errores serán regresados con otros caracteres). ###
Conekta.card.validateNumber '4242424242424242'
Conekta.card.validateNumber '4242-42424242-4242'
Conekta.card.validateNumber '4242 4242 4242 4242'

### Los siguoentes valores no pasan la prueba de Luhn y por lo cual se regresa un `false` ###
Conekta.card.validateNumber '4242-1111-1111-1111'
Conekta.card.validateNumber '12345678'
Conekta.card.validateNumber 'mistake'

card.validateExpirationDate

Este validador revisa si la fecha de expiración es una fecha válida y futura.

/* Las siguientes fechas han expirado y por lo cual regresan `false` */

Conekta.card.validateExpirationDate('02', '10');
Conekta.card.validateExpirationDate('02', '14');

/* Los siguientes ejemplos muestran fechas válidas que regresan `true` */

Conekta.card.validateExpirationDate('02', '2020');
Conekta.card.validateExpirationDate(2, 2020);
### Los siguientes ejemplos muestran una validación fallida de cvc que regresa `false` ###
Conekta.card.validateCVC ''
Conekta.card.validateCVC 'abc'
Conekta.card.validateCVC 99999999

### Los siguientes ejemplos muestran una validación exitosa de cvc que regresa `true` ###
Conekta.card.validateCVC '123'
Conekta.card.validateCVC 123

card.validateCVC

Este validador revisa si el código de seguridad es un entero válido (de 3 a 4 caracteres).

/* Los siguientes ejemplos muestran una validación fallida de cvc que regresa `false` */

Conekta.card.validateCVC('');
Conekta.card.validateCVC('abc');
Conekta.card.validateCVC(99999999);

/* Los siguientes ejemplos muestran una validación exitosa de cvc que regresa `true` */

Conekta.card.validateCVC('123');
Conekta.card.validateCVC(123);
### Los siguientes ejemplos muestran una validación fallida de cvc que regresa `false` ###
Conekta.card.validateCVC ''
Conekta.card.validateCVC 'abc'
Conekta.card.validateCVC 99999999

### Los siguientes ejemplos muestran una validación exitosa de cvc que regresa `true` ###
Conekta.card.validateCVC '123'
Conekta.card.validateCVC 123

card.getBrand

Este validador regresa el tipo de tarjeta como un string. Puedes usar diferentes tipos de tarjeta como Visa, MasterCard y American Express. Si la tarjeta no puede ser reconocida, se regresará el string de Unknown.

/* Regresa 'visa' */
Conekta.card.getBrand('4242-4242-4242-4242');

/* Regresa 'american_express' */
Conekta.card.getBrand('378282246310005');

/* Regresa 'unknown' */
Conekta.card.getBrand('1234');
### Regresa 'visa' ###
Conekta.card.getBrand '4242-4242-4242-4242'

### Regresa 'american_express' ###
Conekta.card.getBrand '378282246310005'

### Regresa 'unknown' ###
Conekta.card.getBrand '1234'