Shipping address - Overflow Documentation

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;
  zip: string;
  country: string;
  fullName?: { firstName: string; lastName: string } | null;
  companyName?: string;
};

Inside Checkout

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

See Shipping address section for Checkout-specific configuration.

See also

Last modified on July 27, 2026