> ## 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 overview

> Card, bank, and wallet elements you can mount standalone or configure inside Checkout.

Payment Elements ships four payment methods. Configure them as sections inside [Checkout](/payment-elements/elements/checkout/introduction), or mount them standalone when you need a compact single-method form.

| Method     | Factory                | Payload                                                     |
| ---------- | ---------------------- | ----------------------------------------------------------- |
| Card       | `overflow.card()`      | Tokenized card credentials with brand and last four digits. |
| Bank       | `overflow.bank()`      | Routing and account tokens for ACH bank payments.           |
| Apple Pay  | `overflow.applePay()`  | Wallet cryptogram plus shopper contact from the sheet.      |
| Google Pay | `overflow.googlePay()` | Wallet cryptogram plus shopper contact from the sheet.      |

## Choose standalone or Checkout

* **Checkout** (recommended). One mount renders every method you enable, plus contact and addresses, and returns a single tokenized envelope on submit. See [Checkout introduction](/payment-elements/elements/checkout/introduction).
* **Standalone**. Mount one payment method element per form. You handle layout, submit-button gating, and per-element event wiring yourself. See [Compose standalone elements](/payment-elements/guides/compose-standalone-elements).

Every option you pass to a standalone method is accepted verbatim under the matching Checkout section key (`card`, `bank`, `applePay`, `googlePay`).

## Selecting available methods

Pass the list of methods you want to accept:

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

Methods render in array order. Methods that fail a runtime check (a wallet on `http://`, a wallet unavailable on the shopper's device, a missing merchant configuration) are hidden without shifting siblings. `defaultPaymentMethod` overrides the initial selection.

## Submitted payload

`onSubmit` returns a payload tagged with the selected method:

```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 the payload to your server to authorize the charge. See the [authorize a payment API reference](/api-reference/payments/authorize-payment) for the authorize request shape.

## Method pages

<CardGroup cols={2}>
  <Card title="Card" href="/payment-elements/elements/payment-methods/card/introduction">
    Card element with PCI-secured input, brand detection, and validation.
  </Card>

  <Card title="Bank" href="/payment-elements/elements/payment-methods/bank/introduction">
    ACH bank element with institution search and manual entry.
  </Card>

  <Card title="Wallets" href="/payment-elements/elements/payment-methods/wallets/introduction">
    Apple Pay and Google Pay with a unified options shape.
  </Card>
</CardGroup>