Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Stripe Tutorial Payment Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Stripe Getting Started Form</title>
<script type="text/javascript" src="https://js.stripe.com/v1/"></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('YOUR_PUBLISHABLE_KEY');
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");
var chargeAmount = 1000; //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({
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
});
});
if (window.location.protocol === 'file:') {
alert("stripe.js does not work when included in pages served over file:// URLs. Try serving this page over a webserver. Contact support@stripe.com if you need assistance.");
}
</script>
</head>
<body>
<h1>Charge $10 with Stripe</h1>
<!-- to display errors returned by createToken -->
<span class="payment-errors"></span>
<form action="" method="POST" id="payment-form">
<div class="form-row">
<label>Card Number</label>
<input type="text" size="20" autocomplete="off" class="card-number" />
</div>
<div class="form-row">
<label>CVC</label>
<input type="text" size="4" autocomplete="off" class="card-cvc" />
</div>
<div class="form-row">
<label>Expiration (MM/YYYY)</label>
<input type="text" size="2" class="card-expiry-month"/>
<span> / </span>
<input type="text" size="4" class="card-expiry-year"/>
</div>
<button type="submit" class="submit-button">Submit Payment</button>
</form>
</body>
</html>

Forked a version which avoids sending the full credit card number and CVC on to your system (since you have a token, and potentially no longer need this info):
https://gist.github.com/1253022

@mkdynamic from the Stripe documentation: "Fairly standard. The only thing to note is how input fields representing sensitive card data (number, CVC, expiration month and year) do not have a "name" attribute. This prevents them from being submitted to your server when the form is submitted."

@latortuga Ha. Missed that :)

ijames commented Oct 4, 2011

Whoa, so I can have information like this on the form but only javascript elements will be able to interact with it. Interesting...

ryanjm commented Oct 12, 2011

Just a suggestion to others who are customizing this form. Check your classes and id's and make sure they line up. Also make sure not to use the same ID twice. :)

Very interesting, can you tell me how is this protected from a man-in-the-middle attack or if this is PCI compliant?

@serbanghita load your page over SSL, load stripe lib over SSL, POST the credit card info over SSL.

If you are not storing credit card numbers, it is PCI compliant.

@latortuga so for this to be fully compliant, the person who implements Stripe has to install a SSL certificate.

Thanks!

There was a comment here (that has since been deleted) about not having to have SSL to be PCI-compliant and anyone monitoring this thread should know that that is patently false. You must have SSL loading the stripe lib and loading everything on the page that collects credit card information because you cannot guarantee that the javascript has not been tampered with otherwise. Any javascript not loaded over SSL can be trivially modified and is a security hole.

thanks. very helpful

Good day,

I'm trying to put this example in my localhost but not working. Not enough just to put the publishable Key? Never reaches the value to my stripe dashboard

Help, please!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment