Skip to content

Instantly share code, notes, and snippets.

Embed
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");
// 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>
@akshayrawat

This comment has been minimized.

Copy link

@akshayrawat akshayrawat commented Jun 16, 2012

This work with one caveat - The credit card details are still posted to your servers, you usually want to avoid this. Ideally you just want to post the stripeToken. Isn't that the whole point of Stripe.js ? - that you don't deal with PCI compliance since your systems never get credit card details.

Edit here: https://gist.github.com/2940697 . Maybe this one should be linked from https://stripe.com/docs/tutorials/forms

@boucher

This comment has been minimized.

Copy link
Owner Author

@boucher boucher commented Jun 16, 2012

In fact, the details are not sent, because the elements have no name property.

@akshayrawat

This comment has been minimized.

Copy link

@akshayrawat akshayrawat commented Jun 16, 2012

Ah I see. Cheers!

@ShirtlessKirk

This comment has been minimized.

Copy link

@ShirtlessKirk ShirtlessKirk commented Jul 13, 2012

You could ensure the form never gets sent even if there are implementation errors by making the button not have a type and hooking into the click event to trigger the form submit event:

<button class="submit-button">Submit Payment</button>
$(document).ready(function () {

    $('.submit-button').click(function () {
        $('#payment-form').triggerHandler('submit');
    }

    $('#payment-form').submit(function (event) {
    ...

As there is no fallback for those not running script there is no need to have HTML written in that way. Remember that forms auto-submit on Enter if there's a submit button somewhere in the form (thanks Microsoft for introducing this behaviour). Removing any submit typing of buttons and only accessing events gets around this.

This also has the advantage that you can put ids back on the form inputs should you choose, instead of classes.

@boucher

This comment has been minimized.

Copy link
Owner Author

@boucher boucher commented Jul 13, 2012

@mannyvel

This comment has been minimized.

Copy link

@mannyvel mannyvel commented Jul 26, 2012

Note that the submit-on-return is part of the HTTP 1.0 spec. It may have started with MS (I wouldn't want to blame them for this, it could have just as well been from lynx), but it's now standard.

@davidbarratt

This comment has been minimized.

Copy link

@davidbarratt davidbarratt commented Aug 13, 2012

wait.. why can't you have ids on form fields when their is a submit button? are the id's used as names?

@TopView

This comment has been minimized.

Copy link

@TopView TopView commented Aug 19, 2012

Perhaps someone knows. Can you put an id rather than class identifier in the input tags like for example,

And then change the js to: $('#card-number').val()

@TopView

This comment has been minimized.

Copy link

@TopView TopView commented Aug 19, 2012

.. sorry it wiped out my html. here is what I meant: change class="card-number" to id
="card-number"

@tvaught

This comment has been minimized.

Copy link

@tvaught tvaught commented Aug 24, 2012

This actually does not re-enable the "Process" button on IE (version 8 in my testing). What has worked for me is to replace:

$('.submit-button').removeAttr("disabled");

with:

$('.submit-button').prop("disabled", false);

There's a note about this behavior on this SO issue: http://stackoverflow.com/questions/7475715/removeattr-issue

@rajiv20

This comment has been minimized.

Copy link

@rajiv20 rajiv20 commented Aug 29, 2012

How would you pass a rails controller name in the form such that, in addition to passing the form values to Stripe server, the rails controller is called to update the customer information for my rails app. Currently, the rails controller that presents the form in the rails view is called. any code snippets would be much appreciated.

@domeri

This comment has been minimized.

Copy link

@domeri domeri commented Oct 11, 2012

How can you also add card holder's name and adress to this form. I tried it, bur doesn't work properly.

@socialblogsite

This comment has been minimized.

Copy link

@socialblogsite socialblogsite commented Nov 5, 2012

I was just about to create fields for name and address too! (peple don't like to give away credit card info if they are not sure they have logged-in or at least given their personal info! "How do they know where to deliver or whom to credit the payment to?", they would think.
Did you fix it?
Why is that failing?

@Jeremy1024

This comment has been minimized.

Copy link

@Jeremy1024 Jeremy1024 commented Dec 19, 2012

Cardholders name etc.. other fields. You could use jQuery to get your own fields from the pseudo form by ID,name or class ( Not sure why a form is even necessary really). Then use an Ajax call to send that other data to your server for later login and for general information gathering and allow Stripe to do its thing.

The customers would never be the wiser.

Or build a first step form that gathers user information,..This form would submit to the server, then redirect to the second form. Then a second form to finalize with Stripe.

@LuisCanal

This comment has been minimized.

Copy link

@LuisCanal LuisCanal commented Dec 28, 2012

How do I make the amount Field Editable ??

@tlongren

This comment has been minimized.

Copy link

@tlongren tlongren commented May 10, 2013

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

This comment has been minimized.

Copy link

@debcal2 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

This comment has been minimized.

Copy link

@benr75 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
You can’t perform that action at this time.