Javascript de tokenización

 
 
El Javascript de Tokenización te permite registrar las tarjetas de crédito de tus clientes, de forma segura. Los clientes ingresan los datos en tu sitio web, y estos datos son enviados directamente a los servidores de PayU, allí serán tokenizados y almacenados para futuras compras.

Podrás desarrollar funcionalidades como “Pago en un clic” o registrar varias tarjetas de crédito por cada cliente. Una vez implementes el Javascript y registres las tarjetas de crédito de tus clientes, podrás generar cobros enviando los datos de la compra. Si deseas conocer más sobre las opciones que PayU te ofrece para realizar cobros puedes dirigirte al SDK de tokenización o al
API de tokenización de acuerdo a tu tipo de integración.

Para implementar el Javascript de tokenización debes seguir los siguientes pasos:
 
 
01. Declaración de instancia: para comenzar a usar PayU.js, debes añadir el siguiente tag en tu página web
<script type="text/javascript" src="https://gateway.payulatam.com/ppp-web-gateway/javascript/PayU.js"></script>
 
02. Configuraciones generales: se deben realizar las siguientes configuraciones para poder realizar la conexión
Con la siguiente configuración se cambia la url para una de producción (obligatoria):
payU.setURL('https://api.payulatam.com/payments-api/4.0/service');
 
Se debe configurar la llave pública por medio de la instrucción (obligatoria):
Para conocer tu Llave Pública visita el Módulo administrativo PayU en la sección 'Información técnica'.
payU.setPublicKey('TU LLAVE PUBLICA');
 
Se debe configurar la cuenta con la cual deseas utilizar PayU.js empleado la siguiente línea (obligatoria):
Para conocer tu Cuenta ID visita el Módulo administrativo PayU
payU.setAccountID('TU NUMERO DE CUENTA');
 
El ID del div es utilizado para mostrar la franquicia, el texto opcional se muestra para que el cliente seleccione su franquicia:
payU.setListBoxID('TU LIST BOX ID', 'texto opcional');
 
Se debe emplear el siguiente método para obtener los medios de pago activos:
payU.getPaymentMethods();
 
Se puede definir el idioma en el cual mostrar la información, por defecto es idioma seleccionado es español ('es'), pero se puede cambiar a Inglés ('en') o portugués ('pt'):
payU.setLanguage("en"); //Ej. Si el idioma cambia a inglés.
 
03. Obtener datos de la tarjeta de crédito: para ejecutar el proceso de Tokenización, se debe emplear el método payU.setCardDetails. Este método convierte los datos sensibles de la tarjeta en un token, el cual será empleado para ejecutar el procesamiento de las transacciones sin necesidad que los datos sensibles del tarjetahabiente pasen por tu servidor.
payU.setCardDetails(
	{
		number:'4111111111111111',
		name_card:'NOMBRE_TARJETA',
		payer_id:'PAYER_ID', 
		exp_month:10,
		exp_year:2015,
		method:'VISA'
	}
);
 
En el método payU.setCardDetails se llenan los datos de la tarjeta de crédito, en el ejemplo se está pasando un objeto JSON, pero se pueden utilizar otros métodos como jQuery. Los siguientes son los parámetros:
  1. number: El número de tarjeta como un string sin separadores. (obligatorio) Ejemplo: '4242424242424242'.
  2. exp_month: El que numero representa al mes de expiración. (obligatorio) Ejemplo: 10
  3. exp_year: Un número de cuatro dígitos representando el año de expiración de la tarjeta. (obligatorio)
  4. name_card: El nombre que se encuentra en la tarjeta. (obligatorio)
  5. payer_id: El id del pagador dado por el comercio. (obligatorio)
  6. cvv: El código de seguridad de la tarjeta: Ejemplo: '123'
  7. document: El número de documento de identidad del pagador.
 
04. Creación de un token para tarjeta de crédito: la creación de un token se hace por medio de la función payU.createToken.
payU.createToken(responseHandler);
 
Donde el parámetro responseHandler es una función definida para manejar la respuesta:
function responseHandler(response)
{
	if (response.error) {
		// Se muestra los mensajes de error.
		$(".create-errors").text(response.error);
	}
	else {
		// Se obtiene el token y se puede guardar o enviarlo para algún pago.
		var token = response.token;
		var payer_id = response.payer_id;
		var document = response.document;
		var name = response.name;
	}
}
 
La función crear token también puede recibir un segundo parámetro, un formulario donde se pueden pasar los datos sin la necesidad de usar el método setCardDetails:
jQuery(function($)
{
	$(‘#create-form’).submit(function(event)
	{
		var $form = $(this);
		payU.createToken(responseHandler, $form);
		return false;
	});
});
 
