How to style pseudo classes for the Adyen input fields

[ashrafnazar]

Is your feature request related to a problem? Please describe.
I would like to be able to style a pseudo class in :focus, for the input fields in the AdyenCheckout instance.

Describe the solution you'd like
A way to style pseudo classes, so potentially an onFocus property in the CoreOptions interface or a way to do the same thing inside the styles object, as part of the PaymentMethodOptions generic type.

Describe alternatives you've considered
I've attempted to use the second argument (element) inside the onChange property within the CoreOptions interface, but have not found a way to do so.

Additional context
N/A

[m1aw]

Hello @ashrafnazar

What would be the objective here? I ask because we are going to be rolling out CSS variables in V6 and you will be able to customise it that way.
I wonder however if your use case would be covered. Can you share a few more details on what you are trying to accomplish?

[ashrafnazar]

Hey @m1aw - it's to match our current designs, so when a user tabs through to an input field, or is on it, then we would like the outline property to change, i.e. its stroke width and colour. Hope that makes sense

[m1aw]

Is it currently not possible just by using CSS?

[ashrafnazar]

Hi @m1aw - because the input fields are inside iframes, I don't think it's as simple as updating the CSS. Unless I'm mistaken?

[ashrafnazar]

@m1aw I've been told that I can style the parent element, i.e. the span with the data-cse attribute, but unless I do some sort of hack, there isn't a clean way to update the :focus state of it

[ashrafnazar]

Do we have any update on this?

[DeekshithShetty]

Hey @ashrafnazar,

This may not be the best way, but I was able to overwrite Adyen css for the focus state

.adyen-checkout__field--cardNumber:has(.adyen-checkout__label--focused), 
.adyen-checkout__field__exp-date:has(.adyen-checkout__label--focused),
.adyen-checkout__field--expiryDate:has(.adyen-checkout__label--focused),
.adyen-checkout__field__cvc:has(.adyen-checkout__label--focused),
.adyen-checkout__field--securityCode:has(.adyen-checkout__label--focused),
.adyen-checkout__card__holderName:has(.adyen-checkout__label--focused) {
	// your custom css goes here
	background: var(--color-interaction-background-focused);
}

Hope this helps

[ashrafnazar]

Hi @DeekshithShetty - are you integrating using Adyen's Drop-in component?

[DeekshithShetty]

@ashrafnazar Yes. I am using the Drop-in component

[ashrafnazar]

@DeekshithShetty - unfortunately, this won't apply in my case, as my input fields are custom

[github-actions]

This issue is stale because it has been open 30 days with no activity. Please comment on this issue otherwise it will be closed in 7 days.

[ashrafnazar]

Comment to keep issue open

[ribeiroguilherme]

@ashrafnazar Are you using create.checkout('securedfields') in this case? Which version of the library are you using?

[ashrafnazar]

@ribeiroguilherme - I'm using v5 and AdyenCheckout

[ribeiroguilherme]

How are you creating your component? Are you using create.checkout('securedfields') ? And which version of v5 are you using?

[ashrafnazar]

The version we are using is 5.67.1 and the method is .create('securedfields'…

[sponglord]

@ashrafnazar
Since you are using the "custom card" integration i.e. .create('securedfields'...) how your UI looks, is entirely up to you.

You can set an onFocus callback example here and do whatever you want to style the elements that act as parents for the iframes.

In this example we add/remove a class that controls the border & outline properties of the element.