White.js

Use white.js to collect sensitive card holder information on your website and send it directly to White. No sensitive information ever hits your servers, reducing your compliance scope significantly.

Steps to follow

1. Include the white.js script

<script src="https://fast.whitepayments.com/whitejs/white.js"></script>

2. Set your open key

You can get your open API key from your Dashboard.

white = new White("YOUR_OPEN_KEY");

3. Create the token

This one's easy too. Just pass in the card details to the createToken method.

white.createToken({
  number:    $('.card-number').val(),
  exp_month: $('.card-expiry-month').val(),
  exp_year:  $('.card-expiry-year').val(),
  cvc:       $('.card-cvc').val()
}, whiteResponseHandler);

NEVER include the name attributes on the credit card elements. This prevents them from getting submitted to your server. (e.g. <input type="text" class="card-number">)

4. Submit the token

function whiteResponseHandler(status, response) {
  var $form = $('#payment-form');

  if (response.error) {
    // Show the errors on the form
    $form.find('.payment-errors').text(response.error.message);
    $form.find('button').prop('disabled', false);
  } else {
    // response contains id and card, which contains additional card details
    var token = response.id;
    // Insert the token into the form so it gets submitted to the server
    $form.append($('<input type="hidden" name="whiteToken" />').val(token));
    // and submit
    $form.get(0).submit();
  }
}

White.js does not require jQuery in order to work. In the example above, we're just using it to retrieve the element values

Don't want to create your own form? Use Beautiful, the gorgeous display form that our designers put together instead. It even takes care of validation and token generation for you.