[BUG]: Cannot style read-only state of Payment Element

[rbardini]

What happened?

From Stripe.js docs:

Enabling the readOnly option doesn't change the Payment Element's visual appearance. If you want to adjust the way the Payment Element looks, use the Appearance API.

However, form input rules don't support the :read-only pseudo-class, so the .Input:read-only selector has no effect.

Environment

Chrome 131.0.6778.265 on macOS 15.2

Reproduction

No response

[alexlande-stripe]

Hey @rbardini, thanks for reporting this. Agree that this looks like a gap in Appearance API capabilities. I'll start tracking this internally. Unfortunately I can't give any estimates on how long this will take or when it will be prioritized. Feel free to file a ticket with Stripe support and they'll be able to associate your ticket with our internal tracking and notify you when the status changes.

In the meantime, a workaround might be to update your Appearance API config when you enable the readOnly option:

elements.update({
  appearance: {
    theme: "stripe",
    rules: {
      ".Input": {
        backgroundColor: isReadOnly ? "#ddd" : "#fff"
      }
    }
  }
});

paymentElement.update({
  readOnly: true
)};

[rbardini]

Thanks, @alexlande-stripe! I'll do something like that until the Appearance API supports a read-only state or pseudo-class.