El bloque Botón de Pago te permite aceptar pagos de Stripe directamente en cualquier página de SeedProd, sin necesidad de una tienda WooCommerce ni una configuración de pago compleja. Simplemente conecta tu cuenta de Stripe, establece un importe y una descripción, y aparecerá un botón de pago totalmente funcional en tu página listo para cobrar.
Este bloque es ideal para vender productos individuales, descargas digitales, servicios, entradas para eventos o campañas de donaciones sin la carga de una tienda de comercio electrónico completa. El botón está diseñado con el mismo sistema de diseño flexible que el bloque Botón estándar de SeedProd, ofreciéndote plantillas, fondos degradados, controles de borde y soporte para iconos para que coincida perfectamente con el diseño de tu página.
Añadir el Bloque Botón de Pago a tus Páginas
Sigue estos pasos para añadir un bloque Botón de Pago a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Botón de Pago en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque Botón de Pago para abrir su configuración. La pestaña Contenido se divide en tres secciones.
Configuración de Pago:
Antes de configurar los detalles del pago, debes conectar tu cuenta de Stripe. Haz clic en Conectar con Stripe para autorizar a SeedProd a procesar pagos a través de tu cuenta. Una vez conectado, puedes rellenar los siguientes campos:
- Importe: Introduce el importe del pago a cobrar (obligatorio). Este valor se pasa a Stripe cuando se hace clic en el botón.
- Descripción del Pago: Introduce una breve descripción de lo que el cliente está pagando (obligatorio). Esto aparece en tu panel de Stripe y en el recibo del cliente.
- Moneda de Pago: Selecciona la moneda para la transacción de una lista completa de monedas mundiales (por defecto: USD).
- URL de Éxito: Introduce la URL a la que redirigir a los clientes después de un pago exitoso, como una página de agradecimiento.
Botón:
- Texto del Botón: Introduce la etiqueta principal que se muestra en el botón (por defecto: “Pagar Ahora”).
- Subtexto del Botón: Opcionalmente, añade una línea secundaria de texto más pequeño debajo de la etiqueta principal del botón.
- Alineación: Establece la alineación horizontal del botón (Izquierda, Centro o Derecha) con control por dispositivo para escritorio, tableta y móvil.
- Tamaño: Elige el tamaño del botón entre Diminuto, Pequeño, Mediano, Grande, Muy Grande o Extra Grande.
Iconos:
- Icono antes del texto: Selecciona un icono para mostrar a la izquierda del texto del botón usando el selector de iconos.
- Icono después del texto: Selecciona un icono para mostrar a la derecha del texto del botón usando el selector de iconos.
Paso 2a: Elegir un Estilo de Plantilla
En la pestaña Plantillas, puedes aplicar un estilo predefinido a tu Botón de Pago con un solo clic. Las plantillas disponibles incluyen Botón Redondeado, Botón Plano, Botón Azul, Botón Verde Claro, Botón Verde, Botón Naranja, Botón Rojo, Botón Amarillo, Botón Blanco, Botón Gris y Botón Negro. Al aplicar una plantilla, se actualizan instantáneamente los colores, la forma y el estilo del botón para que coincidan con la opción seleccionada.
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, la sección Estilos te permite controlar detalladamente la apariencia visual del botón:
- Tipografía: Establece la familia de fuentes, el tamaño, el grosor, el estilo, la altura de línea, el espaciado entre letras y las mayúsculas/minúsculas del texto del botón.
- Estilo del Botón: Elige entre los estilos de renderizado de botón Plano, 2D, Vintage o Fantasma.
- Color de Fondo: Establece el color de fondo del botón tanto para el estado normal como para el de pasar el ratón por encima.
- Color del Texto del Botón: Establece el color de la etiqueta del botón tanto para el estado normal como para el de pasar el ratón por encima.
- Estilo de Fondo del Botón: Cambia entre fondos Sólidos y Degradados. El modo Degradado expone el tipo (Radial/Lineal), el ángulo, la posición, los primeros y segundos colores, y sus puntos de localización.
- Relleno Vertical: Controla el espaciado interior superior e inferior del botón.
- Relleno Horizontal: Controla el espaciado interior izquierdo y derecho del botón.
- Radio del Borde: Redondea las esquinas del botón ajustando el valor del radio del borde.
- Ancho del Borde del Botón: Establece el grosor del borde alrededor del botón.
- Color del Borde del Botón: Elige el color del borde del botón.
- Sombra del Texto: Añade una sombra al texto de la etiqueta del botón utilizando opciones de tamaño predefinidas (Ninguna, Capilar, Pequeña, Mediana, Grande, Muy Grande, Extra Grande).
- Sombra: Añade una sombra al cuadro del botón utilizando las mismas opciones de tamaño predefinidas.
La pestaña Avanzado también proporciona controles para el espaciado (margen y relleno), atributos CSS personalizados, visibilidad por dispositivo y animaciones de entrada.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Botón de Pago y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Botón de Pago a tu página! Con tu cuenta de Stripe conectada y los detalles de pago configurados, tu página ahora puede aceptar transacciones reales sin necesidad de un carrito de compras o una configuración completa de comercio electrónico. Experimenta con plantillas, estilos de botón y combinaciones de iconos para crear un botón de pago que encaje de forma natural en el diseño de tu página y anime a los visitantes a completar su compra.