Durante años (sin exagerar), clientes y lectores de este blog me han estado preguntando cómo se podía integrar el pago con Redsys dentro de la tienda WooCommerce, es decir, que el cliente pudiera pagar con su tarjeta sin tener que salir de la tienda para irse a la pasarela, como se hace con, por ejemplo, Stripe.

Y durante años mi respuesta ha sido la misma: No se puede. Pues ya está, se acabó el dar esa respuesta. Porque Redsys ya cuenta con una integración on-site para WooCommerce. Sigue leyendo si te interesa saber cómo ponerla en marcha.

Integración on-site y off-site de la pasarela de pago

Si gestionas una tienda online, a estas alturas ya te habrás dado cuenta de que las pasarelas de pago pueden integrarse de dos formas diferentes, on-site y off-site, según el cliente realice el pago dentro de la propia tienda o tenga que salir de ella e ir a la web de la plataforma para realizar el pago.

Un ejemplo de lo primero es Stripe, cuyo formulario de pago se integra perfectamente en el checkout de WooCommerce, donde el cliente introduce en la misma página sus datos de facturación y envío y los datos de la tarjeta:

Ejemplos de lo segundo hay de sobra y muy conocidos. Como PayPal, que saca al cliente de la tienda y lo lleva a su web para que realice el pago allí.

Cada una de estas formas de integración tiene sus ventajas y sus inconvenientes para cada una de las partes (cliente, vendedor y pasarela), y son varios los factores que entran en juego: seguridad, usabilidad, soporte para divisas… Es un tema extenso y quizá trate de ello otro día (no es el objeto de esta entrada), pero sí voy a destacar algo que seguro que tú ya sabes: para el vendedor es muy importante que el cliente no tenga que salir de su web en ningún momento durante el proceso de venta. Al fin y al cabo uno no puede controlar lo que ocurre fuera de su tienda.

Redsys y el pago on-site en WooCommerce

Pues eso, que hasta ahora Redsys integraba su pago off-site: se genera un botón con los datos del pago y, al hacer clic, el cliente era redirigido a la web de la pasarela para realizar el pago.

Además, este botón se puede generar con mayor o menor fortuna, ya que debe incluir una serie de datos que no se van a conocer hasta que el cliente haya completado la información del checkout (por ejemplo, la cantidad total a pagar, que debe incluir los impuestos, gastos de envío, etcétera), por lo que el plugin gratuito que proporciona la pasarela incluye un paso adicional que genera este botón.

Afortunadamente hay alternativas de mayor calidad, como el plugin oficial de WooCommerce para Redsys desarrollado y mantenido por José Conti, que genera el botón «al vuelo» en el propio checkout, ahorrando esa molesta página intermedia.

Configurar el TPV on-site de Redsys

Eso acaba de cambiar. Redsys ya ofrece una integración on-site de su TPV virtual para WooCommerce (también para Prestashop y Magento). Aunque a día de hoy está en fase beta, con lo que deberías tener cuidado a la hora de introducirlo en una tienda en producción, yo lo he probado y funciona muy bien. Vamos a ver cómo.

Lo primero es descargar el plugin, que es gratuito y está a tu disposición en el apartado de descargas de la web de Redsys. Se trata de la opción TPV VIRTUAL InSite:

No se trata de una descarga directa, sino de un formulario en el que debes dejar el correo electrónico en el que recibirás el enlace de descarga. Además, te informarán de futuras actualizaciones, por lo que no tendrás que estar atento a ello.

La instalación es como con cualquier otro plugin descargado (Plugins > Añadir nuevo > Subir plugin), pero hay un detalle importante: la integración InSite es incompatible con la que existía hasta ahora; es decir, no puedes instalar esta versión de la pasarela sin haber desinstalado primero la anterior.

Por lo demás, la configuración es exactamente la misma que la del plugin «normal», con las mismas opciones y los mismos datos, así que no tendrás ningún problema en configurarla. Si tienes dudas echa un vistazo a esta otra entrada:

Lo que sí cambia, y notablemente, es el resultado: aquí tienes una captura de la página de pago, aunque puedes ver el proceso de checkout en detalle en el vídeo que tienes más abajo:

Bloqueado por la política de seguridad de contenido o Content Security Policy

He podido ver en los comentarios que muchos estáis teniendo este problema: recibís un mensaje de error que impide que se cargue el contenido. Concretamente, Firefox muestra el siguiente error:

Chrome por su lado no muestra absolutamente nada, aunque la consola de depuración muestra el error:

Este problema no tiene que ver con el plugin, sino con la seguridad del propio sitio de Redsys. El iframe del formulario de pago está protegido con una política de seguridad que bloquea ciertos sitios o, mejor dicho, que permite que se muestre sólo en sitios determinados: el iframe sólo se mostrará si la instalación está dentro de uno de los dominios permitidos por esta directiva.

Por defecto sólo lo está http://localhost ya que infinidad de pruebas se hacen en modo local. Esto se hace así para que no sea posible cargar un TPV en un sitio web para el que no está autorizado, previniendo fraudes. Simplemente tienes que añadir tu dominio a la lista de dominios permitidos por esta directiva, de forma que puedas usar el modo inSite en tu sitio web sin ser bloqueado.

Para ver qué dominios tienes permitidos sólo tienes que acceder al panel de administración de Redsys y, en el menú Comercio, mirar al final del apartado Datos de configuración. Ahí hay una opción llamada Dominios inSite permitidos.

Por defecto no aparece ningún dominio, y además no puedes añadir ninguno tú mismo: debes contactar con Redsys para que lo añadan. Una vez hayan añadido tu dominio, el error de protección de contenido desaparecerá y el formulario de pago ya aparecerá en tu web.

Vídeo: Pago con Redsys sin salir de la tienda en WooCommerce

Aquí te dejo un vídeo en el que puedes ver la integración y el resultado, incluyendo el proceso de checkout, para que puedas comparar con el método de integración actual: