Quick Start

To see Creditcard.js in your development payment page, insert the following <script> tag into you payment <form> (it will expand in place).

<form>
  <!-- <input name="old-credit-card-number"/> -->
  ...
  <script src="https://creditcardjs.com/creditcardjs-quickstart.min.js"></script>
  ...
  <input type="submit" value="Purchase">
</form>

Production Integration

1. Download and upload Creditcard.js to your server.

This zip archive contains creditcardjs-v0.10.13.min.js and creditcardjs-v0.10.13.min.css, which should be uploaded to your static asset directory. Serving these files from your server increases security, eliminates external downtime, and avoids additional SSL/DNS overhead.

2. Add Creditcard.js HTML to payment page.

Replace your existing credit card fields with the following HTML. This HTML ensures graceful degradation for users without JavaScript enabled.

<link href="/update/this/path/creditcardjs-v0.10.13.min.css" rel="stylesheet">

<div class="ccjs-card">
  <label class="ccjs-number">
    Card Number
    <input name="card-number" class="ccjs-number" placeholder="•••• •••• •••• ••••">
  </label>

  <label class="ccjs-csc">
    Security Code
    <input name="csc" class="ccjs-csc" placeholder="•••">
  </label>

  <button type="button" class="ccjs-csc-help">?</button>

  <label class="ccjs-name">
    Name on Card
    <input name="name" class="ccjs-name">
  </label>

  <fieldset class="ccjs-expiration">
    <legend>Expiration</legend>
    <select name="month" class="ccjs-month">
      <option selected disabled>MM</option>
      <option value="01">01</option>
      <option value="02">02</option>
      <option value="03">03</option>
      <option value="04">04</option>
      <option value="05">05</option>
      <option value="06">06</option>
      <option value="07">07</option>
      <option value="08">08</option>
      <option value="09">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>

    <select name="year" class="ccjs-year">
      <option selected disabled>YY</option>
      <option value="14">14</option>
      <option value="15">15</option>
      <option value="16">16</option>
      <option value="17">17</option>
      <option value="18">18</option>
      <option value="19">19</option>
      <option value="20">20</option>
      <option value="21">21</option>
      <option value="22">22</option>
      <option value="23">23</option>
      <option value="24">24</option>
    </select>
  </fieldset>

  <select name="card-type" class="ccjs-hidden-card-type">
    <option value="amex" class="ccjs-amex">American Express</option>
    <option value="discover" class="ccjs-discover">Discover</option>
    <option value="mastercard" class="ccjs-mastercard">MasterCard</option>
    <option value="visa" class="ccjs-visa">Visa</option>
    <option value="diners-club" class="ccjs-diners-club">Diners Club</option>
    <option value="jcb" class="ccjs-jcb">JCB</option>
    <!--<option value="laser" class="laser">Laser</option>-->
    <!--<option value="maestro" class="maestro">Maestro</option>-->
    <!--<option value="unionpay" class="unionpay">UnionPay</option>-->
    <!--<option value="visa-electron" class="visa-electron">Visa Electron</option>-->
    <!--<option value="dankort" class="dankort">Dankort</option>-->
  </select>
</div>

<script src="/update/this/path/creditcardjs-v0.10.13.min.js"></script>

  • Update the url path prefixes of the CSS link href and JavaScript script src to point to the uploaded locations on your server.
  • Change the form name and value attributes to match those of your existing form. These attributes control the key-value pairs submitted to your server.
  • The choice of <select> instead of <input> for the expiration fields bloats the HTML, but the usabliity benefits of drop downs are well worth the extra weight.
  • Comment/uncomment the card type options to match the card types supported by your payment processor. Creditcard.js scans for enabled <option> tags to determine which card types are supported.
  • Don’t forget to update the script src url path prefix. Creditcard.js loads JS asynchronously after HTML to avoid delaying your users.

3. Add charset

To render the placeholder bullet (•) correctly, a charset must be set.

<head>
  <meta charset="utf-8">
  ...
</head>

JavaScript API

Creditcard.js also provides a JS API to integrate with existing client side validation.

creditcardjs.isValid()

Returns true if credit card form is valid, false otherwise.

creditcardjs.onValidityChange(callback)

When the user has successfully completed all fields, callback is invoked with the parameter true.

If the user introduces an error after completing all fields, callback is invoked with the parameter false.

Example
creditcardjs.onValidityChange(function(isValid) {
  if (isValid) {
    /* allow form submission */
  } else {
    /* prevent form submission */
  }
});