What is Glass Register?

Stripe is awesome for creating donation forms, but there's a gap in what they offer: Glass Register is there to fill the middle ground between Stripe Checkout and coding from scratch against Stripe's API. It's for when you want complete control of the user experience, down to the pixel and millisecond, but don't want to re-invent the wheel of common interactions (e.g. inline feedback), or the backend (e.g. charge processing and a UI for your gift processing department).

Glass Register's philosophy is to provide you with great tools, but get out of your way if you ask it to. For instance, with form warnings (i.e. after the donor has tried to submit the form with bad/incomplete fields), you can use the built-in functionality that adds classes to your warning HTML elements, or you can register a callback that tells you which fields are invalid and handle it yourself, or any combination of the two.

It also works with your existing web dev workflow. Create your form however you like, put two <script> tags in your page head section, and then add data-* attributes to your input elements which describe what behaviour you'd like from them (e.g. which validator to use). The rest of the configuration is either via Javascript (mostly by registering callbacks for events), or the dashboard.

Glass Register provides:

Charge processing backend


Javascript library

Here's a skeleton example of the source code for a checkout built using Glass Register (visual aspects like labels and styling omitted):


<!DOCTYPE html>
  <!-- The following two tags enable Stripe and pull in the Glass Register library code -->
  <script src="https://js.stripe.com/v2/"></script>
  <script src="http://api.glassregister.io/apps/donate?op=js&clientId=sample&version=1"></script>
  <!-- This is the code for this checkout - see the next section -->
  <script src="checkout.js"></script>
  <!-- The input fields -->
  <input data-field="_amount"

  <input data-field="_ccNum"

  <input data-field="_ccExp"

  <input data-field="_ccCvc"

  <input data-field="_firstName"></br>

  <!-- Inline feedback. Once input focus has left the field, the function referenced in
       "data-validate" gets called with the value, and either the "gr-invalid" or "gr-valid"
       class gets added to this div -->
  <div class="feedback" data-feedback-for="_ccNum,_ccExp,_ccCvc">&nbsp;</div><br>
  <!-- Here's a barebones example of how to style a feedback element -->
    .feedback.gr-valid { background-color: green; }
    .feedback.gr-invalid { background-color: red; }

  <!-- Form errors.  Once the donate button has been pressed, all the fields are validated
       and the "gr-warning" class is added to those warnings that fail validation.  Once
       the field has been edited in any way the class is removed -->
  <div class="warning" data-warning-for="_amount">[Error text]</div><br>
  <div class="warning" data-warning-for="_ccNum">[Error text]</div><br>
  <div class="warning" data-warning-for="_ccExp">[Error text]</div><br>
  <div class="warning" data-warning-for="_ccCvc">[Error text]</div><br>
  <!-- Here's a barebones example of how to style a the warning elements -->
    .warning { display: none; }
    .warning.gr-warning { display: block; }

  <!-- The donate button -->
  <button id="donate">Donate</button>


// Ready: initializes the Glass Register Javascript code, and adds
// an event handler for when the donor clicks the donate button
$(function() {
    var donateFn = grInit({
        frequency: 'oneTime',
        preCharge: preChargeFn,
        chargeError: chargeErrorFn,
        chargeSuccess: chargeSuccessFn,
    $('#donate').on('click', donateFn);

// Called just before the form data gets sent to the Glass Register
// servers for transaction processing 
function preChargeFn(form, valids) {
    // Disable the donate button while we're processing

// Called when there's some kind of error
function chargeErrorFn(result) {
    if (result.err == 'card-error') {
        // If it's a card error, let them try again
        alert('Please check your credit card information!');
    } else {
        // If it's a big error (e.g. network connection failed)

// Called on successful donation
function chargeSuccessFn(form) {
    $('body').html('Thank you for your donation ' + form._firstName + '!');