Building card payment forms using React and ES6

10 October, 2015

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()