# Payment Selector

> PaymentMethodSelector modes, simple gateway data, and checkout form integration.

# 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

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

## Component

| Component key | Role |
| --- | --- |
| `OmeWooPaymentMethodSelector` | Renders payment method choices with UIChoice and checkout form radio inputs. |

## Props

| Prop | Meaning |
| --- | --- |
| `ui.mode` | `radio`, `button-radio`, or `select`. |
| `ui.aria_label` | Accessible selector label. |
| `ui.default_label` | Select trigger text before selection. |
| `content.show_description` | Shows 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:

| Field | Meaning |
| --- | --- |
| `id` | Woo payment gateway ID. |
| `label` | Cleaned gateway title. |
| `description` | Cleaned gateway description. |
| `selected` | Whether 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.

## Related Guides

- [Checkout Page](/woo/flows/checkout-page)
- [Checkout Shell](/woo/component-families/checkout-shell)
- [Shared Controls and Props](/woo/shared-controls-and-props)