> ## Documentation Index
> Fetch the complete documentation index at: https://docs.overflow.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Payment methods section

> Configure the method list, default selection, and per-method options inside Checkout.

The Payment methods section is required. Pass `paymentMethods` as a list of method names in the render order you want.

## Enable methods

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['card', 'bank', 'applePay', 'googlePay'],
});
```

Supported names:

* `'card'`
* `'bank'`
* `'applePay'`
* `'googlePay'`

## Render order

The array order controls render order. Methods that fail a runtime check (a wallet on `http://`, a wallet unavailable on the device, a misconfigured merchant) are hidden without shifting siblings.

## Default selection

The first available method is selected on mount unless you set `defaultPaymentMethod`:

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['applePay', 'card', 'bank'],
  defaultPaymentMethod: 'card',
});
```

If the default is not available at runtime, the first available method wins.

## Per-method options

Configure a method using its top-level key on the Checkout options. The options match the standalone element's options.

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['card', 'bank', 'applePay', 'googlePay'],
  card: {
    fields: {
      holderName: { hidden: false },
      postalCode: { hidden: true },
    },
  },
  bank: {
    mode: { default: 'manual' },
  },
  applePay: {
    buttonType: 'plain',
    buttonStyle: 'black',
  },
  googlePay: {
    buttonType: 'buy',
    buttonColor: 'default',
  },
});
```

See:

* [Card](/payment-elements/elements/payment-methods/card/introduction)
* [Bank](/payment-elements/elements/payment-methods/bank/introduction)
* [Apple Pay](/payment-elements/elements/payment-methods/wallets/apple-pay)
* [Google Pay](/payment-elements/elements/payment-methods/wallets/google-pay)

## Submitted value

`onSubmit` carries the tokenized payload under the matching key:

```javascript theme={null}
checkout.on('onSubmit', ({ value }) => {
  switch (value.method) {
    case 'card':      /* value.card */    break;
    case 'bank':      /* value.bank */    break;
    case 'applePay':  /* value.applePay */ break;
    case 'googlePay': /* value.googlePay */ break;
  }
});
```

Forward `value` to your server. See the [authorize a payment API reference](/api-reference/payments/authorize-payment) for the authorize request shape.

## See also

* [Payment methods overview](/payment-elements/elements/payment-methods/overview)
* [Sections overview](/payment-elements/elements/checkout/sections/overview)