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">
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Stripe Getting Started Form</title>
<script type="text/javascript" src=""></script>
<!-- jQuery is used only for this example; it isn't required to use Stripe -->
<script type="text/javascript" src=""></script>
<script type="text/javascript">
// this identifies your website in the createToken call below
function stripeResponseHandler(status, response) {
if (response.error) {
// re-enable the submit button
// show the errors on the form
} 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
$(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
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 if you need assistance.");
<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 class="form-row">
<input type="text" size="4" autocomplete="off" class="card-cvc" />
<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"/>
<button type="submit" class="submit-button">Submit Payment</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment