diff --git a/.changeset/strong-boxes-suffer.md b/.changeset/strong-boxes-suffer.md
new file mode 100644
index 000000000..8e91bdff2
--- /dev/null
+++ b/.changeset/strong-boxes-suffer.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Add fix to reshow card icon if previously it had failed to load
diff --git a/packages/lib/src/components/Card/components/CardInput/CardInput.scss b/packages/lib/src/components/Card/components/CardInput/CardInput.scss
index 83704c194..0608b2cbf 100644
--- a/packages/lib/src/components/Card/components/CardInput/CardInput.scss
+++ b/packages/lib/src/components/Card/components/CardInput/CardInput.scss
@@ -120,6 +120,10 @@
display: none;
}
+.adyen-checkout__field--cardNumber .adyen-checkout-card-input__icon--hidden {
+ display: none;
+}
+
.adyen-checkout__field--securityCode.adyen-checkout__field--error .adyen-checkout__card__cvc__hint,
.adyen-checkout__field--securityCode.adyen-checkout__field--valid .adyen-checkout__card__cvc__hint {
opacity: 0;
diff --git a/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx b/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx
index 602d4844a..19b63bd39 100644
--- a/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx
+++ b/packages/lib/src/components/Card/components/CardInput/components/BrandIcon.tsx
@@ -2,21 +2,29 @@ import { h } from 'preact';
import { getCardImageUrl, getFullBrandName } from '../utils';
import { BrandIconProps } from './types';
import useImage from '../../../../../core/Context/useImage';
+import { useState } from 'preact/hooks';
+import classNames from 'classnames';
export default function BrandIcon({ brand, brandsConfiguration = {} }: BrandIconProps) {
const getImage = useImage();
const imageName = brand === 'card' ? 'nocard' : brand;
const imageUrl = brandsConfiguration[brand]?.icon ?? getCardImageUrl(imageName, getImage);
- const handleError = e => {
- e.target.style.cssText = 'display: none';
+
+ const [hasLoaded, setHasLoaded] = useState(false);
+
+ const handleError = () => {
+ setHasLoaded(false);
};
- return (
-
- );
+ const handleLoad = () => {
+ setHasLoaded(true);
+ };
+
+ const fieldClassnames = classNames({
+ 'adyen-checkout-card-input__icon': true,
+ 'adyen-checkout__card__cardNumber__brandIcon': true,
+ 'adyen-checkout-card-input__icon--hidden': !hasLoaded
+ });
+
+ return ;
}