How to Choose a Payment Method Display Type

Overview

WP Simple Pay lets you choose how payment methods are displayed on your on-site payment forms. You can show them as horizontal Tabs (the default) or as a stacked Accordion. This setting controls the layout of the Stripe Payment Element on the frontend.

Prerequisites

• WP Simple Pay Pro
• A payment form using the on-site form type (Embedded or Overlay)
• At least one payment method enabled for the form

Configuring the Display Type

1. Navigate to WP Simple Pay > Payment Forms and edit your form.
2. Click the Form Fields tab.
3. Expand the Payment Method field (labeled “Card” in older forms).
4. Under Display Type, select either Tabs or Accordion.
5. Click Publish or Update to save.

Tabs Layout

Tabs is the default display type. Payment methods appear as horizontal tabs at the top of the payment area. Customers click a tab to switch between methods.

Best for:

• Forms with a small number of payment methods (2-5)
• Clean, compact layouts where horizontal space is available

Accordion Layout

The Accordion layout displays payment methods as vertically stacked, collapsible items. Customers click an item to expand it and reveal its fields.

Best for:

• Forms with many payment methods (5+)
• Mobile-friendly layouts where vertical stacking works better
• Situations where you want payment method names and icons clearly visible

Accordion Settings

When you select Accordion, an additional Accordion Settings section appears:

• Visible Items — The number of payment methods to show before a “More” button appears. Default: 5. Set to 0 to show all methods without a “More” button.

This is useful when your form has many payment methods and you want to keep the initial view compact while still offering all options.

Start Collapsed

By default, the first accordion item is expanded when the form loads. You can change this behavior using the simpay_payment_form_accordion_default_collapsed filter to have all items start collapsed:

add_filter( 'simpay_payment_form_accordion_default_collapsed', '__return_true' );

This can also be limited to a specific form by checking the form object passed as the second argument.

Choosing the Right Layout

Consideration	Tabs	Accordion
Number of methods	2-5	5+
Horizontal space	Plenty	Limited
Mobile experience	Good	Better
Method visibility	Icons visible at glance	Names + icons visible
Vertical space	Compact	Taller

Frequently Asked Questions

Does the display type affect which payment methods are available?

No. The display type only changes how the methods are visually arranged. All enabled payment methods remain available regardless of layout choice.

Does this work with Stripe Checkout (off-site) forms?

No. The display type setting only applies to on-site forms that use the Stripe Payment Element. Off-site forms redirect to Stripe’s hosted checkout page, which has its own layout.

Can I use different display types for different forms?

Yes. The display type is configured per form on the Payment Method field, so each form can have its own layout.

What happens on mobile devices?

Both layouts are responsive. Stripe’s Payment Element automatically adjusts for smaller screens. The Accordion layout tends to work particularly well on mobile since it stacks vertically.

What’s Next?

• Styling Payment Forms with Form Style – Customize colors, typography, and layout
• Form Style Settings Reference – Complete reference of all style settings