← Web Components

Web Components · Cart & Checkout

<mmm-checkout-tax-details>

Expandable tax breakdown — per-line item showing the tax category, rate, base amount, and tax amount. Pairs with <mmm-checkout-price-summary> so curious shoppers can see exactly how the tax line was calculated.

Overview

Compact accordion. Reads CheckoutStore.priceSummary.taxBreakdown and renders one row per tax line (e.g. CGST + SGST + IGST for India, federal + state + city tax for the US). Optional input for tax-exempt customers (entity / GSTIN) so the right rates apply.

When to use

  • Below <mmm-checkout-price-summary> in any region where tax transparency matters.
  • For B2B carts that need GSTIN / VAT-id capture.

Quick start

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

<mmm-checkout-tax-details></mmm-checkout-tax-details>

Attributes

AttributeTypeDefaultDescription
text-primary-colorstringtheme primary text / #111Primary text colour.
text-secondary-colorstringtheme secondary text / #666Helper / hint text colour.
input-stroke-colorstringtheme input stroke / #d9d9d9GSTIN / VAT-id input border.
button-colorstringtheme button fill / #000Apply button background.
button-color-hoverstringtheme button hover fill / #333Apply button hover.
button-font-familystringtheme button font / inheritApply button font family.
button-font-weightstringtheme button weight / 500Apply button font weight.
button-font-sizestringtheme button size / 0.875remApply button font size.
heading-font-weightstringtheme heading weight / 600Section heading font weight.
border-radiusstringtheme border radius / 0.375remBorder-radius for inputs and the apply button.

Live preview

store sample-store tag <mmm-checkout-tax-details>

Examples

1. Default

<mmm-checkout-tax-details></mmm-checkout-tax-details>

2. Pair below the price summary

<mmm-checkout-price-summary></mmm-checkout-price-summary>
<mmm-checkout-tax-details></mmm-checkout-tax-details>

3. Accent apply-button

<mmm-checkout-tax-details
  button-color="#c8a8ff"
  button-color-hover="#b990ff"
  border-radius="999px">
</mmm-checkout-tax-details>