Web Components · Cart & Checkout
<mmm-checkout-delivery-method>
Delivery-type selector — home delivery, in-store pickup, or locker drop-off. Distinct from shipping rate (which method to ship with) — this is about where the order ends up. Writes the choice to CheckoutStore.deliveryMethod and fires checkout:delivery-changed.
Overview
Renders the active delivery options pulled from CheckoutStore.deliveryMethods. Each method shows its label, description, and (if applicable) the address picker for that type — store list for pickup, locker list for drop-off. The shopper's choice is mirrored back into the store and broadcast via the checkout:delivery-changed event so other components (price summary, shipping method) can react.
When to use
- For stores that offer pickup-in-store or locker-pickup alongside delivery.
- For omnichannel retailers — surface BOPIS (buy online, pickup in store) in the cart.
- Skip for delivery-only stores.
Quick start
<script src="https://v2-api-production.commmerce.com/api/v1/web-component/commmerce-sdk.js?store=sample-store"></script>
<mmm-checkout-delivery-method></mmm-checkout-delivery-method>Attributes
Every value falls through to the theme; set inline to override.
border-colorstringtheme border / #d9d9d9Option-card border colour.button-colorstringtheme button fill / #000Selected / hover border accent.Events
checkout:delivery-changedwindow{ method: 'delivery' | 'pickup' | 'locker', address?: object }Fires every time the shopper picks a new delivery method or changes the pickup / locker address.
Live preview
Examples
1. Default
<mmm-checkout-delivery-method></mmm-checkout-delivery-method>2. Track BOPIS adoption
window.addEventListener('checkout:delivery-changed', (e) => {
analytics.track('delivery_choice', { method: e.detail.method });
});3. Reveal pickup-store list only when needed
window.addEventListener('checkout:delivery-changed', (e) => {
document.querySelector('#store-finder')
.toggleAttribute('hidden', e.detail.method !== 'pickup');
});