Card

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 for the recommended integration path, or mount standalone when you need a compact card-only form.

Standalone example

<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 for every knob.

Submitted value

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

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

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.

Get started

Elements

Options

Events

Theming

Guides

Standalone example

Fields

Submitted value

Inside Checkout

Next steps

Best practices

Reference

​Standalone example

​Fields

​Submitted value

​Inside Checkout

​Next steps

Best practices

Reference

Standalone example

Fields

Submitted value

Inside Checkout

Next steps