> ## 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.

# Billing address

> Collect a cardholder or bank account billing address.

The `billingAddress` element renders the six address atoms plus optional `fullName` and `companyName` slots. Use it standalone alongside a payment method, or configure it as a section inside [Checkout](/payment-elements/elements/checkout/sections/billing-address).

## Factory

```typescript theme={null}
overflow.billingAddress(options?: BillingAddressElementOptions): BillingAddressElement
```

## Example

```javascript theme={null}
const billing = overflow.billingAddress({
  fields: {
    fullName: { splitMode: 'horizontal' },
    line2: { hidden: true },
    country: { supportedCountries: ['US', 'CA', 'GB'] },
  },
});

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

billing.mount('#billing');
```

## Optional slots

* `fields.fullName`: opts in a full-name field above the address atoms. Accepts the same options as the standalone [`fullName`](/payment-elements/elements/contact/full-name) element (`splitMode`, per-half labels, etc.). When configured, `value.fullName` is `null` until either half is non-empty, then `{ firstName, lastName }`. When omitted, `value.fullName` is `undefined`.
* `fields.companyName`: opts in a company-name field between `fullName` and the atoms. Same options as the standalone [`companyName`](/payment-elements/elements/contact/company-name) element. When configured, `value.companyName` is `''` until typed. When omitted, `value.companyName` is `undefined`.

## Submitted value

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

Fields you hid via `hidden: true` are excluded from validation and are not required in `value`.

## Inside Checkout

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

When both `shippingAddress` and `billingAddress` are configured, Checkout renders a "Same as shipping" toggle on the billing section. See [Billing address section](/payment-elements/elements/checkout/sections/billing-address).

## See also

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