Ventajas

Con la solución de pago inSite el comercio o tienda online consigue una serie de ventajas que favorecen el aumento de la conversión de ventas:

• Una experiencia de pago sencilla y satisfactoria para sus clientes, al estar totalmente integrada en la página web del comercio y sin saltos de navegación.

• Mayor control del flujo de checkout y pago, ya que toda petición se realiza de forma síncrona por parte del servidor de la tienda web y sin necesidad de procesos asíncronos de “escucha”.

• Facilidad de uso en su integración.

• Alto nivel de seguridad, similar a la solución basada en la redirección del cliente hacia una página de pago externa.

En definitiva, además de un proceso de pago totalmente integrado en el checkout al comprador, se permite al comercio una mayor flexibilidad y control en el proceso de pago, pudiendo además separar los pasos de captura de datos y ejecución de la operación.

Creación del iFrame

Como primer paso para poder integrar los campos de introducción de datos de tarjeta directamente en su propia página web, se debe incluir el fichero Javascript alojado en el servidor de Redsys con la siguiente línea de código (el fichero varía según se vaya a usar el entorno de pruebas o el entorno de producción real):

Cabe destacar que todos los campos de los parámetros que pasamos a las llamadas JavaScript son string , es decir, son cadenas. En el caso de que los parámetros que no sean funciones los pasemos como int o cualquier otro tipo de dato, recibiremos un error.

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

// Real
<script src="https://sis.redsys.es/sis/NC/redsysV3.js"></script>
							

El siguiente paso es incluir los elementos del formulario de pago, los cuales dependen de la alternativa que se desee implementar. A la hora de integrar la conexión InSite existen dos posibilidades:

• Integración unificada (todo en uno): Los elementos de pago, como los campos de introducción de número de tarjeta, fecha de caducidad, cvv y botón de pago se incrustan como un solo elemento que se adapta a la pagina del comercio (responsive) , con diseño ligero y estilos CSS personalizables. Incluye por defecto ayudas interactivas animadas y una buena usabilidad al usuario.

• Integración por elementos independientes: los campos de introducción de datos de tarjeta se deben incrustar cada uno de forma independiente dentro de la página web de la tienda web, lo que permite el control total del diseño, posición, gestión de errores, etc...

• Integración unificada
• Integración elementos independientes

				 			
<div id="card-form"/>
							
						

				 	    	
<div class="cardinfo-card-number">
	<label class="cardinfo-label" for="card-number">Numero 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">Numero 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</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>
				 	  		
					   

A continuación, se incluirán dos campos para recibir el ID de operación en el caso de que los datos sean correctos, o el código de error de la respuesta en caso contrario.

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

Para recoger la respuesta con los parámetros anteriores, se debe incluir una función para realizar la validación de los datos introducidos, y una función de escucha de mensajes (listener). Para facilitar la integración, Redsys proporciona en su API una función (storeIdOper) en la que se deberá indicar en qué elemento del DOM se debe almacenar el ID de operación una vez sea generado:

									
<!-- Listener -->
<script>	
	function merchantValidationEjemplo(){
		//Insertar validaciones…
		return true;
	}
				

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

					
				

Una vez preparado el envío de datos y la posterior recepción, se llamará a la función proporcionada para generar los elementos de introducción de datos de tarjeta:

• Integración unificada
• Integración elementos independientes

Hay disponibles dos funciones, pudiendo usar la que prefiramos. En la primera pasaremos cada dato en un parámetro (getInSiteForm()), y en la segunda pasaremos los datos en formato JSON( getInSiteFormJSON()). La ventaja de esta última es que podremos pasar solo los datos que necesitemos, sin necesidad de enviar parámetros vacíos.

Como parámetros de las funciones se indicará el id del contenedor reservado para su generación, así como el estilo requerido para los diferentes elementos (formato CSS). En esta modalidad, se podrán incluir estilos para diferentes elementos:

• estiloBoton: Se permite la personalización completa del botón de pago.

• estiloBody: Se recomienda utilizar para establecer un color de fondo o modificar el color o estilo de los textos.

• estiloCaja: Se podrá establecer un color de fondo diferenciado para la caja de introducción de datos. El color del texto aplicado en este elemento se aplicará al “placeholder” de los elementos.

• estiloInputs: Se recomienda su uso si se quiere utilizar un tipo de letra diferente o modificar el color del texto de los campos de introducción de datos.

Adicionalmente, se podrá personalizar de igual forma el texto a incluir en el botón de pago y, por último, se deberá informar el valor del fuc, terminal y número de pedido en la petición de carga del iframe con el formulario de pago.

				 				
// Petición de carga de iframe clásica
getInSiteForm(idContenedor, estiloBoton, estiloBody, estiloCaja, estiloInputs, buttonValue, fuc, terminal, merchantOrder, idiomaInsite, mostrarLogo, estiloReducido, estiloInsite);

