A credit card form using jQuery.payment

form.html

<form accept-charset="UTF-8" action="/payment" class="cardInfo" method="post">

  <fieldset class="cardInfo__personalDetails">

    <div class="input string required cardInfo_firstname form-row">
      <label class="string required" for="cardInfo_firstname">
        <abbr title="required">*</abbr> First Name
      </label>
      <input aria-required="true" id="cardInfo_firstname" maxlength="60" name="cardInfo[firstname]" placeholder="e.g. Joe" required="required" type="text">
    </div>
   
    <div class="input string required cardInfo_surname form-row">
      <label class="string required" for="cardInfo_surname">
        <abbr title="required">*</abbr> Surname
      </label>
      <input aria-required="true" id="cardInfo_surname" maxlength="60" name="cardInfo[surname]" placeholder="e.g. Bloggs" required="required" type="text">
    </div>

  </fieldset>

  <fieldset class="cardInfo__cardDetails">

    <div class="form-row cardInfo__cc-num">
      <label for="cc-num">
        <abbr title="required">*</abbr>
        <span>Card Number</span>
      </label>
      <div class="cc-num__wrap">
        <input id="cc-num" type="tel" class="paymentInput cc-num" placeholder="•••• •••• •••• ••••" autocompletetype="cc-number" required="required">
        <span class="card"></span>
      </div>
    </div>

    <div class="form-row cardInfo__cc-exp">
      <label for="cc-exp">
        <abbr title="required">*</abbr>
        <span>Expires</span>
      </label>
      <input id="cc-exp" type="tel" class="paymentInput cc-exp" placeholder="MM / YY" autocompletetype="cc-exp" required="required">
    </div>

    <div class="form-row cardInfo__cc-cvc">
      <label for="cc-cvc">
        <abbr title="required">*</abbr>
        <span>CVC</span>
      </label>
      <input id="cc-cvc" type="tel" class="paymentInput cc-cvc" placeholder="CVC" autocompletetype="cc-cvc" required="required">
    </div>

    <div class="cardInfo__submission">
      <input class="button" name="commit" type="submit" value="Make Payment">
      <a class="cancel-link" href="/">Cancel</a>
    </div>
  </fieldset>
  
</form>

validations.js

// include jquery and jquery.payment before here

$(function() {
  
  var validateDetails = function() {
    
    // set variables for the expiry date validation, cvc validation and expiry date 'splitter'
    var expiry = $('.cc-exp').payment('cardExpiryVal');
    var validateExpiry = $.payment.validateCardExpiry(expiry["month"], expiry["year"]);
    var validateCVC = $.payment.validateCardCVC($('.cc-cvc').val());
  
    // if statement on whether the card’s expiry is valid or not
    if (validateExpiry) {
      // if the expiry is valid add the identified class
      $('.cc-exp').addClass('identified');
    } else {
      // remove again if the expiry becomes invalid
      $('.cc-exp').removeClass('identified');
    }
    // if statement on whether the card’s cvc is valid or not
    if (validateCVC) {
      // if the cvc is valid add the identified class
      $('.cc-cvc').addClass('identified');
    } else {
      // remove again if the cvc becomes invalid
      $('.cc-cvc').removeClass('identified');
    }

  }
  // this runs the above function every time stuff is entered into this expiry input
  $('.paymentInput').bind('change paste keyup', function() {
    validateDetails();
  });
  
});

Awesome

loved it 😘

Placed styles.css in <style> and validations.js in <script> but its not working for me :-(