Skip to content

Instantly share code, notes, and snippets.

@alexcasalboni

alexcasalboni/recurly-payment.html

Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alexcasalboni/6972f0231c5920d24fe6 to your computer and use it in GitHub Desktop.
Save alexcasalboni/6972f0231c5920d24fe6 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
recurly-payment.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Recurly Test</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
</head>
<body>
<form id="recurly-form" class="form-horizontal" method="post" autocomplete="off">
<input type="hidden" name="plan_code" value="pro" data-recurly="plan" />
<input type="hidden" data-recurly="currency" name="currency" value="USD" id="currency" />
<input type="hidden" data-recurly="token" name="recurly_token" />
<div class="control-group">
<label class="control-label" for="first_name">First Name</label>
<div class="controls">
<input required="required" type="text" data-recurly="first_name" id="first_name" value="" placeholder="First name"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="last_name">Last Name</label>
<div class="controls">
<input required="required" type="text" data-recurly="last_name" id="last_name" value="" placeholder="Last name"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input required="required" type="email" data-recurly="email" class="email" id="email" value="" placeholder="Email"/>
</div>
</div>
<div class="control-group coupon-group">
<label class="control-label" for="coupon">Coupon</label>
<div class="controls">
<input type="text" data-recurly="coupon" id="coupon" placeholder="(optional)" value="testcoupon"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="number">Card Number</label>
<div class="controls">
<input required="required" class="creditcard" type="text" data-recurly="number" id="number" value="" placeholder="Card Number"/>
</div>
</div>
<div class="control-group">
<label class="control-label" for="number">Expiration Date</label>
<div class="controls">
<select required="required" data-recurly="month" id="month" placeholder="Month" style="max-width:108px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select required="required" data-recurly="year" id="year" placeholder="Year" style="max-width:108px;">
<option value="14">2014</option>
<option value="15">2015</option>
<option value="16">2016</option>
<option value="17">2017</option>
<option value="18">2018</option>
<option value="19">2019</option>
<option value="20">2020</option>
<option value="21">2021</option>
<option value="22">2022</option>
<option value="23">2023</option>
<option value="24">2024</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="number">Security code</label>
<div class="controls">
<input required="required" class="digits text-center" type="text" data-recurly="cvv" id="cvv" value="" placeholder="CVV"/>
</div>
</div>
<div class="form-actions">
<p>
You're going to pay
<span data-recurly="currency_symbol"></span><span data-recurly="subtotal_now"></span>
with a discount of
<span data-recurly="currency_symbol"></span><span data-recurly="discount_now"></span>
</p>
<button type="submit" class="btn">Submit</button>
</div>
</form>
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="//js.recurly.com/v3/recurly.js"></script>
<script type="text/javascript">
$(function(){
var recurly_key = ".............",
$form = $('#recurly-form');
recurly.configure(recurly_key);
var pricing = recurly.Pricing();
pricing.attach($form.get(0));
/*... form submit event here ... */
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment