Bison and Stripe integration

gistfile1.html

<div id="payment-errors">
{{ bison:checkout_form_errors }}
  {{ if missing }}
    <p>You are missing the following fields.</p>
    <ul>
    {{ missing }}
      <li>The {{ field_label }} field {{ message }}</li>
    {{ /missing }}
    </ul>
  {{ endif }}
  {{ if gateway }}
    <p>Your payment couldn't be processed:</p>
    <ul>
    {{ gateway }}
      <li><b>{{ field }}:</b> {{ message }}</li>
    {{ /gateway }}
    </ul>
  {{ endif }}
{{ /bison:checkout_form_errors }}
</div>

{{ bison:checkout_form return="/order-complete" }}
  <fieldset>
    <legend>Payment Details</legend>
    <p>
      <label>Card Number</label><br />
      <input type="text" data-stripe="number" />
    </p>
    <p>
      <label>CVV</label><br />
      <input type="text" data-stripe="cvc" />
    </p>
    <p>
      <label>Expiration (MM/YYYY)</label><br />
      <input type="text" size="2" data-stripe="exp-month" /> 
      <input type="text" size="4" data-stripe="exp-year" />
    </p>
  </fieldset>
  <p><input type="submit" value="Process Payment" id="submit-button" /></p>
{{ /bison:checkout_form }}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//js.stripe.com/v2/"></script>
<script>
  Stripe.setPublishableKey('YOUR_PUBLISHABLE_KEY');

  var stripeResponseHandler = function(status, response) {
    var $form = $('#checkout-form');

    if (response.error) {
      // Show the errors on the form
      $('#payment-errors').text(response.error.message);
      $('#submit-button').prop('disabled', false);
    } else {
      var token = response.id;
      $form.append($('<input type="hidden" name="token" />').val(token));
      $form.get(0).submit();
    }
  };

  $(function() {
    $('#checkout-form').submit(function(e) {
      var $form = $(this);
      $('#submit-button').prop('disabled', true);
      Stripe.createToken($form, stripeResponseHandler);
      return false;
    });
  });
</script>