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

# Card

> PCI-secured card input with brand detection, validation, and tokenization.

The `card` element renders a card number, expiration, security code, cardholder name, and postal code. Card number, expiration, and security code render inside a PCI-scoped secured iframe so raw PAN data never touches your page; cardholder name and postal code are native inputs the SDK renders directly.

Configure `card` inside [Checkout](/payment-elements/elements/checkout/sections/payment-methods) for the recommended integration path, or mount standalone when you need a compact card-only form.

## Standalone example

```html theme={null}
<div id="card"></div>
<button id="pay" disabled>Pay</button>

<script>
  const overflow = new Overflow('live_pub_...');

  const card = overflow.card({
    fields: {
      holderName: { label: 'Name on card' },
      postalCode: { hidden: false },
    },
  });

  card.on('onChange', ({ complete }) => {
    document.getElementById('pay').disabled = !complete;
  });

  card.on('onSubmit', ({ value }) => {
    fetch('/api/authorize', { method: 'POST', body: JSON.stringify({ method: 'card', card: value }) });
  });

  card.mount('#card');
  document.getElementById('pay').addEventListener('click', () => card.submit());
</script>
```

## Fields

* `cardNumber`: PAN input. Renders the brand icon as you type. Configurable via `fields.cardNumber` (label, placeholder, `iconStyle`).
* `cardExpiration`: month/year expiration input. Configurable via `fields.cardExpiration`.
* `cardSecurityCode`: 3- or 4-digit CVC/CID. Configurable via `fields.cardSecurityCode`.
* `holderName`: native cardholder name input. Configurable via `fields.holderName` (label, placeholder, `disabled`, `hidden`).
* `postalCode`: native billing postal code input. Configurable via `fields.postalCode`. Default visible; hide with `fields.postalCode.hidden: true`.

See the [Card reference](/payment-elements/elements/payment-methods/card/reference) for every knob.

## Submitted value

Calling `card.submit()` (or triggering it from Checkout) tokenizes the card and fires `onSubmit`:

```javascript theme={null}
card.on('onSubmit', ({ value }) => {
  // value.paymentToken:    Encrypted payload to forward server-side.
  // value.brand:            'visa' | 'mastercard' | 'amex' | 'discover' | ...
  // value.last4:            Last four digits.
  // value.expirationMonth:  Two-digit month.
  // value.expirationYear:   Four-digit year.
  // value.holderName?:      Cardholder name if the field is visible.
  // value.postalCode?:      Postal code if the field is visible.
});
```

Never send raw card data from the browser. Only the tokenized `value` is safe to forward.

## Inside Checkout

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['card', 'bank'],
  card: {
    fields: {
      postalCode: { hidden: true },
    },
  },
});
```

The nested `card` key accepts the same options the standalone element accepts (minus `elementType`). Values arrive on the Checkout envelope as `value.card`.

## Next steps

<CardGroup cols={2}>
  <Card title="Best practices" href="/payment-elements/elements/payment-methods/card/best-practices">
    Configure fields, gate your Pay button, and match your brand.
  </Card>

  <Card title="Reference" href="/payment-elements/elements/payment-methods/card/reference">
    Full options and value reference.
  </Card>
</CardGroup>