Tokenización única: Tiene una duración de 24 horas.
Tokenización permanente: Para realizar cargos recurrentes. El token debe debe ser asociado a un Cliente (Ver Referencia API: Customer Add Card).
Pre-requisitos
Para iniciar con el desarrollo debes contar con tus llaves de acceso. Revísalo aquí.
Paso a paso
Esta es una guia para implementar un formulario que usarás para recolectar los datos de la tarjeta y tokenizarlos usando la librería.
Puedes ver un ejemplo de implementación completo en nuestra librería Node Express.js
- 1. Crea el formulario.
- 2. Importa las dependencias.
- 3. Configura el ambiente en el que trabajarás
- 4. Recolección y envío de datos usando la librería konfiopagos.js
- 5. Proceso de pago.
1. Crea el formulario
Crea un formulario para realizar el proceso de Tokenización fácilmente. Es muy importante que incluyas el número de la tarjeta, nombre del tarjetahabiente, CVV, mes y año de vencimiento.
Si lo requieres también puedes agregar cualquiera de sus variables, ya sea dirección de envío, correo de contacto, teléfono, etc. esto dependerá del giro y necesidades de tu negocio.
En este caso el HTML solo incluye los campos necesarios para tokenizar
<form action="" method="POST" id="card-payment-form">
<dl>
<dt>Número de tarjeta</dt>
<dd><input type="text" name="number" maxlength="16" value="5219999999999999" class="card-number" data-card="number" placeholder="Número de tarjeta"/></dd>
<dt>Nombre de tarjetahabiente</dt>
<dd><input type="text" name="holder_name" value="TRADICIONAL" class="card-holder-name" data-card="holder_name" placeholder="Tarjetahabiente"/></dd>
<dt>Fecha de expiración MM/YY</dt>
<dd>
<input type="text" name="month" maxlength="2" size="2" class="card-exp-month" data-card="exp_month" value="11"/>
<input type="text" name="year" maxlength="2" size="2" class="card-exp-year" data-card="exp_year" value="21"/>
</dd>
<dt>CVV</dt>
<dd>
<input type="password" name="cvv" size="4" data-card="cvv" class="card-cvv" value="999"/>
</dd>
</dl>
<input type="button" id="card-payment-form-button" value="Pagar ahora"/>
<hr/><label id="response_message"></label>
</form>
Además de las características ya mencionadas, tu formulario debe incluir las siguientes características:
- Longitud máxima del campo ‘holder_name’ de 30 caracteres.
- El campo ‘holder_name’ no debe admitir caracteres especiales.
2. Importa las dependencias
Importa las dependencias, en este caso serán las librerías de Sr. Pago y las librerías de jQuery, usando las siguientes líneas:
El código del formulario puedes descargarlo completo aquí
3.Configura tu ambiente
SrPago.setLiveMode(false); // false = Sandbox true = Producción
SrPago.setPublishableKey("");// Aquí va el Public Key
Ambiente de pruebas: SrPago.setLiveMode (false)
Ambiente productivo: SrPago.setLiveMode (true)
4. Recolección y envío de datos
Incluye la lógica de recolección de los datos y envío, para recibir el token.
window.onload = function() {
SrPago.setLiveMode(false); // false = Sandbox true = Producción
SrPago.setPublishableKey("");// Aquí va el Public Key
document.getElementById("card-payment-form-button").onclick = function() {
var onSuccessHandler = function(result){
let responseMessage = document.getElementById("response_message");
responseMessage.innerHTML = "Con este token procesará el pago desde su Servidor " + result.token;
document.getElementById("tokenInput").value = result.token;
document.getElementById("card-payment-form").submit();
};
var onFailHandler = function(error){
document.getElementById("response_message").innerHTML = "Error " + error.code + ": " + error.message;
};
var card = {
number: document.querySelector('.card-number').value,
holder_name: document.querySelector('.card-holder-name').value,
cvv: document.querySelector('.card-cvv').value,
exp_month: document.querySelector('.card-exp-month').value,
exp_year: document.querySelector('.card-exp-year').value
};
SrPago.token.create(card,onSuccessHandler,onFailHandler);
return false;
};
};
Con este último paso el proceso de Tokenización concluye. Existe un campo oculto en el formulario, lo puedes identificar como tokenInput, este dato se utilizará para enviar al Backend el valor del token regresado por Sr. Pago.
Nota: En la tokenización se regresa un token de tipo tok_xxxx mismo que puede ser usado una sola ocasión y durante un periodo corto de tiempo.