moistcode - Payment Element | Stripe Developers | Page 1

heavy portal Apr 15, 2022, 4:12 PM

#

Hi 👋

dusty hamlet Apr 15, 2022, 4:12 PM

#

Hiya Snufkin!

heavy portal Apr 15, 2022, 4:13 PM

#

So the psuedo-classes we call out in this doc are not working for you

dusty hamlet Apr 15, 2022, 4:14 PM

#

The docs only mention :disabled. I just happen to have also tried :read-only 🙂

#

I don't see the disable field on the inputs when they're read only 🤔

#

But they are definitely not interactable.

#

Here is one example of one of the read only input fields

<input type="text" name="number" id="Field-numberInput" placeholder="1234 1234 1234 1234" autocomplete="billing cc-number" inputmode="numeric" aria-invalid="false" aria-required="true" class="p-Input-input Input p-CardNumberInput-input" value="OMITTED" style="padding-right: 56.2px;" data-com-onepassword-filled="dark" readonly="">

heavy portal Apr 15, 2022, 4:17 PM

#

And how are you writing your rules?

dusty hamlet Apr 15, 2022, 4:18 PM

#

For this read-only scenario, I'm trying

.Input:disabled {...}

heavy portal Apr 15, 2022, 4:18 PM

#

.Input:disabled: { //styling stuff goes here} ?

#

Haha yup

dusty hamlet Apr 15, 2022, 4:18 PM

#

Yeah this should work. I have no issue with the other styles. Just the read-only styles.

#

I've always remove all of the other styles and added

    '.Input:disabled': {
      border: '5px solid blue',
    },

#

to test it out with no luck.

#

Maybe I need to update my stripe lib. Haven't done that in a while

heavy portal Apr 15, 2022, 4:22 PM

#

What version are you on?

dusty hamlet Apr 15, 2022, 4:22 PM

#

    "@stripe/react-stripe-js": "1.7.0",
    "@stripe/stripe-js": "1.24.0",

#

Just a bit behind but nothing major.

#

I'll try it now. I always forget how to update dependencies properly lol.

#

No luck :/ Maybe the readOnly state isn't meant to be styled at this moment.

Here are some errors from things I tried:

invalid selector ".Input--readOnly"; "readOnly" is not a supported modifier for the class "Input"

controller-dab58c3873ff9c34759ce922fb24a83f.js:1 elements.update(): invalid selector

    ".Input[readonly=""]"
           ^
           unexpected character

and of course:

    '.Input:disabled': {
      // --color-green
      border: '16px solid yellow',
    },

which is valid but doesn't apply since it's not disabled?

#

Looks like this is actually a feature that was recently requested for.

#963820034717786172 message

heavy portal Apr 15, 2022, 4:36 PM

#

It does indeed appear the request has been made

dusty hamlet Apr 15, 2022, 4:36 PM

#

Is there a place where I can +1 that or is that unnecessary.

#moistcode - Payment Element