mjallday/gist:5859229

## gistfile1.txt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://js.balancedpayments.com/v1/balanced.js"></script>

</head>

<body>

<form action="#" method="POST" id="credit-card-form">
    <fieldset>
        <legend>Credit Card Details</legend>
        <label>Card Number
            <input type="text"
                   autocomplete="off"
                   placeholder="Card Number"
                   class="cc-number" value="411111111111111">
        </label>
        <label>Expiration
            <input type="text"
                   autocomplete="off"
                   placeholder="Expiration Month"
                   class="cc-em" value="01">
            <span>/</span>
            <input type="text"
                   autocomplete="off"
                   placeholder="Expiration Year"
                   class="cc-ey" value="2020">
        </label>
        <label>Security Code (CSC)
            <input type="text"
                   autocomplete="off"
                   placeholder="CSC"
                   class="cc-csc" value="123">
        </label>
        <button type="submit" class="btn">
            Tokenize
        </button>
    </fieldset>
</form>

<script type="text/javascript">


     var requestBinURL = 'http://obowl.com/thanks.aspx'; // make sure it doesn't end in ?inspect

   var marketplaceUri = '/v1/marketplaces/TEST-MP3Jz37VbmCytWWazHgWKXQQ';
   balanced.init(marketplaceUri);

   function responseCallbackHandler(response) {
       switch (response.status) {
           case 400:
               // missing or invalid field - check response.error for details
               console.log(response.error);
               break;
           case 404:
               // your marketplace URI is incorrect
               console.log(response.error);
               break;
           case 201:
               // WOO HOO! MONEY!
               // response.data.uri == URI of the bank account resource you
               // should store this bank account URI to later credit it
               console.log(response.data);
               var $form = $("#credit-card-form");
               // the uri is an opaque token referencing the tokenized bank account
               var cardTokenURI = response.data['uri'];
               // append the token as a hidden field to submit to the server
               $('<input>').attr({
                   type: 'hidden',
                   value: cardTokenURI,
                   name: 'balancedCreditCardURI'
               }).appendTo($form);
               $form.attr({
                   action: requestBinURL
               });
               $form.get(0).submit();
       }
   }

   var tokenizeInstrument = function (e) {
       e.preventDefault();

       var $form = $('#credit-card-form');
       var creditCardData = {
           card_number: $form.find('.cc-number').val(),
           expiration_month: $form.find('.cc-em').val(),
           expiration_year: $form.find('.cc-ey').val(),
           security_code: $form.find('cc-csc').val()
       };

       balanced.card.create(creditCardData, responseCallbackHandler);
   };
   $('#credit-card-form').submit(tokenizeInstrument);
</script>
</body>
</html>

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>

	<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="https://js.balancedpayments.com/v1/balanced.js"></script>

	</head>

	<body>

	<form action="#" method="POST" id="credit-card-form">
	<fieldset>
	<legend>Credit Card Details</legend>
	<label>Card Number
	<input type="text"
	autocomplete="off"
	placeholder="Card Number"
	class="cc-number" value="411111111111111">
	</label>
	<label>Expiration
	<input type="text"
	autocomplete="off"
	placeholder="Expiration Month"
	class="cc-em" value="01">
	<span>/</span>
	<input type="text"
	autocomplete="off"
	placeholder="Expiration Year"
	class="cc-ey" value="2020">
	</label>
	<label>Security Code (CSC)
	<input type="text"
	autocomplete="off"
	placeholder="CSC"
	class="cc-csc" value="123">
	</label>
	<button type="submit" class="btn">
	Tokenize
	</button>
	</fieldset>
	</form>

	<script type="text/javascript">


	var requestBinURL = 'http://obowl.com/thanks.aspx'; // make sure it doesn't end in ?inspect

	var marketplaceUri = '/v1/marketplaces/TEST-MP3Jz37VbmCytWWazHgWKXQQ';
	balanced.init(marketplaceUri);

	function responseCallbackHandler(response) {
	switch (response.status) {
	case 400:
	// missing or invalid field - check response.error for details
	console.log(response.error);
	break;
	case 404:
	// your marketplace URI is incorrect
	console.log(response.error);
	break;
	case 201:
	// WOO HOO! MONEY!
	// response.data.uri == URI of the bank account resource you
	// should store this bank account URI to later credit it
	console.log(response.data);
	var $form = $("#credit-card-form");
	// the uri is an opaque token referencing the tokenized bank account
	var cardTokenURI = response.data['uri'];
	// append the token as a hidden field to submit to the server
	$('<input>').attr({
	type: 'hidden',
	value: cardTokenURI,
	name: 'balancedCreditCardURI'
	}).appendTo($form);
	$form.attr({
	action: requestBinURL
	});
	$form.get(0).submit();
	}
	}

	var tokenizeInstrument = function (e) {
	e.preventDefault();

	var $form = $('#credit-card-form');
	var creditCardData = {
	card_number: $form.find('.cc-number').val(),
	expiration_month: $form.find('.cc-em').val(),
	expiration_year: $form.find('.cc-ey').val(),
	security_code: $form.find('cc-csc').val()
	};

	balanced.card.create(creditCardData, responseCallbackHandler);
	};
	$('#credit-card-form').submit(tokenizeInstrument);
	</script>
	</body>
	</html>