// Ejemplo
getInSiteForm('card-form', '', '', '', '', 'Texto botón pago', ‘123456789', '1', ‘ped4227’, 'ES', true, false, 'twoRows');
								
							

								
// Petición de carga de iframe JSON
var insiteJSON = {
	"id" : "card-form",
	"fuc" : "123456789",
	"terminal" : "1",
	"order" : “ped4227”,
	"estiloInsite" : "inline"
}
getInSiteFormJSON(insiteJSON);
								
							

Se incluyen cuatro parámetros opcionales en la carga del iframe:

• Idioma: Establece el idioma de los textos. La relación de códigos se puede encontrar en el apartado Catálogo de idiomas, pudiendo usar tanto el código SIS como el código ISO 639-1 del idioma.

  En caso de no establecerse ningún idioma o informar un código incorrecto, el idioma por defecto será el Castellano.

• Logo entidad: Establece si se quiere mostrar el logo de la entidad, indicando true si se desea mostrarlo o false si en el caso contrario. En caso de no establecer ningún valor, por defecto se mostrará el logo de la entidad.

• Estilo reducido: Indica si se quiere mostrar Insite con un ancho reducido.

• Estilo Insite: Se puede elegir entre dos estilos predefinidos de Insite, ‘inline’ o ‘twoRows'. Por defecto se pintará con el estilo ‘inline’.

  A continuación, se puede ver un ejemplo de cada estilo de Insite con sus respectivas versiones reducidas:

Inline	Inline reducido
TwoRows	TwoRows reducido

Puede consultar la lista de parámetros para enviar los datos en formato JSON a continuación:

Parámetro	Obligatorio / Opcional	Valores	Por defecto
id	Obligatorio	-	-
fuc	Obligatorio	-	-
terminal	Obligatorio	-	-
order	Obligatorio	-	-
styleButton	Opcional	Estilo CSS	""
styleBody	Opcional	Estilo CSS	""
styleBox	Opcional	Estilo CSS	""
styleBoxText	Opcional	Estilo CSS	""
buttonValue	Opcional	Texto botón pago	Pagar
idiomaInsite	Opcional	Catálogo de idiomas	ES
mostrarLogoInsite	Opcional	true, false	true
estiloReducidoInsite	Opcional	true, false	false
estiloInsite	Opcional	inline, twoRows	inline

Como parámetros de las funciones se indicará el id del contenedor reservado para su generación, así como el estilo requerido para el mismo (formato CSS). En el caso de la función getCardInput() se pasarán dos campos de estilo CSS, uno con el estilo de la caja exterior y otro con el estilo del input que contiene. Adicionalmente, se podrá personalizar el texto del botón de pago y, por último, se deberá informar el valor del fuc, terminal y número de pedido en la petición de carga del iframe.

				 	    	
				 	    	<!-- Petición de carga de iframes -->
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);
				 	  		
					   

Si se utiliza el elemento de fecha unificado (mm/aa) reemplazaremos las funciones getExpirationMonthInput() y getExpirationYearInput() por la función getExpirationInput().

				 	    	
				 	    	<!-- Petición de carga de iframes -->
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);
				 	  		
					   

Solicitud de la operación

Una vez recibido y almacenado el ID de operación (token) por parte del comercio, se deberá lanzar la operación de autorización mediante una petición REST. Se pone a disposición de los comercios librerías de ayuda a la conexión REST, que simplifican esta conexión en lenguajes Java y PHP.

En la operación, se tendrá que enviar el parámetro DS_MERCHANT_IDOPER con el valor del ID ("token") en lugar de los campos habituales de envío de datos de tarjeta. Además, se deberá utilizar el mismo número de pedido (DS_MERCHANT_ORDER) que el utilizado en la generación del idOper.

Un ejemplo completo de una integración inSite simple sería el que sigue:

				 	    	
<html>

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

<body>
    <div id="card-form" />
    <form name="datos">
        <input type="hidden" id="token"></input>
        <input type="hidden" id="errorCode"></input>
        <a href="javascript:alert(document.datos.token.value + '--' + document.datos.errorCode.value)"> ver</a>
    </form>

    <script>
        function merchantValidationEjemplo() {
            //Insertar validaciones…
            alert("Esto son validaciones propias");
            return true;
        }
 

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



        function pedido() {
            return "pedido" + Math.floor((Math.random() * 1000) + 1);
        }
        
        var insiteJSON = {
            "id" : "card-form",
            "fuc" : "999008881",
            "terminal" : "1",
            "order" : pedido(),
            "estiloInsite" : "twoRows"
        }
        
        getInSiteFormJSON(insiteJSON);

    </script>
</body>

</html>				 	    	

				 	  		
					   

Errores más comunes

A la hora de realizar una integración mediante inSite, se pueden obtener varios erroes. Si al momento de generar la operación, el idOper se nos devuelve con -1 , esto quiere decir que el número de pedido está repetido y hay que controlar que tras cada operación, este número se vaya modificando (incremetándose en uno, por ejemplo). También puede ser que se nos devuelva "Error", y esto suele ocurrir cuando hemos enviado los parámetros usando cualquier tipo que no sea un string, una cadena, ya que se recuerda que todos los parámetros que se pasan en la llamada JavaScript deben ser de tipo cadena. Por último, otro error común es que tras la llamada al iframe, éste no se pinte y no salga nada en nuestra pantalla. Esto puede ser debido a que no tenemos permitidos los dominios inSite en los que se va a implementar esta integración inSite, y tendremos que permitirlos desde el portal de administración del TPVV.

Una vez generado el iframe, puede no devolver el ID de la operación (idOper), y devolver un error. Estos son los más comunes:

Catálogo de idiomas