Contact elements

Contact elements are single-purpose inputs for shopper contact details. Each one is a real OverflowElement with the standard lifecycle: mount, subscribe to events, submit or .destroy(). Use them standalone alongside a payment method, or configure them under contact inside Checkout.

Elements

Element	Factory	Emits
Email	`overflow.email()`	`string \| null`
Full name	`overflow.fullName()`	`{ firstName, lastName } \| null`
Phone	`overflow.phone()`	`string \| null`
Company name	`overflow.companyName()`	`string \| null`

Standalone example

const email = overflow.email();
const name = overflow.fullName({ splitMode: 'horizontal' });

email.on('onChange', ({ complete, value }) => console.log(complete, value));
email.mount('#email');
name.mount('#name');

Inside Checkout

overflow.checkout({
  paymentMethods: ['card'],
  contact: {
    email: {},
    fullName: {},
    phone: { defaultCountry: 'US' },
    companyName: {},
  },
});

Contact is opt-in: omit contact (or pass {}) to render Checkout with no contact fields.

Element pages

Email

Single-input email address.

Full name

Combined or split first/last name.

Phone

International phone with country selector.

Company name

Organization or business name.

Contact reference for the shared options and value shapes.

Last modified on July 17, 2026

Address reference Email

⌘I

Get started

Elements

Options

Events

Theming

Guides

Elements

Standalone example

Inside Checkout

Element pages

Email

Full name

Phone

Company name

​Elements

​Standalone example

​Inside Checkout

​Element pages

Email

Full name

Phone

Company name

Elements

Standalone example

Inside Checkout

Element pages