← Web Components

Web Components · Cart & Checkout

<mmm-checkout-shipping-method>

Shipping-rate selector at checkout — radio cards listing the carriers / service levels available for the current address with ETA and rate. Reads available methods from CheckoutStore.shippingMethods and writes the shopper's pick back into the store.

Overview

Each method appears as a radio card with the carrier name, transit ETA, and rate (free or amount). Picking one writes CheckoutStore.shippingMethod and triggers a fresh price-summary calculation. If only one method is available it is auto-selected.

When to use

  • After the address step, when there are multiple shipping options.
  • Skip when your store has a single fixed shipping rate.

Quick start

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

<mmm-checkout-shipping-method></mmm-checkout-shipping-method>

Attributes

Every value falls through to the theme; set inline to override.

AttributeTypeDefaultDescription
border-colorstringtheme border / #d9d9d9Method-card border colour.
button-colorstringtheme button fill / #000Selected / hover border accent.
text-primary-colorstringtheme primary text / #111Method name and price text.
text-secondary-colorstringtheme secondary text / #666Method description / ETA text.
heading-font-weightstringtheme heading weight / 600Price font weight.
button-font-weightstringtheme button weight / 500Method-name font weight.

Live preview

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

Examples

1. Drop into the checkout flow

<mmm-checkout-shipping-method></mmm-checkout-shipping-method>

2. Within a standard checkout left column

<section class="checkout-left">
  <mmm-checkout-shipping-address></mmm-checkout-shipping-address>
  <mmm-checkout-shipping-method></mmm-checkout-shipping-method>
  <mmm-checkout-payment></mmm-checkout-payment>
</section>