Hasta ahora, si querías cobrar con RedSys en un sitio hecho con Elementor no tenías una forma directa de hacerlo: o bien montabas una tienda completa con WooCommerce solo para poder cobrar un único importe (una cuota, una donación, una reserva…), o tirabas de un plugin de formularios de terceros que a su vez necesitaba otro plugin o pasarela intermedia para conectar con el banco. Con RedSys for Elementor haces la integración directa: conectas tu pasarela RedSys al propio Elementor, sin plugins de formularios adicionales y sin necesidad de WooCommerce, y puedes ofrecer a tus clientes tanto el pago con tarjeta como con Bizum.
El plugin te da dos formas de cobrar, que puedes usar por separado o combinadas en el mismo sitio:
- Un botón de pago que puedes colocar en cualquier página, para cobrar un importe fijo (por ejemplo, una cuota) o un importe que varía según lo que rellene el usuario.
- Una acción de formulario para los formularios de Elementor Pro: conviertes cualquier formulario ya existente (contacto, reserva, inscripción…) en un formulario de pago, sin tener que rehacer nada.
Requisitos
Necesitas tener Elementor activo en tu sitio. La acción de formulario necesita además Elementor Pro, porque los formularios son una función de la versión Pro; el botón de pago, en cambio, funciona ya con la versión gratuita de Elementor. Y por supuesto, necesitas tener contratada una pasarela de pago con tu banco (RedSys, Sermepa o Servired son distintos nombres del mismo sistema) y que te hayan facilitado tus datos de comercio.
1. Configura tus credenciales de RedSys y de Bizum
Lo primero es introducir los datos que te ha facilitado tu banco. Ve a Elementor → Ajustes → Integraciones y busca la sección «RedSys». Ahí encontrarás seis campos, organizados en dos perfiles independientes:
- FUC (código de comercio), Terminal y Clave de firma para tu entorno real, el que se usa cuando ya estás cobrando de verdad.
- FUC de pruebas, Terminal de pruebas y Clave de firma (pruebas), para el entorno de pruebas de tu banco.
Justo debajo hay una segunda sección, «Bizum», con los mismos seis campos pero para el pago con Bizum. Son credenciales independientes de las de tarjeta: algunos bancos te dan el mismo FUC y terminal para tarjeta y Bizum, y otros te dan un terminal distinto específico para Bizum, así que introduce ahí exactamente lo que te haya facilitado tu banco para Bizum. Si sabes que es el mismo terminal que el de tarjeta, tienes un botón «Rellenar con los datos de RedSys de arriba» que copia los seis valores de la sección de RedSys a la de Bizum, para no tener que teclearlos dos veces (puedes editarlos después si alguno cambia).
Al tener los perfiles de real y de pruebas separados, tanto en tarjeta como en Bizum, puedes dejar solo los de pruebas configurados mientras validas que todo funciona correctamente, y añadir los reales cuando estés listo para cobrar de verdad, sin tener que tocar nada más en tus páginas o formularios.
2. Añade el botón de pago en una página
Edita cualquier página con Elementor y arrastra el widget «RedSys Payment Button» (aparece en la categoría general de widgets). En su panel de opciones puedes configurar:
- El texto del botón (admite contenido dinámico, por si quieres usar un shortcode o un campo personalizado).
- El importe a cobrar y la moneda (por defecto euros, pero hay más de una decena de divisas disponibles).
- Una descripción del pago, que es lo que verá tu cliente en la pantalla de RedSys.
- Las URLs de redirección tras pago correcto y tras pago fallido (si las dejas vacías, vuelve a la propia página).
- El modo pruebas, con un simple interruptor: actívalo mientras estás probando y desactívalo cuando quieras empezar a cobrar de verdad.
- El método de pago: tarjeta o Bizum.
Además, como es un widget normal de Elementor, tienes una pestaña de estilo aparte para ajustar tipografía, colores, bordes y espaciado del botón, igual que con cualquier otro elemento de Elementor.
3. O conviértelo en un formulario de pago con Elementor Pro
Si usas Elementor Pro, puedes hacer que cualquier formulario ya existente termine en un pago. Edita el formulario, entra en Acciones tras enviar y marca la casilla RedSys junto a las demás acciones (como enviar un email o guardar en la base de datos). Al marcarla aparece una nueva pestaña de configuración con las mismas opciones que en el botón: importe, moneda, descripción, URLs de redirección, modo pruebas y método de pago (tarjeta o Bizum). El importe y la descripción admiten variables del propio formulario, así que puedes, por ejemplo, poner como descripción «Pedido de [field id=»nombre»]» y que se rellene automáticamente con lo que escriba el cliente.
Cuando el formulario se envía, todas las demás acciones configuradas (enviar el email de aviso, guardar la entrada, etc.) se ejecutan primero, y justo después el cliente es redirigido a pagar con RedSys.
Tarjeta o Bizum: tú decides
Tanto en el botón como en la acción de formulario hay un desplegable de método de pago con dos opciones: Tarjeta (el comportamiento de siempre) o Bizum. Como cada método usa sus propias credenciales (ver el paso 1), puedes combinarlos libremente: por ejemplo, un botón de «Hazte socio» solo con tarjeta y un formulario de «Donación rápida» con Bizum, cada uno con el método que más te interese. Eso sí: para que Bizum funcione, tu banco tiene que tenerlo activado y haberte dado los datos de ese terminal; si no lo tienes contratado, pídeselo a tu entidad antes de activar la opción.
Modo pruebas: prueba sin miedo antes de cobrar de verdad
Cada botón y cada formulario tiene su propio interruptor de modo pruebas. Con él activado, el plugin usa el perfil de credenciales de pruebas correspondiente al método de pago elegido (el de tarjeta o el de Bizum, según toque) y te redirige al entorno de pruebas de RedSys, donde puedes simular pagos sin mover dinero real. Es la forma de comprobar que todo el circuito —importe, descripción, redirecciones— funciona como esperas antes de activar el cobro real desactivando ese interruptor.
Qué pasa cuando el cliente paga
Cuando alguien completa un pago (o le falla), RedSys avisa automáticamente a tu sitio mediante una notificación en segundo plano, que el plugin valida comprobando la firma HMAC-SHA256 para asegurarse de que viene realmente de RedSys y no ha sido manipulada. Con esa notificación, el plugin actualiza el estado del pago en su propia tabla de la base de datos (pendiente, pagado o fallido) y dispara dos hooks para que puedas enganchar tu propia lógica: rfe_payment_completed cuando el pago se confirma correctamente, y rfe_payment_failed si algo ha ido mal. Son el punto perfecto para, por ejemplo, enviar un email personalizado, dar de alta a un usuario o desbloquear contenido, sin tener que tocar el resto del plugin.
Compatible con caché de página completa
Si tu sitio usa un plugin de caché de página completa (WP Rocket, LiteSpeed Cache, etc.), no hay ningún problema: el importe y la firma de cada pago se calculan en el momento en que el cliente hace clic en el botón o envía el formulario, no cuando se genera y cachea la página. Así que puedes cachear tus páginas de pago con total tranquilidad.
Preguntas frecuentes
¿Necesito WooCommerce? No. Este plugin es completamente independiente de WooCommerce: usa su propia tabla para el registro de los pagos, en vez del sistema de pedidos de WooCommerce.
¿Funciona con la versión gratuita de Elementor? El botón de pago sí. La acción de formulario necesita Elementor Pro, porque los formularios son una función exclusiva de la versión Pro.
¿Necesito credenciales distintas para tarjeta y para Bizum? El plugin tiene campos separados para cada uno por si tu banco te los da distintos, pero si tu banco te ha activado Bizum en el mismo terminal que la tarjeta, puedes usar el botón «Rellenar con los datos de RedSys de arriba» en la sección Bizum para copiarlos automáticamente y no teclearlos dos veces.
¿Cómo consigo una pasarela de pago para que mis clientes paguen con tarjeta o Bizum? Tienes que hablarlo directamente con tu banco y pedir una pasarela del tipo RedSys, Sermepa o Servired, indicando que quieres tener Bizum activado. Una vez contratada te enviarán los datos necesarios (FUC, terminal y clave de firma) de tarjeta y, si corresponde, los de Bizum, que introducirás en Elementor → Ajustes → Integraciones tal y como se explica en el paso 1.
Valoraciones
No hay valoraciones aún.