diff --git a/clients/payment/src/components/CardLogos.tsx b/clients/payment/src/components/CardLogos.tsx index 34fb224a9..18843aa5d 100644 --- a/clients/payment/src/components/CardLogos.tsx +++ b/clients/payment/src/components/CardLogos.tsx @@ -23,17 +23,6 @@ export const MaestroLogo = () => ( ); -export const AmericanExpressLogo = () => ( - - - - - -); - export const VisaLogo = () => ( ; @@ -76,8 +70,9 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props) const [initiateCardPayment] = useMutation(InitiateCardMerchantPaymentDocument); type FieldState = "untouched" | "empty" | "invalid" | "valid"; + type CardFieldState = FieldState | "cardNotSupported"; - const [cardNumberState, setCardNumberState] = useState("untouched"); + const [cardNumberState, setCardNumberState] = useState("untouched"); const [expiryDateState, setExpiryDateState] = useState("untouched"); const [cvvState, setCvvState] = useState("untouched"); @@ -137,22 +132,19 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props) .with({ element: "cvv", isValid: true }, () => setCvvState("valid")) .exhaustive(); }); - //@ts-expect-error addEventHandler isn't typed correctly Frames.addEventHandler("paymentMethodChanged", (event: { paymentMethod: string }) => { const cardType = event.paymentMethod; + if (cardType === "American Express") { + setCardNumberState("cardNotSupported"); + } if (isNullish(cardType)) { setPaymentMethod(Option.None()); } else { match(cardType.toLowerCase()) - .with( - "visa", - "maestro", - "mastercard", - "american express", - "cartes bancaires", - paymentMethod => setPaymentMethod(Option.Some(paymentMethod)), + .with("visa", "maestro", "mastercard", "cartes bancaires", paymentMethod => + setPaymentMethod(Option.Some(paymentMethod)), ) .otherwise(() => setPaymentMethod(Option.None())); } @@ -216,7 +208,7 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props)
({ + .with("invalid", "empty", "cardNotSupported", () => ({ borderColor: colors.negative[400], })) .with("untouched", "valid", () => undefined) @@ -227,11 +219,6 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props) {match(paymentMethod) .with(Option.P.None, () => null) - .with(Option.P.Some("american express"), () => ( - - - - )) .with(Option.P.Some("cartes bancaires"), () => ( @@ -259,6 +246,7 @@ export const CardPayment = ({ paymentLink, paymentMethodId, publicKey }: Props) {match(cardNumberState) .with("invalid", () => t("paymentLink.invalidCardNumber")) + .with("cardNotSupported", () => t("paymentLink.cardNotSupported")) .with("empty", () => t("paymentLink.cardNumberRequired")) .with("untouched", "valid", () => " ") .exhaustive()} diff --git a/clients/payment/src/locales/de.json b/clients/payment/src/locales/de.json index e897b82c5..6945d45ef 100644 --- a/clients/payment/src/locales/de.json +++ b/clients/payment/src/locales/de.json @@ -9,6 +9,7 @@ "paymentLink.card.cardNumber": "Kartennummer", "paymentLink.card.cvv": "CVV", "paymentLink.card.expiryDate": "Ablaufdatum", + "paymentLink.cardNotSupported": "American Express-Karten werden nicht unterstützt. Bitte versuchen Sie es mit einer anderen Karte.", "paymentLink.cardNumberRequired": "Ihre Kartennummer ist erforderlich", "paymentLink.city": "Stadt", "paymentLink.country": "Land", diff --git a/clients/payment/src/locales/en.json b/clients/payment/src/locales/en.json index 25a0be1ee..12c163793 100644 --- a/clients/payment/src/locales/en.json +++ b/clients/payment/src/locales/en.json @@ -11,6 +11,7 @@ "paymentLink.card.cvv": "CVV", "paymentLink.cardNumberRequired": "Your card number is required", "paymentLink.expiryDateRequired": "Your expiry date is required", + "paymentLink.cardNotSupported": "American Express cards are not supported. Please try with another card.", "paymentLink.cvvRequired": "Your CVV is required", "paymentLink.city": "City", "paymentLink.country": "Country", diff --git a/clients/payment/src/locales/es.json b/clients/payment/src/locales/es.json index 5477a7489..62d22be97 100644 --- a/clients/payment/src/locales/es.json +++ b/clients/payment/src/locales/es.json @@ -9,6 +9,7 @@ "paymentLink.card.cardNumber": "Número de tarjeta", "paymentLink.card.cvv": "CVV", "paymentLink.card.expiryDate": "Fecha de vencimiento", + "paymentLink.cardNotSupported": "Las tarjetas American Express no son compatibles. Por favor, intenta con otra tarjeta.", "paymentLink.cardNumberRequired": "Se requiere el número de tu tarjeta", "paymentLink.city": "Ciudad", "paymentLink.country": "País", diff --git a/clients/payment/src/locales/fi.json b/clients/payment/src/locales/fi.json index 3f6278e61..afc2a4af5 100644 --- a/clients/payment/src/locales/fi.json +++ b/clients/payment/src/locales/fi.json @@ -9,6 +9,7 @@ "paymentLink.card.cardNumber": "Kortin numero", "paymentLink.card.cvv": "CVV", "paymentLink.card.expiryDate": "Vanhenemispäivä", + "paymentLink.cardNotSupported": "American Express -kortteja ei tueta. Yritä toisella kortilla.", "paymentLink.cardNumberRequired": "Korttinumerosi vaaditaan", "paymentLink.city": "Kaupunki", "paymentLink.country": "Maa", diff --git a/clients/payment/src/locales/fr.json b/clients/payment/src/locales/fr.json index 45e027974..11733495f 100644 --- a/clients/payment/src/locales/fr.json +++ b/clients/payment/src/locales/fr.json @@ -9,6 +9,7 @@ "paymentLink.card.cardNumber": "Numéro de carte", "paymentLink.card.cvv": "CVV", "paymentLink.card.expiryDate": "Date d'expiration", + "paymentLink.cardNotSupported": "Les cartes American Express ne sont pas prises en charge. Veuillez essayer avec une autre carte.", "paymentLink.cardNumberRequired": "Votre numéro de carte est requis", "paymentLink.city": "Ville", "paymentLink.country": "Pays", diff --git a/clients/payment/src/locales/it.json b/clients/payment/src/locales/it.json index 923daf2d9..4c7205efb 100644 --- a/clients/payment/src/locales/it.json +++ b/clients/payment/src/locales/it.json @@ -9,6 +9,7 @@ "paymentLink.card.cardNumber": "Numero della carta", "paymentLink.card.cvv": "CVV", "paymentLink.card.expiryDate": "Data di scadenza", + "paymentLink.cardNotSupported": "Le carte American Express non sono supportate. Per favore prova con un'altra carta.", "paymentLink.cardNumberRequired": "Il numero della tua carta è obbligatorio", "paymentLink.city": "Città", "paymentLink.country": "Paese", diff --git a/clients/payment/src/locales/nl.json b/clients/payment/src/locales/nl.json index 50abb100f..bfe8c0b04 100644 --- a/clients/payment/src/locales/nl.json +++ b/clients/payment/src/locales/nl.json @@ -9,6 +9,7 @@ "paymentLink.card.cardNumber": "Kaartnummer", "paymentLink.card.cvv": "CVV", "paymentLink.card.expiryDate": "Vervaldatum", + "paymentLink.cardNotSupported": "American Express-kaarten worden niet ondersteund. Probeer het met een andere kaart.", "paymentLink.cardNumberRequired": "Uw kaartnummer is verplicht", "paymentLink.city": "Stad", "paymentLink.country": "Land", diff --git a/clients/payment/src/locales/pt.json b/clients/payment/src/locales/pt.json index c3ec1ed0c..a28292646 100644 --- a/clients/payment/src/locales/pt.json +++ b/clients/payment/src/locales/pt.json @@ -9,6 +9,7 @@ "paymentLink.card.cardNumber": "Número do cartão", "paymentLink.card.cvv": "CVV", "paymentLink.card.expiryDate": "Data de validade", + "paymentLink.cardNotSupported": "Cartões American Express não são suportados. Por favor, tente com outro cartão.", "paymentLink.cardNumberRequired": "O número do seu cartão é obrigatório", "paymentLink.city": "Cidade", "paymentLink.country": "País",