Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
I really hate seeing "examples" that contain accessibility errors, esp. when they're so easy to fix. This forks a tutorial for the Stripe API and makes some relatively minor adjustments to make it much more accessible. Still not perfect but way better than the original.
<!--// Fixed for accessibility by Karl Groves 22-Oct 2013. Original Gist @ //-->
<!DOCTYPE html>
<html lang="en">
<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=""></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
var stripeResponseHandler = function(status, response) {
var $form = $('#payment-form');
if (response.error) {
// Show the errors on the form
// accessibility hotness added by KLG, to provide focus to errors and give alert role
.prepend('<h2>The Following Errors Must Be Corrected:</h2>')
role : 'alert',
tabindex : '-1'
$form.find('button').prop('disabled', false);
} else {
// token contains id, last4, and card type
var token =;
// 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
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;
<h1>Charge $10 with Stripe</h1>
<form action="" method="POST" id="payment-form">
<span class="payment-errors"></span>
<div class="form-row">
<label for="card_number"> <span>Card Number</span>
<input type="text" size="20" data-stripe="number" name="card_number" id="card_number" />
<div class="form-row">
<label for="card_cvc"> <span>CVC</span>
<input type="text" size="4" data-stripe="cvc" name="card_cvc" id="card_cvc" />
<div class="form-row">
<span>Expiration (MM/YYYY)</span>
<input type="text" size="2" data-stripe="exp-month" name="exp-month" id="exp-month" aria-label="Card Expiration: Month. Must be 2 digits" />
<span> / </span>
<input type="text" size="4" data-stripe="exp-year" name="" id="" aria-label="Card Expiration: Year. Must be 4 digits" />
<button type="submit">
Submit Payment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment