Pagar con RedSys sin salir de la tienda

Es muy frecuente que nos preguntéis si es posible integrar un formulario para recoger los datos de las tarjetas de crédito de tus clientes en tu tienda WooCommerce, al estilo Stripe, pero con RedSys. Directamente en finalizar compra, para que así la persona pague sin tener que salir de la tienda.

Este método tiene algunos inconvenientes:

• Es inseguro porque si tu web está comprometida alguien podría leer esos datos de las tarjetas
• Es complicado integrar un doble factor de autenticación, es decir, permitir insertar un SMS, un código generado por una aplicación móvil, o por una tarjeta de coordenadas; como obliga la normativa PSD2 europea
• RedSys directamente no lo permite como tal a no ser que cumplas unas normativas de seguridad realmente exigentes, que no es lo normal en tiendas online

RedSys está planteando una alternativa para hacer algo realmente parecido, lo que llaman el pago in-site aunque con bastantes diferencias tecnológicas ya que la tarjeta no se introduce en un formulario de tu checkout, sino en un iframe que se integra para asegurar que vía JavaScript si tu sitio está comprometido no va a verse afectado.

Todavía no hemos trabajado con esta alternativa porque por ahora no nos resultaba la integración demasiado correcta y tenía algunos problemas en su funcionamiento. Así que mientras tanto hemos preparado una alternativa.

Una alternativa que no saca al cliente de la tienda al pagar con RedSys y que se integra en cualquier web sin problema porque lo que hace es sobre el checkout, crear una ventana flotante donde el cliente paga siempre «viendo de fondo» tu web, cuando termina el proceso, la ventana flotante desaparece.

PayPal tiene o ha tenido algo parecido y es que esta solución combina seguridad y compatibilidad; sin dejar de lado el motivo por los que muchos no se sentían cómodos con la redirección, porque se perdía tasa de conversión de ventas, ya que el cliente, no sale al banco a pagar como tal.

Pagar con RedSys en un iframe en tu página de finalzar compra

El proceso estándar de redirección sería este:

1. El usuario le da a pagar en el checkout, se le redirige al banco
2. Introduce los datos de su tarjeta
3. Introduce si es necesario el segundo factor de autenticación
4. Si todo ha ido bien vuelve al banco

Con la alternativa que hemos planteado lo que ocurre es:

1. El usuario le da a pagar en el checkout, aparece una ventana flotante con el mismo proceso veía cuando iba al banco, pero sin salir de la tienda, sin redirigirse el navegador al banco
2. Introduce los datos de su tarjeta
3. Introduce si es necesario el segundo factor de autenticación
4. Si todo ha ido bien desaparece la ventana flotante y se queda en la página de «Gracias por tu pedido»

En la imagen superior de esta entrada tenéis un ejemplo de cómo aparece. Se utiliza una librería de diálogos modales para que el resultado estético sea excelente (adaptando la vista móvil si es necesario) y a través de JavaScript observamos cuándo la URL en el iframe cambia para hacer desaparecer la ventana flotante y dirigirte a la página de gracias de la forma más natural posible.

Cómo activar el pago sin salir de la tienda en RedSys

Pues muy sencillo, en los ajustes de la pasarela, que los tenéis en escritorio de WordPress, dentro de la sección WooCommerce, en ajustes. Nos dirigimos a la pestaña de pagos y veis:

• Opción: Modo de comunicación
• Elegís la opción «No dejar la tienda y mostrar el proceso de pago en una ventana flotante»

Tan sencillo como eso.

Nota: Hay una valoración incrustada en esta entrada, por favor, visita esta entrada para valorarla.

Almacenamos las IPs desde la que se envían las valoraciones para evitar fraudes