Optional: for a bit of background, quickly
read my article on better card payment forms for the web.
const cardInputs = {
cardNumber: document.getElementById("card-number"),
cardNumberWrapper: document.getElementById("card-number__wrapper"),
cardExpiry: document.getElementById("card-expiry"),
cardCvc: document.getElementById("card-cvc"),
isValid: function (input) {
let inputMethod = input.dataset.method;
let inputValue =
inputMethod == "validateCardExpiry"
? payform.parseCardExpiry(input.value)
: input.value;
if (inputMethod == "validateCardNumber")
this.cardNumberWrapper.dataset.cardType = payform.parseCardType(
input.value
);
let inputValid = payform[inputMethod](inputValue);
return inputValid;
},
validateInput: function (input) {
input.oninput = () => {
this.isValid(input)
? input.classList.add("valid")
: input.classList.remove("valid");
};
},
init: function () {
payform.cardNumberInput(this.cardNumber);
payform.expiryInput(this.cardExpiry);
payform.cvcInput(this.cardCvc);
this.validateInput(this.cardNumber);
this.validateInput(this.cardExpiry);
this.validateInput(this.cardCvc);
},
};
cardInputs.init();