Shipping address

The shippingAddress element mirrors billingAddress: the same six atoms, the same optional fullName and companyName slots, and the same autocomplete option surface. Use it standalone alongside an order form, or configure it as a section inside Checkout.

Factory

overflow.shippingAddress(options?: ShippingAddressElementOptions): ShippingAddressElement

Example

const shipping = overflow.shippingAddress({
  fields: {
    fullName: {},
    country: { supportedCountries: ['US', 'CA'] },
  },
});

shipping.on('onChange', ({ complete, value }) => {
  payButton.disabled = !complete;
});

shipping.mount('#shipping');

Optional slots

fields.fullName: opts in a full-name field above the address atoms.
fields.companyName: opts in a company-name field for shipping to a business (for example, “ship to ACME’s office”). This is distinct from the contact-block company name, which captures the shopper’s employer for the contact record.

Submitted value

type ShippingAddressValue = {
  line1: string;
  line2?: string;
  city: string;
  state: string;
  postalCode: string;
  country: string;
  fullName?: { firstName: string; lastName: string } | null;
  companyName?: string;
};

Inside Checkout

overflow.checkout({
  paymentMethods: ['card'],
  shippingAddress: {
    fields: { country: { supportedCountries: ['US', 'CA'] } },
  },
});

When both shippingAddress and billingAddress are configured, Checkout renders a “Same as shipping” toggle on the billing section (default checked). See Shipping address section.

Get started

Elements

Options

Events

Theming

Guides

Factory

Example

Optional slots

Submitted value

Inside Checkout

See also

​Factory

​Example

​Optional slots

​Submitted value

​Inside Checkout

​See also

Factory

Example

Optional slots

Submitted value

Inside Checkout

See also