La tokenización asegura que ningún dato
sensible de la tarjeta necesite estar en su servidor para que su
integración pueda operar de manera compatible con PCI. Si
alguna información de la tarjeta pasara por, o se
llegase a almacenar en su servidor, usted sería
responsable de cualquier penalidad o auditoría que
imponga PCI DSS.
Github Repository
Instalación
Primero necesitas incluir jQuery y los archivos
payment_[version].min.js y
payment_[version].min.css dentro de tu
página web especificando "UTF-8" como charset.
<script src="https://code.jquery.com/jquery-3.7.1.min.js" charset="UTF-8"></script>
<link href="https://cdn.globalpay.com.co/ccapi/sdk/payment_stable.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.globalpay.com.co/ccapi/sdk/payment_stable.min.js" charset="UTF-8"></script>
Uso
Para revisar ejemplos funcionales utilizando
GlobalPayRedebanJS, revisa los
ejemplos
dentro de este proyecto.
Utilizando el Form de GlobalPay Redeban
Cualquier elemento con la clase
payment-form será automáticamente
convertido en una entrada de tarjeta de crédito
básica con fecha de vencimiento y el check de CVC.
La manera más fácil de comenzar con la
GlobalPayRedebanForm es insertando el siguiente pedazo de
código:
<div class="payment-form" id="my-card" data-capture-name="true"></div>
Para obtener el objeto Card de la instancia
PaymentForm, pregunte al formulario por su
tarjeta.
let myCard = $('#my-card');
let cardToSave = myCard.PaymentForm('card');
if(cardToSave == null){
alert("Invalid Card Data");
}
Si la tarjeta (Card) regresada es null, el estado
de error mostrará los campos que necesitan ser
arreglados.
Una vez que obtengas un objeto no null de la tarjeta
(Card) del widget, podrás llamar
addCard.
Biblioteca Init
Siempre debes inicializar la biblioteca.
/**
* Init library
*
* @param env_mode `prod`, `stg`, `local` para cambiar ambiente. Por defecto es `stg`
* @param client_app_code proporcionado por GlobalPay Redeban.
* @param client_app_key proporcionado por GlobalPay Redeban.
*/
Payment.init('stg', 'CLIENT_APP_CODE', 'CLIENT_APP_KEY');
addCard Agregar una Tarjeta
La función addCard convierte los datos confidenciales
de una tarjeta, en un token que puede pasar de forma segura a
su servidor, para realizar el cobro al usuario.
Esta funcionalidad consume el servicio de nuestro API pero de
manera segura para comercios que no cuentan con
certificación PCI.
Aquí
podras encontrar la descripción de cada campo en la
respuesta.
// Definir los handlers primero
let successHandler = function(cardResponse) {
console.log(cardResponse.card);
if(cardResponse.card.status === 'valid'){
$('#messages').html('Tarjeta correctamente agregada<br>'+
'Estado: ' + cardResponse.card.status + '<br>' +
"Token: " + cardResponse.card.token + "<br>" +
"Referencia de transacción: " + cardResponse.card.transaction_reference
);
}else if(cardResponse.card.status === 'review'){
$('#messages').html('Tarjeta en revisión<br>'+
'Estado: ' + cardResponse.card.status + '<br>' +
"Token: " + cardResponse.card.token + "<br>" +
"Referencia de transacción: " + cardResponse.card.transaction_reference
);
}else{
$('#messages').html('Error<br>'+
'Estado: ' + cardResponse.card.status + '<br>' +
"Mensaje: " + cardResponse.card.message + "<br>"
);
}
submitButton.removeAttr("disabled");
submitButton.text(submitInitialText);
};
let errorHandler = function(err) {
console.log(err.error);
$('#messages').html(err.error.type);
submitButton.removeAttr("disabled");
submitButton.text(submitInitialText);
};
/*
* @param uid Identificador del usuario. Este es el id que usas del lado de tu aplicativo.
* @param email Email del usuario para iniciar la compra. Usar el formato válido para e-mail.
* @param card La tarjeta que se desea tokenizar.
* @param success_callback Funcionalidad a ejecutar cuando el servicio de la pasarela responde correctamente. (Incluso si se recibe un estado diferente a "valid")
* @param failure_callback Funcionalidad a ejecutar cuando el servicio de la pasarela responde con un error.
* @param payment_form Instancia del formulario de Pago
*/
Payment.addCard(uid, email, cardToSave, successHandler, errorHandler, myCard);
El tercer argumento para el addCard es un objeto Card que
contiene los campos requeridos para realizar la
tokenización.
getSessionId
El Session ID es un parámetro que GlobalPay Redeban
utiliza para fines del antifraude. Llame este método si
usted desea recolectar la información del dispositivo
del usuario.
let session_id = Payment.getSessionId();
Una vez que tenga el Session ID, puedes pasarlo a tu servidor
para realizar el cargo al usuario.
PaymentForm Referencia Completa
Inserción Manual
Si desea alterar manualmente los campos utilizados por
PaymentForm para añadir clases adicionales, el
placeholder o id. Puedes rellenar previamente los campos del
formulario como se muestra a continuación.
Esto podría ser útil en caso de que desees
procesar el formulario en otro idioma (de forma
predeterminada, el formulario se representa en
español), o para hacer referencia a alguna entrada por
nombre o id.
Por ejemplo si desea mostrar el formulario en Inglés y
añadir una clase personalizada para el
card_number
<div class="payment-form">
<input class="card-number my-custom-class" name="card-number" placeholder="Card number">
<input class="name" id="the-card-name-id" placeholder="Card Holders Name">
<input class="expiry-month" name="expiry-month">
<input class="expiry-year" name="expiry-year">
<input class="cvc" name="cvc">
</div>
Seleccionar Campos
Puedes determinar los campos que mostrará el
formulario.
| Field |
Description |
| data-capture-name |
Input para nombre del Tarjetahabiente, requerido para
tokenizar
|
| data-capture-email |
Input para email del usuario |
| data-capture-cellphone |
Input para teléfono celular del usuario
|
| data-icon-colour |
Color de los íconos |
| data-use-dropdowns |
Utiliza una lista desplegable para establecer la fecha
de expiración de la tarjeta
|
| data-exclusive-types |
Define los tipos de tarjetas permitidos
|
| data-invalid-card-type-message |
Define un mensaje personalizado para mostrar cuando se
registre una tarjeta no permitida
|
El campo 'data-use-dropdowns' puede resolver el problema que
se presenta con la mascara de expiración en
dispositivos móviles antiguos.
Se integra en el form de manera simple, como se muestra a
continuación:
<div class="payment-form"
id="my-card"
data-capture-name="true"
data-capture-email="true"
data-capture-cellphone="true"
data-icon-colour="#569B29"
data-use-dropdowns="true">
Tipos de tarjetas específicos
Si deseas especificar los tipos de tarjetas permitidos en el
formulario, como Exito o Alkosto. Puedes configurarlo como en
el siguiente ejemplo: Cuando una tarjeta de un tipo no
permitido es capturado, el formulario se reinicia, bloqueando
las entradas y mostrando un mensaje
Tipo de tarjeta invalida para está
operación.
<div class="payment-form"
id="my-card"
data-capture-name="true"
data-exclusive-types="ex,ak"
data-invalid-card-type-message="Tarjeta invalida. Por favor ingresa una tarjeta Exito / Alkosto."
>
Revisa todos los
tipos de tarjetas
permitidos por GlobalPay Redeban.
Leyendo los Valores
PaymentForm proporciona funcionalidad que le permite leer los
valores del campo de formulario directamente con JavaScript.
Genera un elemento de PaymentForm y asigne un id único
(en este ejemplo my-card)
<div class="payment-form" id="my-card" data-capture-name="true"></div>
El siguiente javascript muestra cómo leer cada valor
del formulario en variables locales.
let myCard = $('#my-card');
let cardType = myCard.PaymentForm('cardType');
let name = myCard.PaymentForm('name');
let expiryMonth = myCard.PaymentForm('expiryMonth');
let expiryYear = myCard.PaymentForm('expiryYear');
let fiscalNumber = myCard.PaymentForm('fiscalNumber');
Funciones
Para llamar a una función en un elemento PaymentForm,
sigue el patrón a continuación. Remplace el
texto 'function' con el nombre de la función que desea
llamar.
$('#my-card').PaymentForm('function')
Las funciones disponibles se enumeran a continuación
| Function |
Description |
| card |
Obtiene la tarjeta del objeto |
| cardType |
Obtiene el tipo de tarjeta que se capturó
|
| name |
Obtiene el nombre capturado |
| expiryMonth |
Obtiene el mes de expiración de la tarjeta
|
| expiryYear |
Obtiene el año de expiración de la tarjeta
|
| fiscalNumber |
Obtiene el número fiscal del usuario /
cédula
|
Función CardType
La función cardType devolverá una
cadena según el número de tarjeta ingresado. Si
no se puede determinar el tipo de tarjeta, se le dará
una cadena vacía.
Marcas permitidas
