token.html

<html>

<head>
  <link rel="stylesheet" type="text/css" href="payment.css" />
  <!-- Add Crypto-JS and Jquery -->
  <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/hmac-sha256.js"></script>
  <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/enc-base64-min.js"></script>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script type="text/javascript" src="payment_form.js"></script>
</head>

<body>
  <form id="payment_form" action="https://testsecureacceptance.cybersource.com/token/create" method="post">
    <input type="hidden" id="access_key" value="3b1bd8115ebc3b28b3b90d1a1bcba789">
    <input type="hidden" id="profile_id" value="TEST123">
    <input type="hidden" id="transaction_uuid" name="transaction_uuid" value="">
    <input type="hidden" id="signed_field_names" value="access_key,profile_id,transaction_uuid,signed_field_names,unsigned_field_names,signed_date_time,locale,transaction_type,reference_number,payment_token,currency">
    <input type="hidden" id="unsigned_field_names">
    <input type="hidden" id="signed_date_time" value="">
    <input type="hidden" id="locale" value="en">
    <fieldset>
      <legend>Payment Details</legend>
      <div id="paymentDetailsSection" class="section">
        <span>transaction_type:</span><select name="transaction_type" id="transaction_type">
        <option value="create_payment_token">create_payment_token</option>
        <option value="authorization">authorization</option>
        <option value="sale">sale</option>
        <option value="authorization,create_payment_token">authorization,create_payment_token</option>
        <option value="update_payment_token">update_payment_token</option>
        </select><br/>
        <span>reference_number:</span><input type="text" id="reference_number" size="25"><br/>

        <span>payment_Token:</span><input type="text" id="payment_token" size="25"><br/>
        <span>currency:</span><input type="text" id="currency" size="25"><br/>
<!--         <span>amount:</span><input type="text" id="amount" size="25"><br/>
        <span>currency:</span><input type="text" id="currency" size="25"><br/>
        <span>payment_method:</span><input type="text" id="payment_method"><br/>
        <span>card_type:</span><input type="text" id="card_type"><br/>
        <span>card_number:</span><input type="text" id="card_number"><br/>
        <span>card_expiry_date:</span><input type="text" id="card_expiry_date"><br/>
        <span>bill_to_forename:</span><input type="text" id="bill_to_forename"><br/>
        <span>bill_to_surname:</span><input type="text" id="bill_to_surname"><br/>
        <span>bill_to_email:</span><input type="text" id="bill_to_email"><br/>
        <span>bill_to_phone:</span><input type="text" id="bill_to_phone"><br/>
        <span>bill_to_address_line1:</span><input type="text" id="bill_to_address_line1"><br/>
        <span>bill_to_address_city:</span><input type="text" id="bill_to_address_city"><br/>
        <span>bill_to_address_state:</span><input type="text" id="bill_to_address_state"><br/>
        <span>bill_to_address_country:</span><input type="text" id="bill_to_address_country"><br/>
        <span>bill_to_address_postal_code:</span><input type="text" id="bill_to_address_postal_code"><br/> -->
      </div>
    </fieldset>
    <input type="submit" id="submit" value="Submit"/>
  </form>

  <script>
    //Return UTC date (current time) as string formatted for Cybs.
    var dateString = function () {
      var d = new Date();
      d = d.toISOString();
      return d.substring(0, 19) + 'Z';
    };

    $(document).ready(function () {

      //Submit button event handler
      $('#payment_form').submit(function (event) {
        //event.preventDefault(); //Debug

        //add 'name' attr to all input items
        $('input').each(function (item) {
          $(this).attr('name', $(this).attr('id'));
        });


        //insert current time
        $("#signed_date_time").val(dateString);
        //generate unique transaction id
        $("#transaction_uuid").val(Math.floor(Math.random() * 100000000));
        //console.log($("#signed_date_time").val());
    
        //create data to sign
        var signedFieldNames = $('#signed_field_names').val().split(",");
        var dataToSign = [];
        signedFieldNames.forEach(function (item) {
          dataToSign.push(item + "=" + $('#' + item).val());
        });
        dataToSign = dataToSign.join(",");
        //console.log(dataToSign);

        var secretKey = "ff46aa116e3d41fb88c47aac014040dbb422b207c1cc42dc9792136ae279c359f506d2d2859140ff9abeefcd255e9b4e1f60e4e1c1294e8e9795a56a3e13a2e4960b816aa4ec4b26b9ce192db3b3724a88bdc4a99cbe4badb46309aa644f5af39585ae95b6a84a28a582715466773dc3cd96593656614c47b943848909c774bd"
        var signature = $('<input/>').attr('id', 'signature').attr('type', 'hidden').attr('name', 'signature');
        //console.log(dataToSign);
        signature.val(CryptoJS.HmacSHA256(dataToSign, secretKey).toString(CryptoJS.enc.Base64));
        //console.log(signature.val());
        //prepend the signature field to the form 
        $('#payment_form').prepend(signature);

        //Post to CyberSource
        //$("#submit").submit();
      });
    });
  </script>

</body>

</html>