Skip to content

Instantly share code, notes, and snippets.

@jazbek

jazbek/gist:1252967

Created September 30, 2011 07:25
Show Gist options
  • Save jazbek/1252967 to your computer and use it in GitHub Desktop.
Save jazbek/1252967 to your computer and use it in GitHub Desktop.
Download ZIP
gala stripe test
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title> Checkout | Gala Demo 2011</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="" />
<link rel="stylesheet" href="http://76.179.10.111/2011/wp-content/ms-themes/3/demo-gala-1/style.css">
<!--[if lt IE 7]>
<style type="text/css">
div
{
zoom: 1;
}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
div.module
{
zoom: 1;
position: relative;
}
ul.subnav
{
position: relative;
zoom: 1;
}
div.triangle
{
display: none;
}
</style>
<![endif]-->
<!-- Shopp dynamic catalog styles -->
<style type="text/css">
#shopp ul.products li.product { width: 33%; } /* For grid view */
</style>
<!-- END Shopp dynamic catalog styles -->
<script type='text/javascript' src='https://js.stripe.com/v1/?ver=1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://76.179.10.111/2011/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://76.179.10.111/2011/wp-includes/wlwmanifest.xml" />
<link rel='index' title='Gala Demo 2011' href='http://76.179.10.111/2011/' />
<link rel='up' title='Cart' href='http://76.179.10.111/2011/cart/' />
<link rel='prev' title='Schedule' href='http://76.179.10.111/2011/film-guide/schedule/' />
<link rel='next' title='Cart' href='http://76.179.10.111/2011/cart/' />
<meta name="generator" content="WordPress 3.1.4" />
<link rel='alternate' type="application/rss+xml" title="Gala Demo 2011 Catalog Products RSS Feed" href="http://76.179.10.111/2011/shop/category/catalog/feed/" />
<!-- Enhancing CSS Plugin -->
<link rel="stylesheet" href="http://76.179.10.111/2011/EnhancingCSS.css" type="text/css" />
</head>
<body class="page page-id-126 page-child parent-pageid-120 page-template page-template-default">
<div id="page">
<div id="header-bg"></div>
<div id="hero">
<h1>Checkout</h1>
</div> <!-- /#hero -->
<div id="content">
<div id="left">
<div class="module">
<div id="shopp"><div id="cart" class="shopp">
<table>
<tr>
<th scope="col" class="item">Cart Items</th>
<th scope="col">Quantity</th>
<th scope="col" class="money">Item Price</th>
<th scope="col" class="money">Item Total</th>
</tr>
<tr>
<td>
<a href="http://76.179.10.111/2011/film-guide/program/last-kiss/">Last Kiss</a>
(General Admission) </td>
<td>1</td>
<td class="money">$12.00</td>
<td class="money">$12.00</td>
</tr>
<tr class="totals">
<td colspan="2" rowspan="5">
</td>
<th scope="row">Subtotal</th>
<td class="money"><span class="shopp_cart_subtotal">$12.00</span></td>
</tr>
<tr class="totals">
<th scope="row"></th>
<td class="money"></td>
</tr>
<tr class="totals total">
<th scope="row">Total</th>
<td class="money"><span class="shopp_cart_total">$12.00</span></td>
</tr>
</table>
<ul>
<li><strong>Delivery Method:</strong> Will Call</li>
</ul>
</div>
<div class="divider"></div><br>
<form action="http://76.179.10.111/2011/cart/checkout/" method="post" class="shopp validate" id="checkout">
<div><input type="hidden" name="checkout" value="process" /></div><div><label>Ticket Delivery Method</label><select name="data[Delivery Method]" id="order-data-delivery-method" title="" class="required"><option></option><option selected="selected">Will Call</option><option> Print at Home</option></select></div> <ul>
<li>
<h3>Contact Information</h3>
<label for="firstname">First Name</label><span><input type="text" name="firstname" id="firstname" size="8" title="First Name" value="Jessica" class="required min2" /></span>
<label for="lastname">Last Name</label><span><input type="text" name="lastname" id="lastname" size="14" title="Last Name" value="Yazbek" class="required min3" /></span>
<label for="company">Company/Organization</label><span><input type="text" name="company" id="company" size="22" title="Company/Organization" value="Exobi Interactive" /></span>
</li>
<li>
<label for="phone">Phone</label><span><input type="text" name="phone" id="phone" size="15" title="Phone" value="415.315.9523" class="phone" /></span>
<label for="email">Email</label><span><input type="text" name="email" id="email" size="30" title="Email" value="[email protected]" class="required email" /></span>
</li>
<li></li>
<li>
<div class="divider"></div>
<h3>Billing Address</h3>
<div>
<label for="billing-address">Street Address</label>
<input type="text" name="billing[address]" id="billing-address" title="Billing street address" value="10 Fern Ave" class="required" /> </div>
<div>
<label for="billing-xaddress">Address Line 2</label>
<input type="text" name="billing[xaddress]" id="billing-xaddress" title="Billing address line 2" /> </div>
<div class="left">
<label for="billing-city">City</label>
<input type="text" name="billing[city]" id="billing-city" title="City billing address" value="Falmouth" class="required" /> </div>
<div class="right">
<label for="billing-state">State / Province</label>
<select name="billing[state]" id="billing-state-menu" title="State/Provice/Region billing address" class="required disabled hidden"><option value=""></option><option value="AL">Alabama</option><option value="AK">Alaska </option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District Of Columbia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY" selected="selected">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><input type="text" name="billing[state]" id="billing-state" title="State/Provice/Region billing address" value="KY" class="required"/> </div>
<div class="left">
<label for="billing-postcode">Postal / Zip Code</label>
<input type="text" name="billing[postcode]" id="billing-postcode" title="Postal/Zip Code billing address" value="04105" class="required" /> </div>
<div class="right">
<label for="billing-country">Country</label>
<select name="billing[country]" id="billing-country" title="Country billing address" class="required"><option value="US" selected="selected">USA</option></select> </div>
</li>
<li></li>
<li>
</li>
<li class="payment">
<div class="divider"></div>
<h3>Payment Information</h3>
<label for="billing-card">Credit/Debit Card Number</label>
<span><input type="text" name="billing[card]" id="billing-card" size="30" title="Credit/Debit Card Number" value="4242424242424242" autocomplete="off" class="required paycard" /></span>
<div class="card-exp left">
<label for="billing-cardexpires-mm">MM</label> / <label for="billing-cardexpires-yyyy">YYYY</label><br>
<span><input type="text" name="billing[cardexpires-mm]" id="billing-cardexpires-mm" size="4" maxlength="2" title="Card&#039;s 2-digit expiration month" autocomplete="off" value="12" class="required min2 paycard" /> / <input type="text" name="billing[cardexpires-yy]" id="billing-cardexpires-yy" size="4" maxlength="4" title="Card&#039;s 2-digit expiration year" autocomplete="off" value="12" class="required min4 paycard" /></span>
</div>
<label for="billing-cardtype">Card Type</label>
<span><select name="billing[cardtype]" id="billing-cardtype" title="Card Type" class="required paycard"><option value="" selected="selected"></option><option value="Visa" selected="selected">Visa</option><option value="MC">MasterCard</option><option value="Disc">Discover Card</option><option value="Amex">American Express</option></select></span>
</li>
<li class="payment">
<label for="billing-cardholder">Name on Card</label>
<span><input type="text" name="billing[cardholder]" id="billing-cardholder" size="30" title="Card Holder&#039;s Name" autocomplete="off" value="Jessica Yazbek" class="required paycard" /></span>
<label for="billing-cvv">Security ID</label>
<span><input type="text" name="billing[cvv]" id="billing-cvv" size="7" maxlength="4" title="Card&#039;s security code (3-4 digits on the back of the card)" autocomplete="off" class="min3 paycard" /></span>
</li>
<li>
<div class="inline"><label for="marketing"><input type="hidden" name="marketing" value="no" /><input type="checkbox" name="marketing" id="marketing" value="yes" title="" /> Yes, I would like to receive e-mail updates and special offers!</label></div>
</li>
</ul>
<p class="submit"><span class="payoption-button payoption-0"><input type="submit" name="process" id="checkout-button" value="Submit Order" class="checkout-button" /></span></p>
</form>
</div>
<div style="clear:both"></div>
</div>
</div>
<div style="clear: both"></div>
</div> <!-- /#content -->
<div style="clear: both"></div>
</div> <!-- /#page -->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js?ver=1.6.1'></script>
<script type="text/javascript">
$(document).ready(function($){
$("#checkout *").attr('name', '');
Stripe.setPublishableKey('pk_v9QrTFWWhiesPSuBMRWZ8iMOYBbNa');
$("#checkout").submit(function(event) {
var amount = 1200; //amount you want to charge in cents
Stripe.createToken({
number: $('#billing-card').val(),
cvc: $('#billing-cvv').val(),
exp_month: $('#billing-cardexpires-mm').val(),
exp_year: $('#billing-cardexpires-yy').val()
}, amount, stripeResponseHandler);
});
function stripeResponseHandler(status, response) {
if (response.error) {
//show the errors on the form
$("#checkout").prepend(response.error.message);
return false;
} else {
var form$ = $("#checkout");
// token contains id, last4, and card type
var token = response['id'];
// insert the token into the form so it gets submitted to the server
form$.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
// and submit
form$.get(0).submit();
}
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment