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

1. 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.

2. El cliente inicia el proceso de pago en tu portal y da clic en el botón de pago.

3. 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

4. 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.

5. Después tu sitio deberá enviar a tu servidor el token, device_fingerprint y todos los datos del pedido.

6. 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

Opciones de Configuración

Para la configuración de la ventana podrán incluirse los siguientes campos de configuración.

 

---

Para ayudarte a resolver tus dudas haz clic aquí y genera una solicitud a Servicio al Cliente, te respondemos lo más pronto posible.