Billing address section

Enable the billing address section by passing billingAddress. The section accepts every option the standalone Billing address element accepts.

Enable the section

overflow.checkout({
  paymentMethods: ['card'],
  billingAddress: {},
});

An empty object renders the default field set: line1, line2, city, state, postal code, country. Country defaults to the shopper’s inferred locale.

Same-as-shipping

When both shippingAddress and billingAddress are configured, Checkout renders a “Same as shipping” toggle on the billing section. The toggle is on by default; the shopper unchecks it to enter a different billing address.

overflow.checkout({
  paymentMethods: ['card'],
  shippingAddress: {},
  billingAddress: {
    sameAsShipping: { defaultChecked: true },
  },
});

Configure fields

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

Autocomplete

overflow.checkout({
  paymentMethods: ['card'],
  billingAddress: {
    autocomplete: { enabled: true },
  },
});

See Address autocomplete.

Submitted value

checkout.on('onSubmit', ({ value }) => {
  // value.billingAddress: { line1, line2?, city, state, postalCode, country, ... }
});

If the shopper leaves “Same as shipping” checked, value.billingAddress equals value.shippingAddress.

Get started

Elements

Options

Events

Theming

Guides

Enable the section

Same-as-shipping

Configure fields

Autocomplete

Submitted value

See also

​Enable the section

​Same-as-shipping

​Configure fields

​Autocomplete

​Submitted value

​See also

Enable the section

Same-as-shipping

Configure fields

Autocomplete

Submitted value

See also