Card holder name restriction (#1975)

* restrict input to letters and spaces * allow hyphens --------- Co-authored-by: Katina Anachkova <[email protected]>
podkrepi-bg · Nov 20, 2024 · 4e2b1cb · 4e2b1cb
1 parent 92721a7
commit 4e2b1cb
Showing 1 changed file with 6 additions and 0 deletions.
diff --git 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])
+          }}
         />
       </Box>
       <PaymentElement