Integración de Secure Window
Objetivo
Capturar y almacenar datos de tarjeta de manera segura en portal web. De manera general podemos ver el proceso con los siguientes pasos:
Visión General
Cliente accede a portal y solicita realizar el pago, en el portal deberás de incluir el código de Secure Window a través de HTTPS.
El cliente inicia el proceso de pago en tu portal y da clic en el botón de pago.
Ventana de Pago - Se inicializa la ventana de pagos incluyendo el destino donde se creará la ventana, datos de cliente e información básica de la compra del cliente
Tokenización.- Una vez que el usuario llene sus datos de pago en la ventana y de click en Pagar, la ventana transmitirá los datos de la tarjeta de tu cliente a la bóveda de Claro Pagos, generará un token único de la tarjeta e insertará el ID único que usarás para generar una solicitud de pago.
Después tu sitio deberá enviar a tu servidor el token, device_fingerprint y todos los datos del pedido.
Cargo - Tu servidor deberá hacer un request al API de Claropagos para crear un cargo y complementar el pago, detalles en la guía de integración.
Modo de operación
La ventana soporta dos modos de operación, realizando un ajuste en la interfaz de acuerdo al modo seleccionado.
Modo de Pago
En este modo la ventana mostrará un formulario de captura de datos de tarjeta completos de tarjeta, en este modo de operación, se esperar que el comercio realicé un cobro al término del proceso de tokenización.
Ejemplo de ventana en modo de pago
Modo de Captura
En este otro modo, la ventana deberá de solicitar solamente los datos de la tarjeta del cliente pero no indicar que se realizará un proceso de cobro inmediato. Este modo de operación podrá usarse en un contexto distinto al de la caja de pago.
Ejemplo de ventana en modo de captura
Ejemplo de Ventana
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.claropagos.com/path/to/secure-window.js"></script>
<!-- Botón para iniciar proceso de pago -->
<button id="pagar">Pagar</button>
<!-- Target para creación de ventana -->
<div id="secure-window"></div>
Javascript
// Preparamos datos de tarjeta de cliente
var direccion = {
"linea1": "direccion 1",
"linea2": "direccion 2",
"linea3": "direccion 3",
"cp": "11011",
"telefono": {
"tipo": "no_definido",
"codigo_pais": "55",
"codigo_area": "52+",
"prefijo": "",
"numero": "12341234",
"extension": "325"
},
"municipio": "string",
"ciudad": "string",
"estado": "CMX",
"pais": "MXN",
"referencia_1": "string",
"referencia_2": "string",
"longitud": "0",
"latitud": "0"
};
// Datos sobre monto de pago
var data = {
"monto": "123.00",
"moneda": "MXN",
"pais": "MEX",
"descripcion": "Mad Max: Fury Road"
};
// Cliente comienza proceso de pago
document.getElementById('pagar').addEventListener('click', function(e) {
// Prevenir proceso default
e.preventDefault();
// Inicializar ventana
claroPagos({
"modo_operacion": "pago",
"token": "QiLCJhbGciOimMzV",
"cliente_id": "ab1fdc49-dac4-4c4d-96b9-0da4373d57a8",
"metodo_pago": "tarjeta",
"metodo_pago_token": "b37ada3a-0a8b-449d-97c7-0070086c99d3",
"default": true,
"cargo_unico": false,
"data": data,
"direccion": direccion
},
callbackSuccess,
callbackError,
'secure-window');
});
// Tu código para gestión de captura correcta
var callbackSuccess = function(r){
// Opcional - Cerrar ventana de pagos para continuar proceso
claroPagos.closeModal();
// Gestión de datos de respuesta
alert('callback correcto');
console.log(r);
};
// Tu código para gestión de errores de captura
var callbackError = function(r) {
alert('callback error');
console.log(r);
;}
Localización
De acuerdo a los parámetros pais
y moneda
se realizará el proceso de lozalización en la descripción del monto de pago, actualmente el único idioma soportado en la interfaz es español.
Países y monedas soportadas
Nombre | Código País (alpha-3) | Código de Moneda | Número de Moneda | Decimales | Divisa | Símbolo |
---|---|---|---|---|---|---|
Argentina | ARG | ARS | 032 | 2 | Peso Argentino | $ |
Brasil | BRA | BRL | 986 | 2 | Real Brasileño | R$ |
Chile | CHL | CLP | 152 | 0 | Peso Chileno | $ |
Colombia | COL | COP | 170 | 2 | Peso Colombiano | $ |
Costa Rica | CRI | CRC | 188 | 2 | Colón costarricense | ₡ |
Ecuador | ECU | USD | 840 | 2 | Dólar estadounidense | $ |
El Salvador | SLV | SVC | 222 | 2 | Colón Salvadoreño | ₡ |
Estados Unidos | USA | USD | 840 | 2 | Dólar estadounidense | $ |
Guatemala | GCA | GTQ | 320 | 2 | Quetzal | Q |
Honduras | HND | HNL | 340 | 2 | Lempira | L |
México | MEX | MXN | 484 | 2 | Peso mexicano | $ |
Nicaragua | NIC | NIO | 558 | 2 | Córdoba | C$ |
Panamá | PAN | PAB | 590 | 2 | Balboa | B |
Paraguay | PRY | PYG | 600 | 0 | Guaraní | ₲ |
Perú | PER | PEN | 604 | 2 | Sol | S/. |
Puerto Rico | PRI | USD | 840 | 2 | Dólar estadounidense | $ |
República Dominicana | DOM | DOP | 214 | 2 | Peso dominicano | RD$ |
Uruguay | URY | UYU | 858 | 2 | Peso uruguayo | $U |
Opciones de Configuración
Para la configuración de la ventana podrán incluirse los siguientes campos de configuración.
Param | Formato (KEY) | Type | Description | Required |
---|---|---|---|---|
token | token | String | Valor de Token para realizar operaciones de captura de datos de tarjeta (BEARER TOKEN), dará permisos para realizar la petición e identificará al comercio | TRUE |
modo_operacion | modo_operacion | String | Indicará el modo en el cual operará la ventana, en modo pago o en modo captura. Únicos valores válidos [pago, captura] | TRUE |
data | data | Objeto | Contendrá los datos de configuración de la ventana de pagos | TRUE |
metodo_pago | metodo_pago | String | Define el tipo de pago que será usado en la suscripción, en cargos con tarjeta bancaria deberá ser ('tarjeta'). | FALSE |
metodo_pago_token | metodo_pago_token | String | Token de método de pago seleccionado, en el caso de tarjeta sería el valor del token del objeto tarjeta | FALSE |
monto | data.monto | Float | Monto de Pedido | TRUE |
descripcion | data.descripcion | String | Descripción | TRUE |
pais | data.pais | String | Identificador de país de tres caracteres de acuerdo al estándar ISO 3166-1 Alpha-3 (tres caracteres alfabéticos) | TRUE |
moneda | data.moneda | String | Identificador de moneda de tres caracteres de acuerdo al estándar ISO 4217 | TRUE |
default | default | Boolean | Indicará si la tarjeta capturada será definida como default para el cliente | FALSE |
cargo_unico | cargo_unico | Boolean | Indicará si la captura de la tarjeta permitirá un único uso (único cargo) | FALSE |
cliente_id | cliente_id | String | Id de cliente en plataforma Claro Pagos | TRUE* |
direccion | direccion | Objeto | FALSE | |
linea1 | direccion.linea1 | String | FALSE | |
linea2 | direccion.linea2 | String | FALSE | |
linea3 | direccion.linea3 | String | FALSE | |
cp | direccion.cp | String | FALSE | |
telefono | direccion.telefono | Objeto | FALSE | |
tipo | direccion.telefono.tipo | string | Posibles valores [no_definido, movil, casa, oficina, facturacion, mensajeria, temporal] | FALSE |
codigo_pais | direccion.telefono.codigo_pais | String | ITU-T E.123 y E.164 (ISD) | FALSE |
codigo_area | direccion.telefono.codigo_area | String | ITU | FALSE |
prefijo | direccion.telefono.prefijo | String | Valor opcional, prefijo utilizado por algunos países | FALSE |
numero | direccion.telefono.numero | Numérico | Teléfono del cliente | FALSE |
extension | direccion.telefono.extension | Numérico | FALSE | |
municipio | direccion.municipio | string | FALSE | |
ciudad | direccion.ciudad | string | FALSE | |
estado | direccion.estado | string | Identificador de estado de tres caracteres de acuerdo al estándar ISO 3166-2 | FALSE |
pais | direccion.pais | String | Identificador de país de tres caracteres de acuerdo al estándar ISO 3166-1 | FALSE |
referencia_1 | direccion.referencia_1 | String | FALSE | |
referencia_2 | direccion.referencia_2 | String | FALSE | |
longitud | direccion.longitud | Numérico | Coordenadas de longitud de localización del domicilio | FALSE |
latitud | direccion.latitud | Numérico | Coordenadas de latitud de localización del domicilio | FALSE |