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 @ https://gist.github.com/briancollins/6365455 //--> | |
<!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/v2/"></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 | |
// accessibility hotness added by KLG, to provide focus to errors and give alert role | |
$form.find('.payment-errors') | |
.text(response.error.message) | |
.prepend('<h2>The Following Errors Must Be Corrected:</h2>') | |
.attr({ | |
role : 'alert', | |
tabindex : '-1' | |
}) | |
.focus(); | |
$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 for="card_number"> <span>Card Number</span> | |
<input type="text" size="20" data-stripe="number" name="card_number" id="card_number" /> | |
</label> | |
</div> | |
<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" /> | |
</label> | |
</div> | |
<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" /> | |
</div> | |
<button type="submit"> | |
Submit Payment | |
</button> | |
</form> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment