CardInputFormat.js

import React, { useRef, useEffect } from "react";
import InputMask from "react-input-mask";
import { Formik, Form } from "formik";
import valid from "card-validator";
import visa from "assets/visa.svg";
import masterCard from "assets/mastercard.svg";

const initialValues = {
  cardNo: "",
  month: "",
  year: "",
  cvv: ""
};

const NewCard = () => {
  const cardNoRef = useRef(null);
  const monthRef = useRef(null);
  const yearRef = useRef(null);
  const cvvRef = useRef(null);
  const cardButtonRef = useRef(null);

  useEffect(() => {
    if (cardNoRef.current) cardNoRef.current.focus();
  }, []);

  const handleFormSubmit = (values) => {};

  return (
    <Formik
      initialValues={initialValues}
      onSubmit={(values) => handleFormSubmit(values)}
    >
      {({
        touched,
        values,
        errors,
        handleBlur,
        dirty,
        isValid,
        setFieldValue
      }) => (
        <Form>
          <div>
            <label>Card Number</label>
            <InputMask
              maskChar=""
              name="cardNo"
              onBlur={handleBlur}
              value={values.cardNo}
              mask="9999 9999 9999 9999"
              placeholder="4242 4242 4242 4242"
              onChange={({ target: { value } }) => {
                setFieldValue("cardNo", value);
                if (value.length === 19) {
                  if (monthRef.current) monthRef.current.focus();
                }
              }}
            >
              {(inputProps: {}) => <input ref={cardNoRef} {...inputProps} />}
            </InputMask>

            {errors.cardNo && touched.cardNo && <span>{errors.cardNo}</span>}
          </div>

          <div>
            <label>MM/YY</label>
            <div>
              <InputMask
                mask="99"
                maskChar=""
                name="month"
                placeholder="MM"
                onBlur={handleBlur}
                value={values.month}
                onChange={({ target: { value } }) => {
                  setFieldValue("month", value);
                  if (value.length === 2) {
                    if (yearRef.current) yearRef.current.focus();
                  }
                }}
              >
                {(inputProps: {}) => <input ref={monthRef} {...inputProps} />}
              </InputMask>

              <InputMask
                mask="99"
                name="year"
                maskChar=""
                placeholder="YY"
                onBlur={handleBlur}
                value={values.year}
                onChange={({ target: { value } }) => {
                  setFieldValue("year", value);
                  if (value.length === 2) {
                    if (cvvRef.current) cvvRef.current.focus();
                  }
                }}
              >
                {(inputProps: {}) => <input ref={yearRef} {...inputProps} />}
              </InputMask>
            </div>
          </div>

          <div>
            <label>CVV</label>
            <InputMask
              name="cvv"
              mask="999"
              maskChar=""
              placeholder="123"
              value={values.cvv}
              onBlur={handleBlur}
              onChange={({ target: { value } }) => {
                setFieldValue("cvv", value);
                if (value.length === 3) {
                  if (cardButtonRef.current) cardButtonRef.current.focus();
                }
              }}
            >
              {(inputProps: {}) => <input ref={cvvRef} {...inputProps} />}
            </InputMask>

            {errors.cvv && touched.cvv && <span>{errors.cvv}</span>}
          </div>

          <button
            type="submit"
            ref={cardButtonRef}
            disabled={!dirty || !isValid}
          >
            Fund Wallet
          </button>
        </Form>
      )}
    </Formik>
  );
};

export default NewCard;

function formatCardPan(bin, last) {
  const card = `${bin}******${last}`;
  return card.match(new RegExp(".{1,4}", "g"))?.join(" ") ?? "";
}

function showCardImg(pan = "") {
  let cardImage = "";

  if (pan.length > 0) {
    const numberValidation = valid.number(pan.substring(0, 4).trim());

    if (!numberValidation.isPotentiallyValid) {
      cardImage = masterCard;
    }

    if (numberValidation.card) {
      if (numberValidation.card.type === "visa") {
        cardImage = visa;
      } else if (numberValidation.card.type === "mastercard") {
        cardImage = masterCard;
      } else if (
        numberValidation.card.type === "maestro" ||
        numberValidation.card.type === "discover"
      ) {
        cardImage = masterCard;
      }
    } else {
      cardImage = masterCard;
    }
  }

  return cardImage;
}