Cómo elegir un tipo de visualización de método de pago

Resumen

WP Simple Pay te permite elegir cómo se muestran los métodos de pago en tus formularios de pago en el sitio. Puedes mostrarlos como Pestañas horizontales (la opción predeterminada) o como un Acordeón apilado. Esta configuración controla el diseño del Elemento de Pago de Stripe en el frontend.

Prerrequisitos

• WP Simple Pay Pro
• Un formulario de pago que utiliza el tipo de formulario en el sitio (Incrustado o Superpuesto)
• Al menos un método de pago habilitado para el formulario

Configuración del tipo de visualización

1. Ve a WP Simple Pay > Formularios de pago y edita tu formulario.
2. Haz clic en la pestaña Campos del formulario.
3. Expande el campo Método de pago (etiquetado como "Tarjeta" en formularios antiguos).
4. En Tipo de visualización, selecciona Pestañas o Acordeón.
5. Haz clic en Publicar o Actualizar para guardar.

Diseño de pestañas

Las pestañas son el tipo de visualización predeterminado. Los métodos de pago aparecen como pestañas horizontales en la parte superior del área de pago. Los clientes hacen clic en una pestaña para cambiar entre métodos.

Ideal para:

• Formularios con un número reducido de métodos de pago (2-5)
• Diseños limpios y compactos donde hay espacio horizontal disponible

Diseño de acordeón

El diseño de acordeón muestra los métodos de pago como elementos apilados verticalmente y colapsables. Los clientes hacen clic en un elemento para expandirlo y ver sus campos.

Ideal para:

• Formularios con muchos métodos de pago (5+)
• Diseños optimizados para móviles donde la disposición vertical funciona mejor
• Situaciones en las que deseas que los nombres e iconos de los métodos de pago sean claramente visibles

Configuración del acordeón

Cuando seleccionas Acordeón, aparece una sección adicional de Configuración del acordeón:

• Elementos visibles: el número de métodos de pago que se mostrarán antes de que aparezca un botón "Más". Predeterminado: 5. Establécelo en 0 para mostrar todos los métodos sin un botón "Más".

Esto es útil cuando tu formulario tiene muchos métodos de pago y deseas mantener la vista inicial compacta, pero aún así ofrecer todas las opciones.

Comenzar contraído

Por defecto, el primer elemento del acordeón se expande cuando se carga el formulario. Puedes cambiar este comportamiento usando el filtro simpay_payment_form_accordion_default_collapsed para que todos los elementos comiencen contraídos:

add_filter( 'simpay_payment_form_accordion_default_collapsed', '__return_true' );

Esto también se puede limitar a un formulario específico comprobando el objeto del formulario que se pasa como segundo argumento.

Elegir el diseño correcto

Consideración	Pestañas	Acordeón
Número de métodos	2-5	5+
Espacio horizontal	Abundante	Limitado
Experiencia móvil	Bueno	Mejor
Visibilidad del método	Iconos visibles de un vistazo	Nombres + iconos visibles
Espacio vertical	Compacto	Más alto

Preguntas frecuentes

¿El tipo de visualización afecta a los métodos de pago disponibles?

No. El tipo de visualización solo cambia la forma en que se organizan visualmente los métodos. Todos los métodos de pago habilitados siguen estando disponibles independientemente de la elección del diseño.

¿Funciona esto con formularios de Stripe Checkout (fuera del sitio)?

No. La configuración del tipo de visualización solo se aplica a los formularios en el sitio que utilizan el Elemento de Pago de Stripe. Los formularios fuera del sitio redirigen a la página de pago alojada de Stripe, que tiene su propio diseño.

¿Puedo usar diferentes tipos de visualización para diferentes formularios?

Sí. El tipo de visualización se configura por formulario en el campo Método de pago, por lo que cada formulario puede tener su propio diseño.

¿Qué sucede en los dispositivos móviles?

Ambas disposiciones son adaptables. El Elemento de Pago de Stripe se ajusta automáticamente para pantallas más pequeñas. La disposición de Acordeón tiende a funcionar especialmente bien en móviles, ya que se apila verticalmente.

¿Qué Sigue?

• Estilo de formularios de pago con Estilo de formulario – Personaliza colores, tipografía y disposición
• Referencia de configuración de Estilo de formulario – Referencia completa de todas las configuraciones de estilo