behavior.js

(function($) {
  "use strict"

  awcp.behaviors.checkout = function(container) {

    var behavior = {

      init: function() {
        behavior.submitBtn = $('button.btn.btn-default');
        behavior.addClickListener();
      },

      addClickListener: function() {
        container.on("submit", function(e) {
          e.preventDefault();

          behavior.setupForms();

          $.ajax({
            type:     'POST',
            url:      container.prop('action'),
            data:     container.serialize(),
            dataType: 'JSON',
            success:  function(response) {
              console.log(response);
              var transactionId = response.order.transaction_id;

              // Invokes the corresponding redirection path based on the calling form
              behavior[container.prop("id")](transactionId);
            },
            error: function (response) {
              var errors = response.responseJSON.errors

              // Inserts errors before a div with the id of the error container.
              // For example, given errors.add(:order, "Message") errors will be inserted before div#order
              $.each(errors, function(k, error) {
                $('<div class="alert-danger">'+error[0]+'</div>').insertBefore('#' + k);
              });

              behavior.restoreFormsOnError();
            }
          });
        });
      },

      new_checkout_cart: function (transactionId) {
        window.location = 'orders/'+transactionId+'/summary';
      },

      new_checkout_donation: function (transactionId) {
        window.location = 'donations/'+transactionId+'/summary';
      },

      new_checkout_membership: function (transactionId) {
        window.location = 'memberships/'+transactionId+'/summary';
      },

      setupForms: function() {
        behavior.submitBtn.find('span').text('Processing your order...');
        behavior.submitBtn.prop('disabled', true);
        behavior.submitBtn.removeClass('btn-default');
        $('.alert-danger').remove();
        $('.spinner').show();

      },

      restoreFormsOnError: function() {
        behavior.submitBtn.find('span').text('Submit Registration and Payment');
        behavior.submitBtn.prop('disabled', false);
        behavior.submitBtn.addClass('btn-default');
        $('.spinner').hide();

        var errorPos = $("div.alert-danger:first");
        $('html,body').animate({scrollTop: errorPos.offset().top},'slow');
      }
    };

    behavior.init();
  }

})(jQuery)