Skip to content

Instantly share code, notes, and snippets.

@skeet70

skeet70/gist:3490610

Created August 27, 2012 17:27
Show Gist options
  • Save skeet70/3490610 to your computer and use it in GitHub Desktop.
Save skeet70/3490610 to your computer and use it in GitHub Desktop.
Download ZIP
Rendered balance form html
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="en" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=0.55">
<title>Payment Processing</title>
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/static/style/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="/static/markitup/skins/simple/style.css" rel="stylesheet" type="text/css" />
<link href="/static/style/global.css" rel="stylesheet" type="text/css" />
<link href="/static/style/typeset.css" rel="stylesheet" type="text/css" />
<link href="/static/style/layout.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]> <link href="/static/style/ie.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if gte IE 9]><style type="text/css">.gradient { filter: none;}</style><![endif]-->
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/js/jquery.form.js" type="text/javascript"></script>
<script src="/static/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/static/endless_pagination/js/endless.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/scripts.js" type="text/javascript"></script>
<script src="/static/js/comment_refresh.js" type="text/javascript"></script>
<script src="/static/markitup/jquery.markitup.js" type="text/javascript"></script>
<script type="text/javascript" src="https://js.balancedpayments.com/v1/balanced.js"></script>
<script type="text/javascript">
var marketplaceUri = '/v1/marketplaces/TEST-MP2CSIcjO337fwEoqBrlvB5I';
var debug = function (tag, content) {
$('<' + tag + '>' + content + '</' + tag + '>').appendTo('#result');
};
balanced.init(marketplaceUri);
function balancedCallback(response) {
var tag = (response.status < 300) ? 'pre' : 'code';
debug(tag, JSON.stringify(response));
switch (response.status) {
case 201:
// response.data.uri == uri of the card resource, submit to your server
case 400:
case 403:
// missing/malformed data - check response.error for details
break;
case 402:
// we couldn't authorize the buyer's credit card - check response.error for details
break;
case 404:
// your marketplace URI is incorrect
break;
default:
// we did something unexpected - check response.error for details
break;
}
}
var tokenizeCard = function(e) {
e.preventDefault();
var $form = $('form#payment');
var cardData = {
card_number: $form.find('[name="card_number"]').val(),
expiration_month: $form.find('[name="expiration_month"]').val(),
expiration_year: $form.find('[name="expiration_year"]').val(),
security_code: $form.find('[name="security_code"]').val()
};
balanced.card.create(cardData, balancedCallback);
};
$('#payment').submit(tokenizeCard);
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 [email protected] if you need assistance.");
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34084395-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body class="">
<div id="wrapper">
<div class="top-outer">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/"><img src="/static/img/product_funder.jpg"/></a>
<ul class="nav nav-collapse">
<li class="pf-nav">
<a href="/learn">
<img src="/static/img/icons/icon_nav_design.png"/>
Learn
</a>
</li>
<li class="pf-nav">
<a href="/projects/browse/latest" class="nav-highlight">
<img src="/static/img/icons/icon_nav_fund.png"/>
Browse
</a>
</li>
<li class="pf-nav">
<a href="/projects/create/propose">
<img src="/static/img/icons/icon_nav_propose.png"/>
Propose
</a>
</li>
<li class="pf-nav">
<a href="/blog/">
<img src="/static/img/icons/icon_nav_blog.png"/>
Blog
</a>
</li>
</ul>
<ul class="nav pull-right nav-collapse">
<li class="user-box">
<div>
<div class="gravatar"><img src="http://www.gravatar.com/avatar/57087276149aa02ca61b6240fdfea7cc/?default=&amp;amp;s=80" alt="Avatar for murph" height="32" width="32"/></div>
<div class="dropdown" id="menu1">
<a class="dropdown-toggle username" data-toggle="dropdown" href="#menu1">
Ryan<br/>
Murphy
<b class="caret" style="border-top-color:white"></b>
</a>
<ul class="dropdown-menu">
<li><a id="account-settings" href="/profiles/murphalurph/activity">My Profile</a></li>
<li><a id="profile-backed" href="/projects/fund/">Backed Products</a></li>
<li><a id="profile-created" href="/projects/create/">Creator Dashboard</a></li>
<li><a id="account-settings" href="/profiles/settings/">Edit Settings</a></li>
<li><a id="management" href="/projects/management/reports/collected">Management</a></li>
<li class="divider"></li>
<li><a id="account-logout" href="/logout">Logout</a></li>
</ul>
</div>
</div>
<div class="clear">
<ul class="nav icons hidden-phone">
<li id="menu_messages">
<a href="/messages/inbox">
<i class="icon-comments icon-large"></i><span>0</span>
</a>
</li>
<li class="dropdown" id="notifications-toggle">
<a class="dropdown-toggle" data-toggle="dropdown" href="#notifications-toggle">
<i class="icon-exclamation-sign icon-large"></i><span>0</span>
</a>
<ul class="dropdown-menu">
<div id="notifications-dropdown"></div>
</ul>
</li>
<li id="menu_points">
<a href="/profiles/murphalurph/">
<i class="icon-trophy icon-large"></i><span>225</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="tagline-row">
<div class="container">
<div class="tagline">Design. Fund. Create.</div>
</div>
</div>
<div id="body-content">
<div class="container">
<div>
<div id="content-block">
<div class="content-detail shadowed offset10up">
<div class="creation-header"><h1>Payment Information</h1></div>
<form class="form-horizontal" id="payment">
<div>
<label>Card Number</label>
<input name="card_number" autocomplete="off">
</div>
<div>
<label>Expiration</label>
<input name="expiration_month" placeholder="MM"> / <input name="expiration_year" placeholder="YYYY">
</div>
<div>
<label>Security Code</label>
<input name="security_code" placeholder="3 digit code" autocomplete="off">
</div>
<div class="creation-footer">
<button class="btn btn-large btn-primary pull-right">Submit Payment Data</button>
</div>
</form>
<div id="result"></div>
</div>
</div>
</div>
</div>
</div>
<div id="footer-push"></div><!-- sticky footer push -->
</div><!-- wrapper - sticky footer -->
<div id="footer">
<div id="sizzle-bar">
</div> <!-- sizzlebar -->
<div id="footer-bar">
<div class="container">
<div class="pull-left tiny-grey">
&copyCopyright 2012 ProductFunder, Inc.
</div>
<div class="pull-right links">
<a class="tiny-grey upper" href="#">Contact Us</a>&nbsp;|&nbsp;
<a class="tiny-grey upper" href="#">Terms Of Use</a>&nbsp;|&nbsp;
<a class="tiny-grey upper" href="#">Privacy Policy</a>&nbsp;|&nbsp;
<a class="tiny-grey upper"href="#">Copyright</a>
<!--
<a href="https://twitter.com/productfunder" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @productfunder</a>
<div class="fb-like" data-href="http://productfunder.com" data-send="false" data-layout="button_count" data-width="80" data-show-faces="false">
</div>
-->
</div>
</div>
</div>
</div> <!-- #footer -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment