Skip to content

Instantly share code, notes, and snippets.

/gist:1255391

Created October 1, 2011 00:07
Show Gist options
  • Save anonymous/1255391 to your computer and use it in GitHub Desktop.
Save anonymous/1255391 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<?php
require 'lib/Stripe.php';
if ($_POST) {
Stripe::setApiKey("kLh5gUyytoTLN8YtyBI7dLovXhZmDkcb");
Stripe_Charge::create(array("amount" => 1199,
"currency" => "usd",
"description" => $_POST['cardName'].' - '.$_POST['description'],
"card" => $_POST['stripeToken']));
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Stripe Getting Started Form</title>
<link href="bootstrap-1.2.0.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/application.js"></script>
<!-- jQuery is used only for this example; it isn't required to use Stripe -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
// this identifies your website in the createToken call below
Stripe.setPublishableKey('pk_Lk2X61u6Aha72vu66upw7YQKNBp0d');
function stripeResponseHandler(status, response) {
if (response.error) {
// re-enable the submit button
$('.submit-button').removeAttr("disabled");
// show the errors on the form
$(".payment-errors").html(response.error.message);
} else {
var form$ = $("#payment-form");
// 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 + "' />");
form$.append("<input type='hidden' name='cardName' value='" + token['card']['name'] + "' />");
// and submit
form$.get(0).submit();
}
}
$(document).ready(function() {
$("#payment-form").submit(function(event) {
// disable the submit button to prevent repeated clicks
$('.submit-button').attr("disabled", "disabled");
var chargeAmount = 1199; //amount you want to charge, in cents. 1000 = $10.00, 2000 = $20.00 ...
// createToken returns immediately - the supplied callback submits the form if there are no errors
Stripe.createToken({
name: $('.card-name').val(),
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, chargeAmount, stripeResponseHandler);
return false; // submit from callback
});
});
</script>
</head>
<body>
<!-- Topbar
================================================== -->
<div class="topbar">
<div class="topbar-inner">
<div class="container">
<h3><a href="#">#</a></h3>
<ul class="nav">
<li><a href="#masthead">Home</a></li>
<li><a href="#about">Dashboard</a></li>
<li><a href="#grid-system">Documentation</a></li>
<li><a href="#layouts">Help & Support</a></li>
<li><a href="#typography">Pricing</a></li>
<li class="active"><a href="#tables">Checkout</a></li>
</ul>
</div>
</div>
</div>
<!-- Masthead (blueprinty thing)
================================================== -->
<div id="masthead">
<div class="inner">
<div class="container">
<h1>Title</h1>
<p class="lead">
To make your experience more enjoyable, our custom back-end checkout system is ready to assist you.<br />
</p>
<p>#</p>
</div><!-- /container -->
</div>
</div>
<div class="container">
<section id="forms">
<div class="page-header">
<h1>Checkout <font style="font-size:18px;font-weight:200"> #</font></h1>
</div>
<div class="row">
<div class="span8 columns">
<span class="payment-errors"></span>
<form action="" method="POST" id="payment-form">
<fieldset>
<div class="clearfix">
<div class="input">
<input class="card-name" size="30" type="text" placeholder="Cardholder Name" />
</div>
</div><!-- /clearfix -->
<div class="clearfix">
<div class="input">
<input class="card-number" size="30" type="text" placeholder="Card Number" />
</div>
</div><!-- /clearfix -->
<div class="clearfix">
<div class="input">
<label for="xlInput4">Expiration Date</label>
<select class="card-expiry-month" name="largeSelect" id="miniSelect">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select class="card-expiry-year" name="miniSelect" id="miniSelect">
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
</div>
</div><!-- /clearfix -->
<div class="clearfix">
<div class="input">
<input class="card-cvc" type="text" placeholder="CVC" /> &nbsp;&nbsp;3 or 4 digit security code located on the back of card
</div>
</div><!-- /clearfix -->
<div class="clearfix">
<div class="input">
<input id="description" name="description" placeholder="#"></textarea>
<span class="help-block"><br />
#
</span>
</div>
</div><!-- /clearfix -->
<div class="clearfix">
<div class="well">
<input type="submit" class="submit-button" value="Submit Payment">&nbsp;<button type="reset" class="btn">Cancel</button>
</div>
</fieldset>
</form>
</div>
<div class="span7 columns"><br />
<h2>We accept all major credit cards</h2>
<p>#</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment