InSite

¿Qué es la integración InSite?

La integración InSite consiste en incrustar el formulario de pago en tu página web. De esta forma, los clientes están introduciendo su información de pago en el TPV Virtual sin salir de tu página web. 

Como los datos de pago los gestiona el TPV Virtualy no pasan por tus sistemas, no tienes que cumplir con la normativa PCI DSS. 

La operación de pago debe completarse mediante una conexión REST. Cuando el cliente completa la información en el formulario de pago, se devuelve un ID de operación (idOper) que se debe enviar mediante conexión REST para completar el pago. 

En este documento veremos cómo invocar el formulario de pago en tu página web y cómo obtener el ID de operación. 

Estas son las ventajas de la integración InSite: 

  • Experiencia de pago totalmente integrada en tu página web.
  • No tienes que preocuparte del cumplimiento de la normativa PCI-DSS.
  • Numerosas operativas disponibles.

Este es un ejemplo del cajero de pago que se incrusta en tu página web:

Además, los campos del cajero pueden incluirse de distintas formas: 

Integración InSite: paso a paso

A continuación tienes los pasos para realizar la integración InSite. Recuerda: Adapta los ejemplos de código a tus necesidades.

Librerías de Redsys

Paso 1: Añadir dominios InSite en Canales

Los dominios y subdominios de tu sitio web, desde donde se cargará el formualario InSite, se tienen que indicar en Canales. 

Esta gestión la realiza Soporte. Indica a Soporte los dominios de tu sitio web que quieres incluir. 

Puedes ir haciendo los siguientes pasos mientras se gestiona este. 

Paso 2: Incluir el fichero JavaScript

El segundo paso de la integración InSite es incluir el fichero JavaScript alojado en el servidor de Redsys.

Hay un fichero para entorno de Pruebas y otro para Producción, se incluye con una línea de código que cambia según el entorno. Incluye esta línea de código en el body de tu integración: 

				
					<script src="https://sis-t.redsys.es:25443/sis/NC/sandbox/redsysV3.js"></script>
				
			
				
					<script src="https://sis.redsys.es/sis/NC/redsysV3.js"></script>

 El siguiente paso es incrustar los campos del formulario de pago en tu página web. Puedes incluir los elementos de forma unificada todo en uno (3a) o de manera independiente (3b). 

Paso 3a, opción formulario unificado todo en uno

En esta modalidad de la integración InSite, el TPV Virtual proporciona un único iframe que incluye todo el formulario de pago: número de tarjeta, fecha de caducidad, CVV y botón de envío. Esta solución es ideal si deseas simplificar la integración y mantener una experiencia de usuario fluida sin salir de tu web.

Las características principales:

  • Formulario completo en un único iframe.
  • Detección automática de la marca de tarjeta.
  • Validación de formato en tiempo real (por ejemplo, longitud del número, formato de caducidad, etc.).
  • Personalización del diseño mediante estilos CSS definidos por el comercio.

¿Cómo integrarlo?

Incluye los siguientes elementos en el body de tu integración:

1. Incluir la función de validación y el listener: Es necesario definir una función para validar los datos del formulario (si procede) y un listener que recoja la respuesta con el ID de operación (token) o el código de error:

				
					<script>
	function merchantValidationEjemplo() {
		// Validaciones propias si las necesitas
		return true;
	}

  // Listener de recepción de ID de operación
	window.addEventListener("message", function receiveMessage(event) {
		storeIdOper(event, "token", "errorCode", merchantValidationEjemplo);
	});
</script>

2. Añadir los elementos en tu HTML: Debes crear un contenedor con un ID único donde se insertará el iframe, así como dos campos ocultos para recoger la respuesta:

				
					<div id="card-form"></div>
<input type="hidden" id="token" />
<input type="hidden" id="errorCode" />

En las librerías de Redsys se proporciona la función storeIdOper() dentro de su API, que almacena la respuesta en los campos ocultos definidos.

3. Llamar a la función para generar el formulario: Finalmente, debes llamar a la función getInSiteForm() para generar el formulario indicando el ID del mismo dentro del contenedor definido (card-form).

				
					getInSiteForm(
  'card-form',           // ID del contenedor
  estiloBoton,           // Estilo CSS para el botón
  estiloBody,            // Estilo CSS general del formulario
  estiloCaja,            // Estilo del fondo de la caja de datos
  estiloInputs,          // Estilo de los inputs (color, tipografía…)
  'Texto botón pago',    // Texto a mostrar en el botón
  fuc,                   // Número de comercio
  terminal,              // Número de terminal
  merchantOrder,         // Número de pedido
  'ES',                  // Idioma del formulario
  true                   // Mostrar logo de la entidad (true/false)
);

Tienes que informar de los campos relacionados con el comercio, estos son:

CampoDescripciónRequerido/Opcional
fucNúmero de comercio proporcionado. No cambia entre entornos.Requerido
terminalNúmero de terminal.Requerido
merchantOrderNúmero de pedido que identifica la operación en el TPV Virtual. El número de pedido que se utilice en este paso debe ser el mismo que el utilizado en la posterior petición de pago. Requerido
idiomaIdioma del formulario (por ejemplo: ES, EN, FR…).Opcional
mostrarLogoEntidadIndica si se debe mostrar el logo de la entidad (true / false).Opcional

Puedes modificar estilos CSS con estos campos. El valor de estos campos es en formato CSS y su envío es opcional:

ParámetroDescripción
estiloBotonPersonaliza el aspecto del botón de pago (colores, borde, fuente, etc.).
estiloBodyDefine el color de fondo, estilo de textos y diseño general del formulario.
estiloCajaFondo y color del bloque de introducción de datos. Afecta también al placeholder.
estiloInputsPersonaliza la fuente, color y estilo de los campos de entrada (tarjeta, fecha…).

Importante: En el campo «Texto botón de pago», debe codificarse en caracteres HTML para evitar problemas de codificación. Por ejemplo, «Botón» sería: «Bot&#243;n».

4. Indica al navegador que ejecute la función «loadRedsysForm»: Esta función se ejecuta cuando finaliza la carga de la página: 

				
					window.onload = loadRedsysForm();

Este código es un ejemplo para entender más fácilmente el proceso. Puede que no funcione correctamente. Adapta el código a las necesidades de tu integración. Consulta las librerías de Redsys para ver más ejemplos:

Librerías de Redsys

Paso 3b, opción de elementos independientes

Esta modalidad permite una personalización completa del formulario de pago. El comercio puede distribuir y diseñar libremente los campos de tarjeta y el botón de pago dentro de su propia interfaz, sin perder la seguridad del TPV Virtual.

Cada campo se genera como un iframe independiente, y se puede personalizar visualmente con estilos CSS. Además, se incluyen validaciones automáticas (formato de número de tarjeta, caducidad, CVV, etc.) y reconocimiento de marca.

¿Cómo integrarlo?

Incluye los siguientes elementos en el body de tu integración: 

1. Añadir los contenedores en tu HTML: Crea contenedores vacíos con un ID único para que se inserten de forma segura los campos dentro de un iframe. Estos contenedores tendrán el identificador de los distintos campos: cardinfo-card-number,cardinfo-exp-date,cardinfo-cvv.

A continuación tienes 2 ejemplos, uno con la caducidad (mes y año) separada y otro con la caducidad combinada: 

				
					<div class="cardinfo-card-number">
  <label class="cardinfo-label" for="card-number">Número de tarjeta</label>
  <div class="input-wrapper" id="card-number"></div>
</div>

<div class="cardinfo-exp-date">
  <label class="cardinfo-label" for="expiration-month">Mes caducidad (MM)</label>
  <div class="input-wrapper" id="expiration-month"></div>
</div>

<div class="cardinfo-exp-date2">
  <label class="cardinfo-label" for="expiration-year">Año caducidad (AA)</label>
  <div class="input-wrapper" id="expiration-year"></div>
</div>

<div class="cardinfo-cvv">
  <label class="cardinfo-label" for="cvv">CVV</label>
  <div class="input-wrapper" id="cvv"></div>
</div>

<div id="boton"></div>

				
			
				
					<div class="cardinfo-card-number">
  <label class="cardinfo-label" for="card-number">Número de tarjeta</label>
  <div class="input-wrapper" id="card-number"></div>
</div>

<div class="cardinfo-exp-date">
  <label class="cardinfo-label" for="card-expiration">Caducidad (MM/AA)</label>
  <div class="input-wrapper" id="card-expiration"></div>
</div>

<div class="cardinfo-cvv">
  <label class="cardinfo-label" for="cvv">CVV</label>
  <div class="input-wrapper" id="cvv"></div>
</div>

<div id="boton"></div>

2. Incluir la función de validación y el listener: Es necesario definir una función para validar los datos del formulario (si procede) y un listener que recoja la respuesta con el ID de operación (token) o el código de error.

				
					<script>
	function merchantValidationEjemplo() {
		// Validaciones propias si las necesitas
		return true;
	}
  
  // Listener de recepción de ID de operación
	window.addEventListener("message", function receiveMessage(event) {
		storeIdOper(event, "token", "errorCode", merchantValidationEjemplo);
	});
</script>

3. Añadir los campos ocultos para recoger la respuesta en tu HTML: A continuación, incluye los siguientes campos ocultos para recoger la respuesta del TPV Virtual, que sería el token (idOper) si la operación va bien, o el código de error correspondiente: 

				
					<input type="hidden" id="token" />
<input type="hidden" id="errorCode" />

En las librerías de Redsys se proporciona la función storeIdOper() dentro de su API, que almacena la respuesta en los campos ocultos definidos.

3. Llamar a la función para generar el formulario: Una vez definidos los contenedores HTML y configurado el listener para recibir el resultado del pago, el siguiente paso es invocar las funciones proporcionadas para generar los campos de introducción de datos de la tarjeta dentro de cada contenedor.

Las funciones están compuestas por:

  • getCardInput: El identificador del contenedor, estilo CSS de la caja exterior y estilo CSS del input, placeholder (texto para guiar al cliente).
  • getExpirationInput: El identificador del contenedor, estilo CSS personalizado y un placeholder (texto para guiar al cliente).
  • getCVVInput: El identificador del contenedor, estilo CSS personalizado y un placeholder (texto para guiar al cliente).

En la función que invoca el botón de pago getPayButton es obligatorio incluir:

  • Identificador del botón.
  • Texto del botón de pago.
  • FUC: Número de identificación de tu comercio.
  • terminal: Número de terminal con el que estés procesando la operación. 
  • merchantOrder: Número de pedido de la operación. Debe coincidir con el que se envíe en la petición de pago REST posterior. 

A continuación tienes dos ejemplos donde podrás ver las funciones y sus componentes:

				
					getCardInput('card-number',estiloCaja, placeholder, estiloInput);
getExpirationMonthInput('expiration-month', estilosCSS, placeholder);
getExpirationYearInput('expiration-year', estilosCSS, placeholder);
getCVVInput('cvv', estilosCSS, placeholder);
getPayButton('boton', estilosCSS, 'Texto botón pago', fuc, terminal, merchantOrder);
				
			
				
					getCardInput('card-number',estiloCaja, placeholder, estiloInput);
getExpirationInput('card-expiration', estilosCSS, placeholder);
getCVVInput('cvv', estilosCSS, placeholder);
getPayButton('boton', estilosCSS, 'Texto botón pago', fuc, terminal, merchantOrder);

Importante: El texto del botón de pago y los placeholders, deben codificarse en caracteres HTML para evitar problemas de codificación. Por ejemplo, «Botón» sería: «Bot&#243;n».

4. Indica al navegador que ejecute la función «loadRedsysForm»: Esta función se ejecuta cuando finaliza la carga de la página: 

				
					window.onload = loadRedsysForm();

Este código es un ejemplo para entender más fácilmente el proceso. Puede que no funcione correctamente. Adapta el código a las necesidades de tu integración. Consulta las librerías de Redsys para ver más ejemplos:

Librerías de Redsys

¿Qué pasa una vez renderizo el formulario?

Cuando renderizas el formulario y el cliente introduce los datos de su tarjeta y pulsa en Pagar, pueden ocurrir dos cosas:

  1. Todo ha ido correctamente: El TPV Virtual genera y almacena un ID de operación (idOper) que tendrá que enviarse mediante conexión REST para completar el pago.
  2. Hay algún error: Hay algún error en la introducción de datos de la tarjeta o en la integración. El comercio tendrá que manejar y mostrar los errores. 

Paso 4: Envío del idOper para procesar la operación

Una vez has renderizado el cajero (ya sea de forma unificada o de forma independiente) y el cliente ha introducido sus datos de pago, se genera el ID de operación (idOper). Llegados a este punto, para completar el pago tienes que mandar este ID de operación (idOper) mediante una conexión REST para completar la operación. 

En los siguientes enlaces tienes información sobre:

  1. Cómo realizar la integración REST.
  2. Cómo completar las distintas operativas con tarjeta mediante InSite – REST.
1. Realizar integración REST
Operativas tarjetas InSite - REST

Paso 5: Proceso de autenticación 3DS en InSite

En la mayoría de peticiones de pago, tendrás que iniciar un proceso de autenticación 3DS para realizar el pago de forma segura.

Este proceso consiste en redirigir la navegación del cliente hacia el servidor de autenticación del banco o del emisor de la tarjeta para que el cliente complete el proceso de autenticación. 

Este proceso requiere una serie de paso que se explican en la sección enlazada del documento de operativas con tarjeta mediante InSite – REST.

Operativas tarjetas InSite - REST

Artículos

Comparte este documento
Tabla de Contenidos

Cyberpac

Consulta la documentación de Cyberpac. Aquí tienes las distintas secciones:

Canales

Módulos de integración

Integraciones a medida

Consulta la documentación de las distintas secciones de integraciones:

Comienza a integrar

undraw_add_to_cart_re_wrdo 1 (1) (1)

Plugins para CMS

Complementa la integración

SDKs

Métodos de pago

Herramientas

Addon Payments

Consulta la documentación de Addon Payments. Aquí tienes las distintas secciones:

Integraciones

Consultas frecuentes

Portal Backoffice

Pagos integrados en TPV

Crea una solución que te ayudará a automatizar procesos. Incluso, podrás agregar procesos de pago en terminales físicos.

Pago integrado con TPV Android

Pago integrado con Smartphone TPV

Fichas Técnicas TPVs

Addon Payments

Comercia Global Payments has several integration options so you can choose the most efficient one for you.

Integrations

Frequently Asked Questions

BackOffice Portal

Consult the documentation of the different integrations sections:​

Start integration

undraw_add_to_cart_re_wrdo 1 (1) (1)

CMS Plugins

Complement your integration

SDKs

Payment Methods

Tools