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 de una configuración compleja del proceso de pago. Solo tienes que conectar tu cuenta de Stripe, establecer un importe y una descripción, y aparecerá en tu página un botón de pago totalmente funcional, listo para cobrar.
Este bloque es ideal para vender productos individuales, descargas digitales, servicios, entradas para eventos o campañas de donación sin los gastos generales de una tienda de comercio electrónico completa. El botón tiene el mismo diseño flexible que el bloque de botones estándar de SeedProd, lo que te ofrece plantillas, fondos degradados, controles de bordes y compatibilidad con iconos para que se adapte perfectamente al diseño de tu página.
Añadir el bloque del botón de pago a tus páginas
Sigue estos pasos para añadir un bloque de botón de pago a tu página 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 del pago:
Antes de configurar los datos de pago, debes conectar tu cuenta de Stripe. Haz clic en «Conectar con Stripe» para autorizar a SeedProd a procesar los pagos a través de tu cuenta. Una vez conectada, puedes rellenar los siguientes campos:
- Importe: Introduzca el importe del pago que se va a cobrar (obligatorio). Este valor se envía a Stripe cuando se hace clic en el botón.
- Descripción del pago: Introduzca una breve descripción de lo que el cliente está pagando (obligatorio). Esto aparecerá en su panel de control de Stripe y en el recibo del cliente.
- Moneda de pago: Seleccione la moneda para la transacción de una lista completa de monedas mundiales (por defecto: USD).
- URL de éxito: Introduzca la URL a la que redirigir a los clientes tras un pago correcto, como una página de agradecimiento.
Botón:
- Texto del botón: Introduzca la etiqueta principal que se muestra en el botón (por defecto: «Pagar ahora»).
- Subtexto del botón: Opcionalmente, añada 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 computadoras de escritorio, tabletas y dispositivos móviles.
- Tamaño: Elige el tamaño del botón entre Pequeño, Mediano, Grande, Extragrande o 2X Grande.
Iconos:
- Icono antes del texto: Seleccione un icono para mostrar a la izquierda del texto del botón utilizando el selector de iconos.
- Icono después del texto: Seleccione un icono para mostrar a la derecha del texto del botón utilizando el selector de iconos.
Paso 2a: Elija un estilo de plantilla
En la pestaña Plantillas, puede aplicar un estilo predefinido a su botón de pago con un solo clic. Las plantillas disponibles incluyen botón redondo, 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 al instante los colores, la forma y el estilo del botón para que coincidan con el ajuste preestablecido elegido.
Paso 3: Personalizar el diseño
En la pestaña Avanzado, la sección Estilos te permite controlar con precisión el aspecto visual del botón:
- Tipografía: Establezca la familia de fuentes, el tamaño, el grosor, el estilo, la altura de línea, el espaciado entre letras y el uso de mayúsculas y minúsculas para el texto del botón.
- Estilo de botón: Elige entre los estilos de representación de botones Plano, 2D, Vintage o Fantasma.
- Color de fondo: Establece el color de fondo del botón tanto para el estado normal como para el estado de desplazamiento.
- Color del texto del botón: Establece el color de la etiqueta del botón tanto para el estado normal como para el estado de desplazamiento.
- Estilo de fondo del botón: Cambia entre fondos sólidos y degradados. El modo degradado muestra el tipo (radial/lineal), el ángulo, la posición, el primer y segundo color, y sus paradas de ubicación.
- Relleno vertical: controla el espacio interior superior e inferior del botón.
- Relleno horizontal: controla el espacio 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 de texto: Añade una sombra de texto a la etiqueta del botón utilizando las opciones de tamaño preestablecidas (Ninguna, Muy fina, Pequeña, Mediana, Grande, Extragrande, 2X Extragrande).
- Sombra: Añade una sombra a la caja del botón utilizando las mismas opciones de tamaño preestablecidas.
La pestaña Avanzado también ofrece controles para el espaciado (márgenes y relleno), atributos CSS personalizados, visibilidad del dispositivo y animaciones de entrada.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Botón de pago y de personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente 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 ya puede aceptar transacciones reales sin necesidad de un carrito de la compra ni una configuración completa de comercio electrónico. Experimenta con plantillas, estilos de botones 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.