benmills/gist:1165586

## gistfile1.html
<html>
<head>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://raw.github.com/braintree/braintree_client_side_encryption_examples/master/ajax/public/javascripts/braintree-1.1.0.min.js"></script>

  <script type='text/javascript'>
        // Set up Braintree Lib
        var clientSideEncryptionKey = 'YOUR_KEY_HERE'; // You can find your key under My User > API Keys > View
        var braintree = Braintree.create(clientSideEncryptionKey);

        // When the page is fully loaded
        $(document).ready(function () {

          function submitForm() {
            $clonedForm = $form.clone();
            // Find the values we want to encrypt and encrypt it
            // (you can add to toEncryptSel if you want to
            // encrypt more than one field)
            var toEncryptSel = "#ccNumber, #ccCVV";
            $clonedForm.find(toEncryptSel).each(function () {
              $(this).val(braintree.encrypt($(this).val()));
            });

            // You will want to run:
            //    $clonedForm.submit();
            //
            // But I'm just adding the cloned from to the page
            // so you can see that it is clearly working.
            $("#encryptedValues").html($clonedForm);

            return false; // Stop it from actually submitting
          }

          var $form = $("#transaction_form"); // Find the form we wish to encrypt
          $form.submit(submitForm); // Tell it to run this function whenever it submits

        });
  </script>
</head>
<body>
  <form id="transaction_form" method="post">
    <input type="text" id="ccFirstName" value="Homer" /><br />
    <input type="text" id="ccLastName" value="Simpson" /><br />
    <input type="text" id="ccExpMonth" value="06" /><br />
    <input type="text" id="ccExpYear" value="2012" /><br />
    <input type="text" id="ccNumber" value="5105105105105100" /><br />
    <input type="text" id="ccCVV" value="123" /><br />
    <input type="submit" /><br />
  </form>
  <div id="encryptedValues">

  </div>
</body>
</html>
	<html>
	<head>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://raw.github.com/braintree/braintree_client_side_encryption_examples/master/ajax/public/javascripts/braintree-1.1.0.min.js"></script>

	<script type='text/javascript'>
	// Set up Braintree Lib
	var clientSideEncryptionKey = 'YOUR_KEY_HERE'; // You can find your key under My User > API Keys > View
	var braintree = Braintree.create(clientSideEncryptionKey);

	// When the page is fully loaded
	$(document).ready(function () {

	function submitForm() {
	$clonedForm = $form.clone();
	// Find the values we want to encrypt and encrypt it
	// (you can add to toEncryptSel if you want to
	// encrypt more than one field)
	var toEncryptSel = "#ccNumber, #ccCVV";
	$clonedForm.find(toEncryptSel).each(function () {
	$(this).val(braintree.encrypt($(this).val()));
	});

	// You will want to run:
	// $clonedForm.submit();
	//
	// But I'm just adding the cloned from to the page
	// so you can see that it is clearly working.
	$("#encryptedValues").html($clonedForm);

	return false; // Stop it from actually submitting
	}

	var $form = $("#transaction_form"); // Find the form we wish to encrypt
	$form.submit(submitForm); // Tell it to run this function whenever it submits

	});
	</script>
	</head>
	<body>
	<form id="transaction_form" method="post">
	<input type="text" id="ccFirstName" value="Homer" /><br />
	<input type="text" id="ccLastName" value="Simpson" /><br />
	<input type="text" id="ccExpMonth" value="06" /><br />
	<input type="text" id="ccExpYear" value="2012" /><br />
	<input type="text" id="ccNumber" value="5105105105105100" /><br />
	<input type="text" id="ccCVV" value="123" /><br />
	<input type="submit" /><br />
	</form>
	<div id="encryptedValues">

	</div>
	</body>
	</html>