← Web Components

Web Components · Cart & Checkout

<mmm-checkout-billing-address>

The billing-address form for checkout. Defaults to "same as shipping" — shoppers toggle the checkbox to enter a separate billing address. Mirrors the shipping form's UI and theming.

Overview

Renders below <mmm-checkout-shipping-address>. When "Same as shipping" is checked, this collapses into a single line. When unchecked, it expands a form with the same field set as shipping (name, phone, address, city, state, postcode, country) and writes the result to CheckoutStore.billingAddress.

When to use

  • For commerce in regions where billing differs from shipping (B2B, taxes).
  • Skip for simple-shopper stores — most carts default to "same as shipping".

Quick start

<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>

<mmm-checkout-billing-address></mmm-checkout-billing-address>

Attributes

Same theming surface as <mmm-checkout-shipping-address>.

AttributeTypeDefaultDescription
border-colorstringtheme border / #e5e7ebCard border.
text-primary-colorstringtheme primary text / #111Primary text colour.
input-stroke-colorstringtheme input stroke / #d9d9d9Input border colour.
button-colorstringtheme button fill / #000Primary button background.
button-color-hoverstringtheme button hover fill / #333Primary button hover background.
button-font-weightstringtheme button weight / 500Button font weight.

Live preview

store sample-store tag <mmm-checkout-billing-address>

Examples

1. Default

<mmm-checkout-billing-address></mmm-checkout-billing-address>

2. Accent buttons

<mmm-checkout-billing-address
  button-color="#c8a8ff"
  button-color-hover="#b990ff"
  border-color="#2a2e33">
</mmm-checkout-billing-address>

3. Pair with shipping in a single column

<mmm-checkout-shipping-address></mmm-checkout-shipping-address>
<mmm-checkout-billing-address></mmm-checkout-billing-address>