Cómo Usar el Bloque de Formularios de Pago

Tiempo de lectura: 4 minutos | Dificultad: Principiante

Resumen

El bloque WP Simple Pay – Formulario de pago es la forma recomendada de insertar un formulario de pago en una publicación o página de Gutenberg. Proporciona una vista previa en vivo del formulario dentro del editor, expone las opciones de visualización en la barra lateral del bloque y se renderiza igual que el formulario en la página que vería un cliente, sin que necesites copiar un shortcode.

El bloque es funcionalmente equivalente al shortcode , pero es más fácil de descubrir y proporciona vistas previas en el editor que reflejan la configuración actual de Estilo del formulario.

Prerrequisitos

• WP Simple Pay (cualquier nivel; el bloque se incluye con el plugin gratuito)
• Un sitio de WordPress que ejecute el editor de bloques (Gutenberg)
• Al menos un formulario de pago publicado

Paso 1: Insertar el bloque

1. Edita la publicación o página donde quieras que aparezca el formulario.
2. Haz clic en el insertador de bloques +.
3. Busca WP Simple Pay o Formulario de pago.
4. Haz clic en el bloque WP Simple Pay – Formulario de pago.

Aparece un marcador de posición que te pide que selecciones un formulario.

Paso 2: Elegir un formulario

Usa el menú desplegable en el marcador de posición del bloque para elegir qué formulario de pago publicado se renderizará. Una vez seleccionado, el bloque reemplaza el marcador de posición con una vista previa en vivo del formulario, incluyendo título, descripción, campos y el botón de enviar, estilizado con la configuración actual de Estilo del formulario.

Si cambias el Estilo del formulario después de insertar el bloque, la vista previa se actualiza la próxima vez que recargues el editor.

Paso 3: Configurar opciones de visualización

Con el bloque seleccionado, la barra lateral de configuración del bloque a la derecha expone dos interruptores:

• Mostrar título: Cuando está habilitado (por defecto), muestra el título del formulario encima de los campos. Deshabilítalo para ocultar el título, útil cuando la página circundante ya tiene un encabezado.
• Mostrar descripción: Cuando está habilitado (por defecto), muestra el texto de la descripción del formulario encima de los campos. Deshabilítalo para diseños compactos.

Si deshabilitas ambos, el contenedor del título/descripción se suprime por completo para que no quede espacio en blanco sobrante.

El bloque también admite la Alineación Centrada a través de la barra de herramientas estándar del bloque. Cuando está centrado, el formulario, el encabezado incrustado y el botón de enviar se centran horizontalmente dentro del ancho del contenido de la página y el área del encabezado se limita a un ancho máximo de 400px.

Paso 4: Publicar y previsualizar

Guarda o publica la página. Velo en el frontend para ver el formulario en su estado renderizado. El bloque utiliza la misma canalización de renderizado que el shortcode, por lo que el comportamiento en el frontend es idéntico.

Bloque vs Shortcode

	Bloque	Shortcode
Vista previa del editor	En vivo, con estilo	Ninguno — solo marcador de posición
Alternar visualización	Casillas de verificación de UI	Editar manualmente los atributos del shortcode
Alineación	Barra de herramientas del bloque	Envolver en HTML/CSS
Funciona en el editor clásico	No	Sí
Funciona en widgets	Sí (widgets de bloque)	Sí
Funciona en constructores de páginas	Depende del constructor	Sí (universal)

Cuándo usar el bloque: Publicaciones y páginas modernas de Gutenberg, plantillas FSE, widgets basados en bloques.

Cuándo usar el shortcode: Editor clásico, constructores de páginas sin soporte de bloques de primera mano, plantillas de temas personalizadas donde llamas a do_shortcode() directamente.

Preguntas frecuentes

La vista previa del formulario se muestra pero los clientes no pueden pagar, ¿por qué?

El bloque renderiza el mismo formulario para la vista previa del editor que para los visitantes. Si la vista previa muestra el formulario pero los envíos fallan, el problema está en la configuración del formulario en sí (método de pago faltante, claves de Stripe inválidas, campo obligatorio faltante) en lugar de en el bloque. Consulta WP Simple Pay > Formularios de pago y las pestañas General/Pago del formulario.

¿Puedo usar varios bloques de Formulario de pago en la misma página?

Sí, cada bloque puede renderizar un formulario diferente. Los activos del frontend del plugin son lo suficientemente inteligentes como para manejar múltiples formularios en la misma página sin conflictos.

¿Por qué la vista previa del editor no coincide con lo que veo en el frontend?

La vista previa del editor refleja el estado guardado del formulario en el momento en que se cargó el editor. Si has realizado cambios en el formulario en otra pestaña, guarda/actualiza el editor para verlos. El frontend siempre renderiza la última versión guardada.

¿El bloque funciona en plantillas de Edición Completa del Sitio (FSE)?

Sí. El bloque se puede insertar en cualquier contexto compatible con bloques, incluidas las plantillas FSE, las partes de plantilla y los bloques/patrones reutilizables.

¿Puedo estilizar el formulario incrustado de forma independiente por página?

El estilo del formulario es por formulario, no por bloque. Para usar diferentes estilos en diferentes páginas, cree varios formularios e inserte el bloque apropiado en cada página.

¿Cuál es la diferencia entre este y el bloque de botón de WP Simple Pay?

El bloque de formulario de pago incrusta todo el formulario en línea. El bloque de botón muestra solo un botón que abre el formulario en una superposición (modal) al hacer clic, lo que resulta útil para páginas de destino donde desea una llamada a la acción limpia en lugar de un formulario visible. Consulte Cómo usar el bloque de botón de pago.

¿Qué Sigue?

• Cómo estilizar sus formularios de pago con el estilo del formulario: personalice la apariencia del formulario incrustado
• Cómo usar el bloque de administración de suscripciones: permita a los suscriptores administrar sus planes
• Cómo configurar la configuración general de un formulario de pago: configure el formulario en sí