Hasta ahora, si querías cobrar con Ceca 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 Ceca for Elementor haces la integración directa: conectas tu TPV virtual de Ceca 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 contratado un TPV virtual de Ceca (Cecabank) con tu banco y que te hayan facilitado tus datos de comercio.
1. Configura tus credenciales de Ceca 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 «Ceca». Ahí encontrarás cinco campos:
- MerchantID, AcquirerBIN y Terminal ID, los identificadores de tu comercio y terminal.
- Clave de firma (real) y Clave de firma (pruebas), un perfil independiente para cada entorno: el MerchantID, AcquirerBIN y Terminal ID se mantienen iguales, y solo cambia la clave según estés cobrando de verdad o probando.
Justo debajo, en ese mismo bloque, tienes un campo de solo lectura con la URL de notificación online del plugin. Cópiala y dala de alta en el panel de Ceca de tu banco como «URL Online OK»: es la dirección a la que Ceca avisa en segundo plano de cada pago, y sin registrarla ahí el plugin nunca sabrá si un pago se ha completado, por mucho que las credenciales estén bien puestas.
Debajo hay una segunda sección, «Bizum», con los mismos cinco campos pero para el pago con Bizum. Son credenciales independientes de las de tarjeta: algunos bancos te dan el mismo MerchantID, AcquirerBIN 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 Ceca de arriba» que copia los cinco valores de la sección de Ceca a la de Bizum, para no tener que teclearlos dos veces (puedes editarlos después si alguno cambia).
Al tener la clave de firma separada para real y para pruebas, tanto en tarjeta como en Bizum, puedes dejar solo la de pruebas configurada mientras validas que todo funciona correctamente, y añadir la real 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 «Ceca 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 divisas disponibles).
- Una descripción del pago, que es lo que verá tu cliente en la pantalla de Ceca.
- 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 Ceca 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 Ceca.
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 la clave de firma 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 Ceca, 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, Ceca avisa automáticamente a tu sitio mediante la notificación online que registraste en el paso 1, y el plugin valida esa notificación comprobando la firma SHA-256 para asegurarse de que viene realmente de Ceca 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: cfe_payment_completed cuando el pago se confirma correctamente, y cfe_payment_failed si la firma no es válida. 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 Ceca de arriba» en la sección Bizum para copiarlos automáticamente y no teclearlos dos veces.
¿Por qué no me llegan los pagos como completados aunque las credenciales están bien? Revisa que hayas dado de alta la URL de notificación online (la que aparece de solo lectura en la sección Ceca) en el panel de tu banco como «URL Online OK». Sin ese registro previo, Ceca nunca avisa al plugin de que el pago se ha realizado, y la transacción se queda como pendiente aunque el cliente haya pagado.
¿Cómo consigo un TPV virtual para que mis clientes paguen con tarjeta o Bizum? Tienes que hablarlo directamente con tu banco y pedir un TPV virtual de Ceca, indicando que quieres tener Bizum activado. Una vez contratado te enviarán los datos necesarios (MerchantID, AcquirerBIN, Terminal ID 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.