Skip to content

Instantly share code, notes, and snippets.

@stijlist

stijlist/credit_cards.html

Last active December 21, 2015 01:39
Show Gist options
  • Save stijlist/6229665 to your computer and use it in GitHub Desktop.
Save stijlist/6229665 to your computer and use it in GitHub Desktop.
Download ZIP
Stripe code for my church's Youth Fellowship website.
Raw
credit_cards.html
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trinity Marthoma Church Youth Fellowship</title>
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/foundation_and_overrides.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/contact.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/credit_cards.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/events.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/pages.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/payments.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/font-awesome.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/vendor/custom.modernizr.js?body=1"></script>
<script src="https://js.stripe.com/v2/"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="Ms8Psj9vnnuRBWqApq6bSMQUFvM9Nl7GTaZKWlYcBgk=" name="csrf-token" />
<meta content="pk_test_kPzuqE3wLFBn1MMbjYVSMQ0P" name="stripe-key" />
</head>
<body>
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name"><a href="/"><div class="logo"></div></a></li>
<li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="divider"></li>
<li><a href="/about">About</a></li>
<li class="divider"></li>
<li><a href="/events">Events</a></li>
<li class="divider"></li>
<li><a href="/biblestudy">Bible Study</a></li>
<li class="divider"></li>
<li><a href="/account">Account</a></li>
<li class="divider"></li>
<li class="divider"></li>
</ul>
</section>
</nav>
<!-- <div class="row">
<div class="large-3 push-9 columns search">
<input type="text" placeholder="search" />
</div>
</div> -->
<div class="row">
<div class="large-12 columns">
</div>
</div>
<label for="card_number">Credit Card Number</label>
<input id="card_number" type="text" />
<label for="card_code">Security Code on Card (CVV)</label>
<input id="card_code" type="text" />
<label for="card_month">Card Expiration</label>
<select id="card_month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="card_year">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
</select>
<input id="new_credit_card" name="commit" type="submit" value="Save Credit Card" />
<form accept-charset="UTF-8" action="/events//payments/new" class="new_payment" id="new_payment" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="Ms8Psj9vnnuRBWqApq6bSMQUFvM9Nl7GTaZKWlYcBgk=" /></div>
<input id="payment_event_id" name="payment[event_id]" type="hidden" />
<input name="commit" type="submit" value="Create Payment" />
</form>
<footer class="row">
<div class="twelve columns">
<hr class="foothr" />
<ul class="foot-copy left">&copy; 2013 Trinity Marthoma Church Youth Fellowship</ul>
<ul class="foot-links right">
<li><a href="http://facebook.com/tmcyf">Facebook</a></li>
<li><a href="http://twitter.com/tmcyf">Twitter</a></li>
<li><a href="http://instagram.com/tmcyf">Instagram</a></li>
<li><a href="/about/contact">Contact</a></li>
</ul>
</div>
</footer>
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/foundation/foundation.js?body=1"></script>
<script src="/assets/foundation/foundation.alerts.js?body=1"></script>
<script src="/assets/foundation/foundation.clearing.js?body=1"></script>
<script src="/assets/foundation/foundation.cookie.js?body=1"></script>
<script src="/assets/foundation/foundation.dropdown.js?body=1"></script>
<script src="/assets/foundation/foundation.forms.js?body=1"></script>
<script src="/assets/foundation/foundation.joyride.js?body=1"></script>
<script src="/assets/foundation/foundation.magellan.js?body=1"></script>
<script src="/assets/foundation/foundation.orbit.js?body=1"></script>
<script src="/assets/foundation/foundation.reveal.js?body=1"></script>
<script src="/assets/foundation/foundation.section.js?body=1"></script>
<script src="/assets/foundation/foundation.tooltips.js?body=1"></script>
<script src="/assets/foundation/foundation.topbar.js?body=1"></script>
<script src="/assets/foundation/foundation.interchange.js?body=1"></script>
<script src="/assets/foundation/foundation.placeholder.js?body=1"></script>
<script src="/assets/foundation/index.js?body=1"></script>
<script src="/assets/bootstrap.min.js?body=1"></script>
<script src="/assets/turbolinks.js?body=1"></script>
<script src="/assets/contact.js?body=1"></script>
<script src="/assets/credit_cards.js?body=1"></script>
<script src="/assets/events.js?body=1"></script>
<script src="/assets/pages.js?body=1"></script>
<script src="/assets/payments.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
</body>
</html>
Raw
credit_cards.js
function() {
var credit_card;
jQuery(function() {
Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'));
return credit_card.setupForm();
});
credit_card = {
setupForm: function() {
return $('#new_credit_card').submit(function() {
$('input[type=submit]').attr('disabled', true);
return credit_card.processCard();
});
},
processCard: function() {
var card;
card = {
number: $('#card_number').val(),
cvc: $('#card_code').val(),
expMonth: $('#card_month').val(),
expYear: $('#card_year').val()
};
return Stripe.createToken(card, credit_card.handleStripeResponse);
},
handleStripeResponse: function(status, response) {
return alert(response);
}
};
Window.credit_card = credit_card;
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment