Payment Methods Band

<section class="sl-payments" aria-label="{{ section.settings.heading | default: 'Accepted payment methods' }}" style="padding:clamp(16px,3vw,24px) 1rem;color:inherit;font-family:inherit;border-top:1px solid currentColor;">
  <div style="max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:center;text-align:center;">
    {%- if section.settings.heading != blank -%}
      <p style="margin:0 .5rem 0 0;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7;font-weight:700;">{{ section.settings.heading }}</p>
    {%- endif -%}
    <ul style="list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;">
      {%- for block in section.blocks -%}
        <li style="display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border:1px solid currentColor;border-radius:.375rem;font-size:.78rem;font-weight:700;background:{{ section.settings.pill_color | default: 'transparent' }};" {{ block.shopify_attributes }}>
          <span aria-hidden="true" style="font-size:1rem;line-height:1;">{{ block.settings.icon | default: '💳' }}</span>
          <span>{{ block.settings.label }}</span>
        </li>
      {%- endfor -%}
    </ul>
  </div>
</section>
{% schema %}
{
  "name": "Payment Methods Band",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "We accept" },
    { "type": "color", "id": "pill_color", "label": "Pill background" }
  ],
  "blocks": [
    {
      "type": "method",
      "name": "Payment method",
      "settings": [
        { "type": "text", "id": "icon", "label": "Icon (emoji or symbol)", "default": "💳" },
        { "type": "text", "id": "label", "label": "Label", "default": "Visa" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Payment Methods Band",
      "blocks": [
        { "type": "method", "settings": { "icon": "💳", "label": "Visa" } },
        { "type": "method", "settings": { "icon": "💳", "label": "Mastercard" } },
        { "type": "method", "settings": { "icon": "💳", "label": "Amex" } },
        { "type": "method", "settings": { "icon": "🅿️", "label": "PayPal" } },
        { "type": "method", "settings": { "icon": "🍎", "label": "Apple Pay" } },
        { "type": "method", "settings": { "icon": "🛍️", "label": "Shop Pay" } }
      ]
    }
  ]
}
{% endschema %}