mjallday/balanced-bank-account.html

## balanced-bank-account.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Tokenize Bank Account Form - Balanced</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <h1>Balanced</h1>
    <!-- Begin Balanced ACH Form -->
    <form class="form-horizontal" id="ach-form">
        <formset>
            <legend>Bank account</legend>
            <div class="control-group">
                <label class="control-label" for="name">Account holder's
                    name</label>

                <div class="controls">
                    <input type="text" id="name" name="name"
                           placeholder="Account holder's name"
                           autofocus="autofocus">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="routing_number">Routing
                    number</label>

                <div class="controls">
                    <input type="text" id="routing_number" name="routing_number"
                           placeholder="Routing number" maxlength="9"
                           class="input-medium">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="account_number">Account
                    number</label>

                <div class="controls">
                    <input type="text" id="account_number" name="account_number"
                           placeholder="Account number" class="input-medium"
                           autocomplete="off">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="type">Type</label>

                <div class="controls">
                    <select id="type" class="input-medium" name="type">
                        <option value="savings">Savings</option>
                        <option value="checking">Checking</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <button type="submit" class="btn">Create account</button>
                </div>
            </div>
        </formset>
    </form>
    <!-- End Balanced ACH Form -->
</div>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"
        src="https://js.balancedpayments.com/v1/balanced.dev.js"></script>
<script type="text/javascript">
    var marketplaceUri = '/v1/marketplaces/MP5Pg8XIUxdZn4L8gbcIfy2t';

    try {
        balanced.init(marketplaceUri, {server:'http://127.0.0.1:5001'});
    } catch (e) {
        console.error('You need to set the marketplaceUri variable');
    }

    $.fn.showError = function (message) {
        var $this = $(this), $ctrls = $this.closest('.controls');
        $this.closest('.control-group').addClass('error');
        var $help = $ctrls.find('.help-inline');
        if (!$help.length) {
            $help = $('<span class="help-inline"></span>');
            $help.appendTo($ctrls)
        }
        $help.text(message).show();
        return this;
    };
    $.fn.clearErrors = function () {
        $(this).find('.error').removeClass('error').find('.help-inline').hide();
        return this;
    };

    function balancedCallback(response) {
        console.log(response);
        switch (response.status) {
            case 201:
                // response.data.uri == uri of the bank account resource
                console.log('success', response.data.uri);
                // submit to your server
                $.post('/url/of/your/server', response.data);
            case 400:
            case 403:
                // missing/malformed data - check response.error for details
                var errors = response.error;
                if (errors) {
                    if ('extras' in errors) {
                        errors = errors.extras;
                    }
                    for (var key in errors) {
                        if (!errors.hasOwnProperty(key)) {
                            continue;
                        }
                        $('[name^="' + key + '"]').showError(errors[key]);
                    }
                }
                break;
            case 404:
                console.error('Marketplace URI is incorrect');
                break;
        }
    }

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

        var $form = $('#ach-form');
        var bankAccountData = {
            name:$form.find('[name="name"]').val(),
            account_number:$form.find('[name="account_number"]').val(),
            routing_number:$form.find('[name="routing_number"]').val()
        };
        $form.clearErrors();
        balanced.bankAccount.create(bankAccountData, balancedCallback);
    };

    $(function () {
        $('#ach-form').submit(tokenizeBankAccount);
    });

    if (window.location.protocol === 'file:') {
        alert("balanced.js does not work when included in pages served over file:// URLs. Try serving this page over a webserver. Contact support@balancedpayments.com if you need assistance.");
    }
</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Tokenize Bank Account Form - Balanced</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	</head>
	<body>
	<div class="container">
	<h1>Balanced</h1>
	<!-- Begin Balanced ACH Form -->
	<form class="form-horizontal" id="ach-form">
	<formset>
	<legend>Bank account</legend>
	<div class="control-group">
	<label class="control-label" for="name">Account holder's
	name</label>

	<div class="controls">
	<input type="text" id="name" name="name"
	placeholder="Account holder's name"
	autofocus="autofocus">
	</div>
	</div>
	<div class="control-group">
	<label class="control-label" for="routing_number">Routing
	number</label>

	<div class="controls">
	<input type="text" id="routing_number" name="routing_number"
	placeholder="Routing number" maxlength="9"
	class="input-medium">
	</div>
	</div>
	<div class="control-group">
	<label class="control-label" for="account_number">Account
	number</label>

	<div class="controls">
	<input type="text" id="account_number" name="account_number"
	placeholder="Account number" class="input-medium"
	autocomplete="off">
	</div>
	</div>
	<div class="control-group">
	<label class="control-label" for="type">Type</label>

	<div class="controls">
	<select id="type" class="input-medium" name="type">
	<option value="savings">Savings</option>
	<option value="checking">Checking</option>
	</select>
	</div>
	</div>
	<div class="control-group">
	<div class="controls">
	<button type="submit" class="btn">Create account</button>
	</div>
	</div>
	</formset>
	</form>
	<!-- End Balanced ACH Form -->
	</div>
	<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript"
	src="https://js.balancedpayments.com/v1/balanced.dev.js"></script>
	<script type="text/javascript">
	var marketplaceUri = '/v1/marketplaces/MP5Pg8XIUxdZn4L8gbcIfy2t';

	try {
	balanced.init(marketplaceUri, {server:'http://127.0.0.1:5001'});
	} catch (e) {
	console.error('You need to set the marketplaceUri variable');
	}

	$.fn.showError = function (message) {
	var $this = $(this), $ctrls = $this.closest('.controls');
	$this.closest('.control-group').addClass('error');
	var $help = $ctrls.find('.help-inline');
	if (!$help.length) {
	$help = $('<span class="help-inline"></span>');
	$help.appendTo($ctrls)
	}
	$help.text(message).show();
	return this;
	};
	$.fn.clearErrors = function () {
	$(this).find('.error').removeClass('error').find('.help-inline').hide();
	return this;
	};

	function balancedCallback(response) {
	console.log(response);
	switch (response.status) {
	case 201:
	// response.data.uri == uri of the bank account resource
	console.log('success', response.data.uri);
	// submit to your server
	$.post('/url/of/your/server', response.data);
	case 400:
	case 403:
	// missing/malformed data - check response.error for details
	var errors = response.error;
	if (errors) {
	if ('extras' in errors) {
	errors = errors.extras;
	}
	for (var key in errors) {
	if (!errors.hasOwnProperty(key)) {
	continue;
	}
	$('[name^="' + key + '"]').showError(errors[key]);
	}
	}
	break;
	case 404:
	console.error('Marketplace URI is incorrect');
	break;
	}
	}

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

	var $form = $('#ach-form');
	var bankAccountData = {
	name:$form.find('[name="name"]').val(),
	account_number:$form.find('[name="account_number"]').val(),
	routing_number:$form.find('[name="routing_number"]').val()
	};
	$form.clearErrors();
	balanced.bankAccount.create(bankAccountData, balancedCallback);
	};

	$(function () {
	$('#ach-form').submit(tokenizeBankAccount);
	});

	if (window.location.protocol === 'file:') {
	alert("balanced.js does not work when included in pages served over file:// URLs. Try serving this page over a webserver. Contact support@balancedpayments.com if you need assistance.");
	}
	</script>

	</body>
	</html>