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