05. Validaciones: estas son las diferentes validaciones que puedes hacer con el javascript.
Validación de tarjeta de crédito: la validación de tarjetas de crédito se realiza por medio de la función payU.validateCard, la función no toma en cuenta los espacios y otros signos de puntuación que sean ingresados. Como repuesta, el método retorna 'true' si la tarjeta es válida, de lo contrario el valor retornado será 'false'.
payU.validateCard ('4242424242424242')
payU.validateCard ('4242-42424242-4242')
payU.validateCard ('4242 4242 4242 4242')
payU.validateCard ('4242-1111-1111-1111')
payU.validateCard ('12345678')
 
Validación de fecha de expiración de tarjeta de crédito: la validación de la fecha de expiración de una tarjeta, se realiza por medio de la función payU.validateExpiry, la cual realiza una revisión del año y mes suministrados y genera una alerta en caso de que la fecha no sea válida.
payU.validateExpiry('2020','02') // True
 
Validación de la franquicia o tipo de tarjeta de crédito: la validación de la franquicia o tipo de tarjeta de crédito se realiza por medio de la función payU.cardPaymentMethod. Las posibles franquicias son VISA, MASTERCARD, AMEX, y DINERS, en caso de que el número de la tarjeta no sea identificado, el valor para el campo retornado será desconocido.
payU.cardPaymentMethod ('4242-4242-4242-4242') // "VISA"
payU.cardPaymentMethod ('378282246310005') // "AMEX"
payU.cardPaymentMethod ('1234') // "Desconocido"
 
 
Posibles errores: el sistema provee múltiples mensajes de error cuando se presentan fallos o existe información incompleta.

Mensajes que pueden ver los desarrolladores

Cód. Error Mensaje Descripción
0 Esta franquicia no está disponible para ser utilizada. La cuenta configurada no cuenta con el medio de pago indicado. Debes ponerte en contacto con el equipo de soporte operativo para solicitar la activación de dicho medio de pago para tu cuenta.
4 No está configurado el Id del pagador No se envió el campo payer_id.
6 Ha ocurrido un error inesperado con PayU.js. Esto puede ser a causa de problemas de conectividad, por favor intenta de nuevo. Si aún tienes problemas, por favor avísanos. Errores de conexión. Se puede verificar que el servicio esté funcionando correctamente y enviar nuevamente la petición.
7 Tu configuración inicial es incorrecta. Los datos configurables no están correctos.
9 Tipo de tarjeta de crédito desconocida. El tipo de tarjeta no es conocida se debe enviar/seleccionar la franquicia.
12 La llave pública utilizada no es válida. Verifica que la llave pública sea igual a la que encuentras en el Módulo Administrativo.
13 No está configurada tu llave pública. Verifica que la llave pública sea igual a la que encuentras en el módulo administrativo.
14 No está configurada tu Cuenta Id. Verifica que el número de cuenta sea correcto.
15 No está configurado el DIV de la franquicia. Verifica que tengas un DIV para mostrar las franquicias.
16 El identificador de cuenta utilizado no es válido. Verifica que el número de cuenta sea correcto.
17 Debes utilizar un identificador de cuenta y una llave pública válidos. Verifica que se estén empleando correctamente payU.setAccountID() y payU.setPublicKey()
18 Verifica que estas enviando los parámetros obligatorios en el Java Script (Nombre, Franquicia, No.tarjeta de crédito y fecha de expiración). La tarjeta tiene parámetros obligatorios que no están siendo enviados.
19 No tienes tarjeta crédito como medio de pago activo para tokenizar Verifica que estés usando la función payU.getPaymentMethods(), o que tu comercio/cuenta tengan métodos de pago con los cuales se pueda hacer tokenización.

Mensajes que pueden ver los clientes

Cód. Error Mensaje Descripción
1 Verifica que todos los datos de tu tarjeta de crédito son correctos. Los datos de la tarjeta son incorrectos: Se debe verificar que todos los datos de la tarjeta sean correctos.
2 El documento debe tener entre 5 y 30 dígitos. En campo opcional de documento no tiene los dígitos requeridos.
3 Verifica que la fecha de expiración es válida. Se debe verifica que la fecha de expiración sea válida.
5 Debes seleccionar un método de pago. Se debe seleccionar un método de pago.
10 La tarjeta de crédito no pertenece a la franquicia seleccionada. La tarjeta ingresada y la franquicia seleccionada no coinciden.
 
 
El JavaScript de tokenización PayU se encuentra disponible para Chrome, Firefox, Safari, Opera e Internet Explorer 10 o superior.
Puedes descargar el siguiente ejemplo para implementar el JavaScript de tokenización en tu sitio web. Recuerda que el Javascript te permite registrar las tarjetas de crédito de tus clientes, pero si deseas realizar los cobros debes utilizar el API o el SDK de tokenización.
 
Descargar ejemplo en GitHub