Skip to content

Instantly share code, notes, and snippets.

@tcope25

tcope25/gist:b57534e8c22a582b864e

Created October 7, 2014 02:59
Show Gist options
  • Save tcope25/b57534e8c22a582b864e to your computer and use it in GitHub Desktop.
Save tcope25/b57534e8c22a582b864e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<?php
require_once('./lib/Stripe.php');
if ($_POST) {
Stripe::setApiKey("blah");
$error = '';
$success = '';
try {
if (!isset($_POST['stripeToken'])) {
throw new Exception("The Stripe Token was not generated correctly");
} else {
$customer = Stripe_Customer::create(array(
'email' => $_POST['email'],
'description' => $_POST['first-name'] . " " . $_POST['last-name'],
'card' => $_POST['stripeToken'],
'plan' => 'wh_15'
)
);
$success = 'Your payment was successful.';
}
}
catch (Exception $e) {
$error = $e->getMessage();
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Secure Payment Form</title>
<link rel="stylesheet" href="css/bootstrap-min.css">
<link rel="stylesheet" href="css/bootstrap-formhelpers-min.css" media="screen">
<link rel="stylesheet" href="css/bootstrapValidator-min.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
<link rel="stylesheet" href="css/bootstrap-side-notes.css" />
<style type="text/css">
.col-centered {
display:inline-block;
float:none;
text-align:left;
margin-right:-4px;
}
.row-centered {
margin-left: 9px;
margin-right: 9px;
}
.form-group {
height:30px;
}
.btn {
margin-top: 20px;
}
.payment-success {
color: green;
padding-top:5px;
}
</style>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap-min.js"></script>
<script src="js/bootstrap-formhelpers-min.js"></script>
<script type="text/javascript" src="js/bootstrapValidator-min.js"></script>
<script type="text/javascript">
// this identifies your website in the createToken call below
Stripe.setPublishableKey('blah');
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 + "' />");
// 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");
// createToken returns immediately - the supplied callback submits the form if there are no errors
Stripe.createToken({
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
return false; // submit from callback
});
});
</script>
</head>
<body>
<!-- to display errors returned by createToken -->
<div class="row row-centered">
<div class="col-md-4 col-md-offset-4">
<div class="alert alert-danger" id="a_x200" style="display: none;"> <strong>Error!</strong> <span class="payment-errors"></span> </div>
<div class="page-header">
<h2 class="gdfg">Secure Payment Form</h2>
</div>
<p>By submitting this form, you authorize Macklab Media to charge you $15 every month.</p>
<span class="payment-success">
<?= $success ?>
<?= $error ?>
</span>
<hr>
<form action="" method="POST" id="payment-form">
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">First Name</label>
<div class="col-sm-6"><input type="text" size="20" autocomplete="off" class="first-name form-control" name="first-name" /></div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Last Name</label>
<div class="col-sm-6"><input type="text" size="20" autocomplete="off" class="last-name form-control" name="last-name" /></div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Email</label>
<div class="col-sm-6"><input type="text" size="40" autocomplete="off" class="email form-control" name="email"/></div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">Card Number</label>
<div class="col-sm-6"><input type="text" size="20" autocomplete="off" class="card-number form-control" /></div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="textinput">CVC</label>
<div class="col-sm-3"><input type="text" size="4" autocomplete="off" class="card-cvc form-control" /></div>
</div>
<div class="form-group">
<div class="form-inline">
<label class="col-sm-4 control-label" for="textinput">Expiration (MM/YYYY)</label>
<div class="col-sm-6"><input type="text" size="2" class="card-expiry-month form-control"/>
<span> / </span>
<input type="text" size="4" class="card-expiry-year form-control"/></div>
</div>
</div>
<button type="submit" class="submit-button btn btn-success">Submit Payment</button>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment