Skip to content

Instantly share code, notes, and snippets.

@boucher

boucher/StripeTutorialPage.html

Created February 6, 2012 07:05
Show Gist options
  • Save boucher/1750361 to your computer and use it in GitHub Desktop.
Save boucher/1750361 to your computer and use it in GitHub Desktop.
Download ZIP
Stripe Tutorial Payment Form
Raw
StripeTutorialPage.html
<!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");
// 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>
<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>
@tlongren
Copy link

So what's the current suggested method for accepting variable payment amounts? Users must be able to specify how much they're going to be paying, as seen here:
https://github.com/begriffs/lucre

However, it's not possible with stripe-php?

Any chance someone could update this gist to accept payment amounts? Would love to see an example. Now I'm gonna dig through the 32 forks and see if anyone else has added amounts. :)

@debcal2
Copy link

debcal2 commented Oct 31, 2016

Hi
I am using custom form-data and want to auto-submit the form, how can I do that?

@benr75
Copy link

benr75 commented Oct 16, 2020

If you want to disable the submit button with plain JavaScript:

// Class name of button is submit-button
document.getElementsByClassName('submit-button')[0].disabled = true;

// For extra credit if you create a class to style the button while it is loading you can assign it like this
document.getElementsByClassName('submit-button')[0].classList.add("is-loading");

To enable:

document.getElementsByClassName('submit-button')[0].disabled = false;

document.getElementsByClassName('submit-button')[0].classList.remove("is-loading");

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