← Web Components

Web Components · Cart & Checkout

<mmm-checkout-coupon>

Coupon entry + applied-discount display. Opens a dialog listing the available coupons for the current cart, lets the shopper apply or remove a code, and broadcasts checkout:coupon-applied / checkout:coupon-removed so other components can react.

Overview

Default state shows an "Add coupon" button. Clicking it opens a dialog that lists the eligible coupons from CheckoutStore.availableCoupons plus a free-text input for codes the merchant has not pre-loaded. After a successful apply, the button collapses to a green "applied" pill with a remove action.

When to use

  • Inside the checkout right column, near the cart summary and price total.
  • For promotion-driven stores.

Quick start

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

<mmm-checkout-coupon></mmm-checkout-coupon>

Attributes

AttributeTypeDefaultDescription
border-colorstringtheme border / #e5e7ebOuter card border + dialog border.
text-primary-colorstringtheme primary text / #111Primary text colour.
text-secondary-colorstringtheme secondary text / #666Helper / hint text colour.
input-stroke-colorstringtheme input stroke / #d9d9d9Coupon-code input border.
button-colorstringtheme button fill / #000Apply button background.
button-color-hoverstringtheme button hover fill / #333Apply button hover.
button-font-weightstringtheme button weight / 500Apply button font weight.
heading-font-weightstringtheme heading weight / 600Dialog heading font weight.

Events

EventTargetPayload
checkout:coupon-appliedwindow{ code: string, discount: number }
checkout:coupon-removedwindow{ code: string }

Live preview

store sample-store tag <mmm-checkout-coupon>

Examples

1. Default

<mmm-checkout-coupon></mmm-checkout-coupon>

2. Accent-branded coupon flow

<mmm-checkout-coupon
  button-color="#c8a8ff"
  button-color-hover="#b990ff"
  border-color="#2a2e33"
  text-primary-color="#fafafa">
</mmm-checkout-coupon>

3. Track applied / removed codes

window.addEventListener('checkout:coupon-applied', (e) =>
  analytics.track('coupon_apply', { code: e.detail.code, discount: e.detail.discount })
);
window.addEventListener('checkout:coupon-removed', (e) =>
  analytics.track('coupon_remove', { code: e.detail.code })
);