#yash-paymentelement-styling

1 messages · Page 1 of 1 (latest)

thorny forge
#

@tidal oyster hello!

tidal oyster
#

Hii

thorny forge
#

Sorry CSS is not my forte, let me have a look

tidal oyster
#

Yeah sure

thorny forge
#

Can you clarify what .Input element means? Like what are you trying to really do visually? Can you make a simple example easy to load/tweak online like a jsfiddle?

tidal oyster
#

It needs a client secret and server api for creating setup intent so I don't know if JS fiddle would be possible for me

#

But let me provide you everything I can

thorny forge
#

you can hardcode a client_secret

#

as long as you don't confirm it it just works

tidal oyster
#

Ohh yeah that's great

#

then let me create a quick fiddle

tidal oyster
#

Here is the little demo I have created

#

Now when element goes in readOnly mode, how can I change the appearnce of the .Input element

#

neither .Input[readonly] nor .Input:disabled rule is being applied

thorny forge
#

give me a few minutes, the channel is really busy

tidal oyster
#

I can understand, please take your time, no issues

night hound
#

👋 stepping in. Give me a moment to catch up

tidal oyster
#

Hii I have shared a fiddle link, I just want to apply some apperance rules for readonly fields in payment element

#

exactly when the stripe is requesting some backend

night hound
#

So when you call element.update() you are looking to also update the Appearance

tidal oyster
#

No, when I am calling element.update({readOnly: true})

#

then stripe is automatically adding readonly attribute to input elements

#

But I want to show users background gray in Input elements when input is in readonly state

#

I tried several rules mentioned in stripe docs but I can't find the way to make those Input background gray

#

.Input[readonly] doens't work as it is not supported by stripe

#

also .Input:disabled not working

night hound
#

Yeah I was about to say .Input:disabled is what I think you want, though I haven't played with this myself.

#

Let me play with it for a min

tidal oyster
#

yeah sure

night hound
#

Okay yeah so this isn't possible as you want it since there is no actual rule for when a .Input is read-only. However, there is a workaround here. You can update your elements instance itself when you call paymentElement.update to update the .Input

#

So something like: ```async function handleSubmit(e) {
e.preventDefault();
setLoading(true);
elements.update({
appearance: {
rules: {
".Input": {
backgroundColor: '#ff000080'
}
}
}
})

paymentElement.update({
readOnly: true,
});```

tidal oyster
#

Ohh that's clever

night hound
#

I will put in a feature request as well to add a rule for read-only as that does seem useful here.

tidal oyster
#

Thanks @night hound I appreciate your efforts and helpful nature ❤️

night hound
#

Happy to help!