From 4e2b1cbd042c463f8de204700bff584c8b2c9cca Mon Sep 17 00:00:00 2001 From: Katina Anachkova <82702355+katina-anachkova@users.noreply.github.com> Date: Wed, 20 Nov 2024 19:29:41 +0200 Subject: [PATCH] Card holder name restriction (#1975) * restrict input to letters and spaces * allow hyphens --------- Co-authored-by: Katina Anachkova --- .../steps/payment-method/PaymentDetailsStripeForm.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/components/client/donation-flow/steps/payment-method/PaymentDetailsStripeForm.tsx b/src/components/client/donation-flow/steps/payment-method/PaymentDetailsStripeForm.tsx index c7364f2f7..6e68dbd1e 100644 --- a/src/components/client/donation-flow/steps/payment-method/PaymentDetailsStripeForm.tsx +++ b/src/components/client/donation-flow/steps/payment-method/PaymentDetailsStripeForm.tsx @@ -79,6 +79,12 @@ export default function PaymentDetailsStripeForm({ id="billingName" variant="outlined" placeholder={t('donation-flow:step.payment-method.field.card-data.name-label')} + onInput={(e) => { + const input = e.target as HTMLInputElement + input.value = input.value + .replace(/[^a-zA-Z\s-]/g, '') + .replace(/[-\s]{2,}/g, (match) => match[0]) + }} />