← Web Components

Web Components · Cart & Checkout

<mmm-checkout-shipping-address>

Shipping-address form for checkout — autofill from the signed-in customer's saved addresses, validation, and a "Save and continue" CTA that writes the address to CheckoutStore.

Overview

Shows the current shipping address (when one is set in the store) and a "Use a different address" link. For new addresses, expands an inline form with fields for name, phone, address lines, city, state, postcode, and country. Saved addresses appear as selectable cards for logged-in users.

When to use

  • As the second step of checkout, after sign-in.
  • Pair with <mmm-checkout-billing-address> when you want a separate billing flow.

Quick start

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

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

Attributes

AttributeTypeDefaultDescription
border-colorstringtheme border / #e5e7ebCard border.
text-primary-colorstringtheme primary text / #111Primary text colour.
text-secondary-colorstringtheme secondary text / #666Helper / hint 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.
button-font-familystringtheme button font / inheritButton font family.
button-font-sizestringtheme button size / 0.875remButton font size.
border-radiusstringtheme border radius / 0.375remBorder-radius for inputs, buttons, and cards.

Live preview

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

Examples

1. Default

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

2. Pill-style inputs & buttons

<mmm-checkout-shipping-address
  border-radius="999px"
  button-color="#c8a8ff"
  button-color-hover="#b990ff"
  button-font-size="0.875rem">
</mmm-checkout-shipping-address>

3. Dark-mode card

<mmm-checkout-shipping-address
  border-color="#2a2e33"
  input-stroke-color="#2a2e33"
  text-primary-color="#fafafa"
  text-secondary-color="#9ca3af"
  button-color="#c8a8ff">
</mmm-checkout-shipping-address>