Client Side Tokenization (hips.js)

Tokenizing payment objects such as cards can be easily implemented using Hips.js. You can build your own form anyway you like and ask for card details yourself, and by utilizing this functionality you can still avoid the PCI DSS certification requirement.

Client-side Tokenization Methods

If you were to just use this form as is, the card numbers would be submitted to you as is, which would require PCI DSS certification.

By attaching these data attributes to your inputs we can use Hips.js to automatically exchange all sensitive card information with unique tokens.

Methods

There are two different methods that you can use to retrieve the card token when you have a compatible form in place. To use either of these, you must first include Hips.js, then you need to make sure that you have set the Hips.public_key property to your own public key in order to enable the script to use the underlying tokenization API

Hips.tokenizeCard()

When using Hips.tokenizeCard() we automatically replace all card related fields with a hidden field containing a token retrieved from Hips.

<form action="/pay" method="POST" id="hips-form">
    <div>
      <label for="ccno">Card number</label>
      <input type="text" name="name" />
    </div>

    <div>
      <label for="ccno">Card number</label>
      <input type="text" name="ccno" id="ccno" data-hips-tokenizer="number" />
    </div>

    <div>
      <label for="expM">Expiration MM/YY</label>
      <select id="expM" data-hips-tokenizer="exp_month">
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
        <option>09</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
      </select>

      <select data-hips-tokenizer="exp_year">
        <option>2016</option>
        <option>2017</option>
        <option>2018</option>
      </select>
    </div>

    <div>
      <label for="ccno">CVC</label>
      <input type="text" size="5" id="cvc" data-hips-tokenizer="cvc" />
    </div>

    <div>
      <button type="submit">OK</button>
    </div>
  </form>

<script src="https://cdn.hips.com/js/v1/hips.js"></script>
<script>
  Hips.public_key='public_n5NsQzono3d4Se3xQ34E7mPB';
  Hips.tokenizeCard('#hips-form', function(response){
    if(response.error) alert(response.error.message);
    //On success, token is available in response.payload.token
    //Return false to stop form submission even on success.
  });
</script>

In this example we enable tokenization on the form with ID hips-form. You can provide any form element or CSS selector. With the seconds argument we assign a callback function that can be used for error handling as well as bypassing the form submission (for custom ajax request for example)

The first argument of the callback function provides an object representing the response from the API. If something went wrong then the error attribute of that object will be populated and non-false. If not, you can access the token from the object in the payload property. i.e. response.payload.token If your callback function explicitly returns false then the submission will be stopped, which for example could be used for proceeding using ajax.

When the tokenizer has been properly implemented, none of the sensitive card information will reach your server. Those fields will simply be stripped from the request resulting from the form’s submission. You will find that in place of the card details, one single card_token value will be available like any other POST field.

Hips.card.getToken()

If a form submission is not desirable for your implementation, for example because of a multi-step checkout, you can retrieve the token manually in order to use it as you see fit.

In this example we tokenize the form with ID hips-form. You can provide any form element or CSS selector. With the seconds argument we assign a callback function where the first argument will contain the token retrieved from Hips. If something went wrong then the second argument of your callback function will be a object describing the error.

<script src="https://cdn.hips.com/js/v1/hips.js"></script>
<script>
  Hips.public_key='public_n5NsQzono3d4Se3xQ34E7mPB';

  function tokenize(){
    Hips.card.getToken('#hips-form', function(token, error){
      if(response.error){
        alert('Error: '+error.message);
      } else {
        alert('Success, token: '+token);
      }
     });
  }
  </script>
  <button type="button" onclick="tokenize()">Tokenize</button>