Balanced payment form

gistfile1.mustache

{% extends "base_site.html" %}

{% block title %}Payment Processing{% endblock %}
{% block js %}


   <script type="text/javascript" src="https://js.balancedpayments.com/v1/balanced.js"/>
   <script type="text/javascript">
      var marketplaceUri = '/v1/marketplaces/TEST-MP2CSIcjO337fwEoqBrlvB5I';

      var debug = function (tag, content) {
         $('<' + tag + '>' + content + '</' + tag + '>').appendTo('#result');
      };

      try {
         balanced.init(marketplaceUri);
      } catch (e) {
         debug('code', 'You need to set the marketplaceUri variable');
      }

      function balancedCallback(response) {
         var tag = (response.status < 300) ? 'pre' : 'code';
         debug(tag, JSON.stringify(response));
         switch (response.status) {
            case 201:
               // response.data.uri == uri of the card resource, submit to your server
            case 400:
            case 403:
               // missing/malformed data - check response.error for details
               break;
            case 402:
               // we couldn't authorize the buyer's credit card - check response.error for details
               break;
            case 404:
               // your marketplace URI is incorrect
               break;
            default:
               // we did something unexpected - check response.error for details
               break;
         }
      }

      var tokenizeCard = function(e) {
         e.preventDefault();

         var $form = $('form#payment');
         var cardData = {
            card_number: $form.find('[name="card_number"]').val(),
            expiration_month: $form.find('[name="expiration_month"]').val(),
            expiration_year: $form.find('[name="expiration_year"]').val(),
            security_code: $form.find('[name="security_code"]').val()
         };

         balanced.card.create(cardData, balancedCallback);
      };

      $('#payment').submit(tokenizeCard);

      if (window.location.protocol === 'file:') {
         alert("balanced.js does not work when included in pages served over file:// URLs. Try serving this page over a webserver. Contact support@balancedpayments.com if you need assistance.");
      }
   </script>


{% endblock %}

{% block content %}

<div class="creation-header"><h1>Payment Information</h1></div>
   <form class="form-horizontal" id="payment">
      <div>
         <label>Card Number</label>
         <input name="card_number" autocomplete="off">
      </div>
      <div>
         <label>Expiration</label>
         <input name="expiration_month" placeholder="MM"> / <input name="expiration_year" placeholder="YYYY">
      </div>
      <div>
         <label>Security Code</label>
         <input name="security_code" placeholder="3 digit code" autocomplete="off">
      </div>
      <div class="creation-footer">
         <button class="btn btn-large btn-primary">Submit Payment Data</button>
      </div>
   </form>
<div id="result"></div>


{% endblock %}