main.js

const cleaveCC = new Cleave("#cardNumber", {
    creditCard: true,
    delimiter: "-",
    onCreditCardTypeChanged: function (type) {
      const cardBrand = document.getElementById("cardBrand"),
        visa = "fab fa-cc-visa",
        mastercard = "fab fa-cc-mastercard",
        amex = "fab fa-cc-amex",
        diners = "fab fa-cc-diners-club",
        jcb = "fab fa-cc-jcb",
        discover = "fab fa-cc-discover";
  
      switch (type) {
        case "visa":
          cardBrand.setAttribute("class", visa);
          break;
        case "mastercard":
          cardBrand.setAttribute("class", mastercard);
          break;
        case "amex":
          cardBrand.setAttribute("class", amex);
          break;
        case "diners":
          cardBrand.setAttribute("class", diners);
          break;
        case "jcb":
          cardBrand.setAttribute("class", jcb);
          break;
        case "discover":
          cardBrand.setAttribute("class", discover);
          break;
        default:
          cardBrand.setAttribute("class", "");
          break;
      }
    },
  });
  
  const cleaveDate = new Cleave("#cardExpiry", {
    date: true,
    datePattern: ["m", "y"],
  });
  
  const cleaveCCV = new Cleave("#cardCcv", {
    blocks: [3],
  });