Phone

The phone element renders a phone-number input with a country selector. It stores and emits phone numbers in E.164 format.

Factory

overflow.phone(options?: PhoneElementOptions): PhoneElement

Example

const phone = overflow.phone({
  defaultCountry: 'US',
  preferredCountries: ['US', 'CA', 'GB'],
});

phone.on('onChange', ({ complete, value }) => {
  console.log(complete, value);
});

phone.mount('#phone');

Options

Key	Type	Default
`defaultCountry`	ISO 3166-1 alpha-2	`'us'` (or the country configured on the Overflow instance)
`onlyCountries`	`string[]`	every supported country
`preferredCountries`	`string[]`	none
`required`	`boolean`	`false`
`disabled`, `readOnly`, `id`, `ariaLabel`, `locale`, `validate`	shared	see reference
`fields.phone`	`BaseFieldOptions`	`{ label: 'Phone' }`

onlyCountries: restrict the selector to a specific set of countries.
preferredCountries: pin these countries to the top of the selector list; the rest follow alphabetically.

Value

type PhoneValue = { e164: string; countryCode: string } | null;

e164 is the phone number in E.164 format (for example, '+14155551234'); countryCode is the ISO 3166-1 alpha-2 country the shopper picked in the selector (for example, 'US'). The value is null until the shopper enters a valid number.

`FieldError.field`

Always 'phone'.

Inside Checkout

overflow.checkout({
  paymentMethods: ['card'],
  contact: {
    phone: { defaultCountry: 'US', preferredCountries: ['US', 'CA'] },
  },
});

Get started

Elements

Options

Events

Theming

Guides

Factory

Example

Options

Value

`FieldError.field`

Inside Checkout

See also

​Factory

​Example

​Options

​Value

​FieldError.field

​Inside Checkout

​See also

Factory

Example

Options

Value

`FieldError.field`

Inside Checkout

See also