Commmerce Docs
← Web Components

Web Components · Footer

<mmm-footer-payment>

"We accept" — a row of payment-provider logos pulled from the store's footer data. Each logo size scales responsively across six breakpoints; renders nothing if no valid icons are configured.

Overview

Data source: STORE_INFO_DATA.navigations.footer["PAYMENT METHOD"] (or the legacy PAYMENT_METHODS key). Each entry can use either image or icon for the logo URL — both are supported.

When to use

  • Inside <mmm-footer> below the menu columns or copyright.
  • Anywhere you want to communicate accepted payment methods (checkout pages, "Trust" sections).

Quick start

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

<mmm-footer-payment title-text="We accept" center-align="true"></mmm-footer-payment>

Attributes

AttributeTypeDefaultDescription
show-titlebooleantrueShow the section heading above the icons.
title-textstringPaymentsHeading text. Store data can override via section_title.
icons-img-widthnumber60Width of each icon at the widest breakpoint (px). Scales 0.6×–1× down on smaller screens.
icons-img-heightnumber30Max-height cap for each icon (px). Scales with the breakpoints.
icons-img-object-fitstringcoverCSS object-fit for icon images.
font-weightstringtheme button weightHeading font-weight.
center-alignbooleanfalseCentre the heading and icon row horizontally.

Live preview

store sample-store tag <mmm-footer-payment>

Examples

1. Default — left-aligned with the standard heading

<mmm-footer-payment></mmm-footer-payment>

2. Centred row, larger logos

<mmm-footer-payment
  title-text="Secure payments by"
  icons-img-width="72"
  icons-img-height="36"
  center-align="true"></mmm-footer-payment>

3. Logos only — no heading

<mmm-footer-payment
  show-title="false"
  icons-img-width="48"
  icons-img-height="24"></mmm-footer-payment>