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');
      };

      function balancedCallback(response) {

         console.log('callback!');
         console.log(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) {
         console.log('tokenizeCard called');
         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()
         };

         console.log('calling create card');
         balanced.card.create(cardData, balancedCallback);
      };

      $(function () {
          balanced.init(marketplaceUri);
          $('#payment').submit(tokenizeCard);
          console.log('initialized here');
      })();

   </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 %}