> ## Documentation Index
> Fetch the complete documentation index at: https://docs.overflow.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Address best practices

> Recommendations for shipping a robust address integration.

## Restrict `supportedCountries` when you can

If your integration only serves specific markets, restrict the country dropdown. Shoppers see fewer choices; when autocomplete is enabled, suggestions are limited to those countries.

```javascript theme={null}
overflow.billingAddress({
  fields: { country: { supportedCountries: ['US', 'CA'] } },
});
```

## Hide `line2` only when you must

Leaving `line2` visible helps shoppers with apartment numbers, suites, and units. Hide it only when your fulfilment pipeline literally cannot use it:

```javascript theme={null}
overflow.shippingAddress({
  fields: { line2: { hidden: true } },
});
```

## Use autocomplete for consumer flows

Address autocomplete dramatically reduces typing and errors on consumer checkouts. Enable it with your own Google Maps API key:

```javascript theme={null}
overflow.billingAddress({
  addressAutocomplete: { provider: 'googlePlaces', apiKey: 'AIza...' },
});
```

See [Address autocomplete](/payment-elements/elements/address/autocomplete) for provider setup, CSP entries, and graceful-failure behavior.

## Gate your Pay button on `complete`

Address validation completes when every visible atom passes its schema. If you enable the `fullName` slot, both halves must pass; if you enable `companyName`, its schema must pass.

```javascript theme={null}
billing.on('onChange', ({ complete }) => {
  payButton.disabled = !complete;
});
```

## Reuse the billing element for shipping

Both elements share the same field set and options. If your form collects both, configure them the same way:

```javascript theme={null}
overflow.checkout({
  paymentMethods: ['card'],
  shippingAddress: { fields: { line2: { hidden: false } } },
  billingAddress: { fields: { line2: { hidden: false } } },
});
```

Inside Checkout, when both are configured, a "Same as shipping" toggle appears on the billing section (default checked). The shopper unchecks it to enter a different billing address.

## Preserve shopper input on updates

`element.update(partialOptions)` reconciles per-field configuration without wiping shopper input. Prefer `.update(...)` over `unmount()` + `mount()` when reconfiguring at runtime.

## See also

* [Address reference](/payment-elements/elements/address/reference)
* [Address autocomplete](/payment-elements/elements/address/autocomplete)