Skip to main content

Payment Selector

PaymentMethodSelector renders simple enabled Woo payment gateways and syncs the selected method into checkout form submission.

When To Use This Family

Use this selector inside checkout when the customer should choose from supported Woo payment methods.

Quick Start

Payment method selector
<OmeWooCheckoutForm>
{#slot default}
<OmeWooPaymentMethodSelector
ui='{{"mode":"select","aria_label":"Choose a payment method"}}'
content='{{"show_description":true}}'
/>
{/slot}
</OmeWooCheckoutForm>

Component

Component keyRole
OmeWooPaymentMethodSelectorRenders payment method choices with UIChoice and checkout form radio inputs.

Props

PropMeaning
ui.moderadio, button-radio, or select.
ui.aria_labelAccessible selector label.
ui.default_labelSelect trigger text before selection.
content.show_descriptionShows or removes payment method descriptions.

Payment Method Source

Payment methods come from WooSelectorDynamicSource::get_simple_payment_methods() and are also localized in OME_WOO.paymentMethods.

The source includes only enabled gateways with no custom fields. Each row has:

FieldMeaning
idWoo payment gateway ID.
labelCleaned gateway title.
descriptionCleaned gateway description.
selectedWhether Woo reports it as the current chosen method.

Checkout Form Integration

Runtime ensures the radio group belongs to the nearest checkout form. If the form has no ID, the runtime assigns one and uses form-scoped radio names.

Select mode still uses hidden radio inputs. The visible trigger/listbox is UIChoice; the submitted checkout payload reads the transport input.