← Web Components

Web Components · PDP

<mmm-pdp-delivery>

ZIP / pincode delivery checker with success and error result states, plus a list of static info points below (Free shipping over X, Returns within Y, etc.) read from the product data.

Overview

An input + Check button calls the SDK delivery service; success renders the ETA in the success colour, errors render in the error colour. Info bullet rows below the checker pull from productInfo.deliveryInfo.

When to use

  • For commerce in regions where local delivery times matter (India, parts of APAC, MEA).
  • For low-AOV shipping markets where free-shipping thresholds drive conversion.

Quick start

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

<mmm-pdp-delivery></mmm-pdp-delivery>

Attributes

AttributeTypeDefaultDescription
section-margin-bottomstring1.5625remSpacing below the whole block.
delivery-title-font-sizestring1rem"Check delivery" heading font size.
delivery-title-font-weightstring600Heading font weight.
delivery-title-margin-bottomstring0.9375remSpacing below the heading.
checker-displaystringflexDisplay for input + button row.
checker-gapstring0.625remGap between input and button.
checker-margin-bottomstring0.9375remSpacing below the row.
input-flexstring1Flex factor on the input — controls width vs button.
btn-paddingstring0.75rem 2remCheck button padding.
btn-backgroundstringtheme button fill / #000Button background.
btn-colorstring#fffButton text colour.
btn-borderstringnoneButton border.
btn-border-radiusstring1.5625remButton border-radius.
btn-cursorstringpointerCursor.
btn-font-weightstring600Button font weight.
btn-transitionstringbackground 0.3s easeButton transition.
btn-white-spacestringnowrapButton label white-space.
btn-hover-backgroundstring#333Hover background.
btn-disabled-opacitystring0.5Opacity while disabled (e.g. invalid pincode).
btn-disabled-cursorstringnot-allowedCursor while disabled.
info-font-sizestring0.8125remInfo-bullet font size.
info-colorstring#666Info-bullet colour.
info-line-heightstring1.6Info-bullet line-height.
info-div-margin-bottomstring0.3125remSpacing between info bullets.
result-margin-topstring0.625remSpacing above the result message.
result-paddingstring0.625remResult message padding.
result-border-radiusstring0.25remResult border-radius.
result-font-sizestring0.8125remResult font size.
result-success-backgroundstring#e8f5e9Background for the success state.
result-success-colorstring#2e7d32Text colour for the success state.
result-error-backgroundstring#ffebeeBackground for the error state.
result-error-colorstring#c62828Text colour for the error state.
custom-cssstring—Extra CSS appended inside the shadow DOM.

Events

EventTargetPayload
delivery:pincode-checkedhost{ pincode }

Live preview

store sample-store tag <mmm-pdp-delivery>

Examples

1. Default

<mmm-pdp-delivery></mmm-pdp-delivery>

2. Dark-mode result states

<mmm-pdp-delivery
  result-success-background="rgba(34, 197, 94, 0.15)"
  result-success-color="#86efac"
  result-error-background="rgba(239, 68, 68, 0.15)"
  result-error-color="#fca5a5">
</mmm-pdp-delivery>

3. Pill-style check button

<mmm-pdp-delivery
  btn-border-radius="999px"
  btn-padding="0.5rem 1.25rem"
  btn-background="#c8a8ff"
  btn-color="#0e1011"
  btn-hover-background="#b990ff">
</mmm-pdp-delivery>