Skip to content

Credit card autofill no longer triggered in Safari 26 (Mollie Components – hidden cc-* inputs) #341

Description

@jorisduenas

Summary

Credit-card autofill suggestions (saved cards from the browser or password managers such as 1Password) no longer appear when focusing the card field in the checkout when using Mollie Components on IOS devices running Safari 26.

  • Safari 17: autofill suggestion shows
  • Safari 26: no suggestion at all

Environment

  • Mollie Components (mollie.js v1, js.mollie.com/v1/mollie.js, build components.[hash].js)
  • Plugin: sylius/mollie-plugin 3.2.3 (Sylius 2.0 / Symfony 7.4)
  • Browser KO: Safari 26.x
  • Browser OK: Safari 17.x

Root cause analysis

Inspecting the DOM of the cardHolder iframe rendered by components.[hash].js, autofill relies on a bank of hidden inputs carrying the autocomplete card tokens:

<input id="cardHolder" autocomplete="cc-name">
<span class="autocomplete">
  <input id="cc-number"    autocomplete="cc-number"    type="number" aria-hidden="true" tabindex="-1">
  <input id="cc-csc"       autocomplete="cc-csc"       type="number" aria-hidden="true" tabindex="-1">
  <input id="cc-exp-month" autocomplete="cc-exp-month" type="number" aria-hidden="true" tabindex="-1">
  <input id="cc-exp-year"  autocomplete="cc-exp-year"  type="number" aria-hidden="true" tabindex="-1">
</span>

It looks like Safari 26 no longer classifies these as autofillable card fields because they are aria-hidden="true" + tabindex="-1" + type="number". WebKit therefore no longer "sees" a card-number field, and a lone cardholder-name field (cc-name) is not
enough to trigger the card autofill prompt. WebKit's payment-field autofill heuristic clearly changed between Safari 17 and 26 in how it treats hidden inputs.

Steps to reproduce

  1. Open the checkout, select "Credit card" (Mollie Components active).
  2. On Safari 26 (macOS or iOS), focus the card field → no autofill suggestion.
  3. On Safari 17, same flow → suggestion appears.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions