diff --git a/src/CardUtils.res b/src/CardUtils.res
index e917851b..9a2453df 100644
--- a/src/CardUtils.res
+++ b/src/CardUtils.res
@@ -675,3 +675,13 @@ let getEligibleCoBadgedCardSchemes = (~matchedCardSchemes, ~enabledCardSchemes)
 let getCardBrandFromStates = (cardBrand, cardScheme, showFields) => {
   !showFields ? cardScheme : cardBrand
 }
+
+let getCardBrandInvalidError = (
+  ~cardNumber,
+  ~localeString: OrcaPaymentPage.LocaleStringTypes.localeStrings,
+) => {
+  switch cardNumber->getCardBrand {
+  | "" => localeString.enterValidCardNumberErrorText
+  | cardBrandValue => localeString.cardBrandConfiguredErrorText(cardBrandValue)
+  }
+}
diff --git a/src/Payment.res b/src/Payment.res
index 34cb0c97..250dfe3a 100644
--- a/src/Payment.res
+++ b/src/Payment.res
@@ -328,18 +328,17 @@ let make = (~paymentMode, ~integrateError, ~logger) => {
   }, (cardNumber, cvcNumber, cardExpiry, isCVCValid, isExpiryValid, isCardValid))
 
   React.useEffect(() => {
-    let cardError = if isCardValid == None || cardNumber->String.length == 0 {
-      ""
-    } else if isCardSupported->Option.getOr(true) && isCardValid->Option.getOr(true) {
-      ""
-    } else if isCardSupported->Option.getOr(true) {
-      localeString.inValidCardErrorText
-    } else {
-      switch cardNumber->CardUtils.getCardBrand {
-      | "" => localeString.inValidCardErrorText
-      | cardBrandValue => localeString.cardBrandConfiguredErrorText(cardBrandValue)
-      }
+    let cardError = switch (
+      isCardSupported->Option.getOr(true),
+      isCardValid->Option.getOr(true),
+      cardNumber->String.length == 0,
+    ) {
+    | (_, _, true) => ""
+    | (true, true, _) => ""
+    | (true, _, _) => localeString.inValidCardErrorText
+    | (_, _, _) => CardUtils.getCardBrandInvalidError(~cardNumber, ~localeString)
     }
+    let cardError = isCardValid->Option.isSome ? cardError : ""
     setCardError(_ => cardError)
     None
   }, [isCardValid, isCardSupported])