Skip to content

Instantly share code, notes, and snippets.

@maccman

maccman/StripeTutorialPage.html

Forked from boucher/StripeTutorialPage.html
Last active February 20, 2020 13:56
Show Gist options
  • Save maccman/4540703 to your computer and use it in GitHub Desktop.
Save maccman/4540703 to your computer and use it in GitHub Desktop.
Download ZIP
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>
<!-- The required Stripe lib -->
<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.9.1/jquery.min.js"></script>
<script type="text/javascript">
// This identifies your website in the createToken call below
Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY');
var stripeResponseHandler = function(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
$form.find('.payment-errors').text(response.error.message);
$form.find('button').prop('disabled', false);
} else {
// 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" />').val(token));
// and re-submit
$form.get(0).submit();
}
};
jQuery(function($) {
$('#payment-form').submit(function(e) {
var $form = $(this);
// Disable the submit button to prevent repeated clicks
$form.find('button').prop('disabled', true);
Stripe.createToken($form, stripeResponseHandler);
// Prevent the form from submitting with the default action
return false;
});
});
</script>
</head>
<body>
<h1>Charge $10 with Stripe</h1>
<form action="" method="POST" id="payment-form">
<span class="payment-errors"></span>
<div class="form-row">
<label>
<span>Card Number</span>
<input type="text" size="20" data-stripe="number"/>
</label>
</div>
<div class="form-row">
<label>
<span>CVC</span>
<input type="text" size="4" data-stripe="cvc"/>
</label>
</div>
<div class="form-row">
<label>
<span>Expiration (MM/YYYY)</span>
<input type="text" size="2" data-stripe="exp-month"/>
</label>
<span> / </span>
<input type="text" size="4" data-stripe="exp-year"/>
</div>
<button type="submit">Submit Payment</button>
</form>
</body>
</html>
@jeremyricketts
Copy link

Does this need to be updated from:

<script type="text/javascript" src="https://js.stripe.com/v1/"></script>

to:

<script type="text/javascript" src="https://js.stripe.com/v2/"></script>

?

@jonfreeland
Copy link

I believe so, as seen in their official documentation: https://stripe.com/docs/stripe.js#createToken

@tlongren
Copy link

Yes, it needs updated.

@jaxthecat
Copy link

Is there a sample form anywhere for stripe that asks the user one of the most important things, their contact email and telephone??

I can see how to add address fields using data-address in the form for checkout.js but no way to add contact telephone or email??

@sheriffderek
Copy link

I found this outline helpful. Thank you. Does anyone know of any resources that can help me add a unit count? I have one product, but I would like to have the option to buy 2, 3, 4 etc. - This seems like it would be obvious, but I don't see anything in the documentation.

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