Creating a charge, using Tokenization

This is a really common integration example. You want to accept cards on your website and don't want the card information to ever touch your server. You also want to use your own form, so you can design every single aspect of the User Experience.

We'll walk you through all of the steps below.

Steps to follow

Step 1: Create our credit card form

We'll need to create a form that we can use to accept the card details. Here's a simple example below

<form id='payment-form' method="post" action="charge.php">
  <!-- We'll show payment errors at the top -->
  <div id="payment-errors"></div>

  <!-- Do NOT add the `name` attribute to any of the elements below -->
  Number: <input type="text" id="card-number"><br/>
  Expiry Month: <input type="text" id="card-expiry-month"><br/>
  Expiry Year: <input type="text" id="card-expiry-year"><br/>
  CVC: <input type="text" id="card-cvc"><br/>

  <button type="submit">Buy an Ice Cream for AED10</button>
</form>

Make sure NOT to include the name attribute to any of the sensitive <input> fields. This will prevent them from accidentally getting submitted to your server.

Step 2: Exchange the card details for a Token

We'll be using White.js to send the card details to White, and get a token back. The token will then be submitted to your server for processing.

a. First, we'll include the white.js script

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

b. Then, we'll initialize it

white = new White("YOUR_OPEN_KEY");

$('#payment-form').submit(function(){
  // Create a token when the form is submitted
  white.createToken({
    number:    $('#card-number').val(),
    exp_month: $('#card-expiry-month').val(),
    exp_year:  $('#card-expiry-year').val(),
    cvc:       $('#card-cvc').val()
  }, whiteResponseHandler);
});

That's it, next we'll define the function whiteResponseHandler to submit the token to your server.

c. Submit the token to your server

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

  if (response.error) {
    // Show the errors on the form
    $('#payment-errors').text(response.error.message);
  } 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();
  }
}

Step 3: Charge the card

We're using PHP for this example. Let's take that token, and charge it for the correct amount.

You'll need to setup the white-php plugin before using the code below.

<?php
// charge.php
require("vendor/autoload.php");
White::setApiKey("YOUR_SECRET_KEY");

if( isset($_POST['whiteToken']) ) {
  // The token is present .. create a charge
  White_Charge::create(array(
    "amount" => 1000, // 10.00 AED
    "currency" => "aed",
    "description" => "One Ice cream cone",
    "card" => $_POST['whiteToken'],
    "email" => "[email protected]",
    "ip" => $_REQUEST['REMOTE_ADDR']
  ));

  // All done!
}

That's it!

This will allow you to process a charge, without the card details ever hitting your server.

You probably want to add Error Handling to this example too.