caboose-cms 0.4.151 → 0.5.1

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    YzY1NmViNjUxMTY5MWU3MmQ2Y2Y0Y2EyNjIwYWI3NmJlZTFlZTIwOA==
+    ODI1OTIzYTljMTc2ODg4OGFlMzExM2ViMjQ1MDc2ZjlmZTAwOTM0MA==
   data.tar.gz: !binary |-
-    NzRkZGIwZGRiZjBiOGVhZDJmMDk5MGIxNjg2MmI0MmEzMmJhZGMzYQ==
+    NzUzZjJjMTQ0NDgwZTM2YzBjMzI0NWM5NjQ3YzlmZjM1MjQxZGQ0OA==
 !binary "U0hBNTEy":
   metadata.gz: !binary |-
-    OTY3ZTgzY2JlNzdlMjlmZDJmMWQwYzA0NDVhYzAyZmI0NWIyNzA4MmNjOWFm
-    MTM5MjZmZDZlMjhjNzFhYjIyZDJmYWY5ZGY1NDU1YjUzODdjOGYyOGM0NTli
-    OGFkNTdjNmMzYmQzODc1NTEzZjU3OTY2ZjE3NDFiMzEyNWFhNTM=
+    MTIwZTE2NmVkMGRlZWIzZmEzZGIwNGNiNWZhM2NhYzZkMWIxMjg0YWNlYjdi
+    YjQzYWQ4YzQyMmM4YTkzMTJhOTlkOThlZTc2Y2ZmOTg4Y2ZlN2I0YTUzZmEy
+    ODI5ZmJjN2ZmZWJmNjliNDkxNjJhN2U1MTk3NDY4ZWEzZjRjNmU=
   data.tar.gz: !binary |-
-    NzBiMGJmYzRiOWJhZjQ0ODA4YTZhOGNkOGU5NGQwMTY0MDZlMWIyOGQxY2Iw
-    MDFkZDYxOTg4YjM2NDM5MmQ1NmJjN2JkMWYxOWU0NjEzOTEwN2FkNWM3MDJj
-    OTdlNDJhOTFkNDA5NGYxN2M2NmM3MTlkOTQ3MjM0ZjIwNTRhYmU=
+    ZGNiYjI5ZTFhODQzMDEwZWE3Y2I4MjE2ZWY2MTg4Nzk0MjNjNzRiMDIxNGVj
+    ZDRlNzhkYzRlYmE5Y2ZiNzY3N2NhZTkyODY1Nzk5M2JjZWVmM2MxYjYxODA4
+    MDBhMjAyYTY4ZWU3YWUwOGI4MzhkODc2MmY4NTVjNDgxNWE5MTA=

data/app/assets/javascripts/caboose/admin_products.js

@@ -0,0 +1,79 @@
+
+function delete_product(product_id, confirm)
+{
+  if (!confirm)
+  {
+    var p = $('<p/>')
+      .addClass('note error')
+      .append("Are you sure you want to delete the product?<br />This can't be undone.")
+      .append("<br /><br />")
+      .append($("<input/>").attr('type', 'button').val('Yes').click(function() { delete_product(product_id, true); }))
+      .append(' ')
+      .append($("<input/>").attr('type', 'button').val('No').click(function() { cancel_delete_product(product_id); })); 
+    modal.autosize(p);      
+    return;
+  }
+  modal.autosize("<p class='loading'>Deleting product...</p>");
+  $.ajax({
+    url: '/admin/products/' + product_id,
+    type: 'delete',
+    success: function(resp) {
+      if (resp.error)
+        modal.autosize("<p class='note error'>" + resp.error + "</p>");
+      if (resp.redirect)
+        window.location = resp.redirect;
+    }
+  });
+}
+
+function cancel_delete_product(product_id)
+{
+  var p = $('<p/>').append($("<input/>").attr('type', 'button').val('Delete this product').click(function() { delete_product(product_id); }));
+  modal.autosize(p);  
+}
+
+function add_variant(product_id)
+{
+  modal.autosize("<p class='loading'>Adding variant...</p>");
+	
+  $.ajax({
+    url: '/admin/products/' + product_id + '/variants',
+    type: 'post',
+    success: function(resp) {
+      if (resp.error)   modal.autosize("<p class='note error'>" + resp.error + "</p>");
+      if (resp.refresh) window.location.reload(true);
+    }
+  })
+}
+
+function delete_variant(variant_id, confirm)
+{
+  if (!confirm)
+  {
+    var p = $('<p/>')
+      .addClass('note error')
+      .append("Are you sure you want to delete the variant?<br />This can't be undone.<br /><br />")
+      .append($("<input/>").attr('type', 'button').val('Confirm').click(function() { delete_variant(variant_id, true); }))
+      .append(' ')
+      .append($("<input/>").attr('type', 'button').val('Cancel').click(function() { cancel_delete_variant(variant_id); }));    
+    modal.autosize(p);
+    return;
+  }
+  modal.autosize("<p class='loading'>Deleting product...</p>");
+  $.ajax({
+    url: '/admin/variants/' + variant_id,
+    type: 'delete',
+    success: function(resp) {
+      if (resp.error)
+        modal.autosize("<p class='note error'>" + resp.error + "</p>");
+      if (resp.redirect)
+        window.location = resp.redirect;
+    }
+  });
+}
+
+function cancel_delete_variant(variant_id)
+{
+  var link = $('<a/>').attr('href','#').click(function(e) { e.preventDefault(); delete_variant(variant_id); });    
+  modal.autosize(link);
+}

data/app/assets/javascripts/caboose/application.js

@@ -4,8 +4,9 @@
 //= require jquery
 //= require jquery_ujs
 //= require colorbox-rails
+//= require underscore
 //= require caboose/jquery.detect
 //= require caboose/jquery.placeholder
 //= require caboose/modal_integration
 //= require caboose/main
-//= require_tree ../../templates
+//= require_tree ../../templates

data/app/assets/javascripts/caboose/cart.js

@@ -0,0 +1,168 @@
+//
+// Cart
+//
+
+Caboose.Store.Modules.Cart = (function() {
+  var self = {
+    templates: {
+      lineItems: JST['caboose/cart/line_items'],
+      addToCart: JST['caboose/cart/add_to_cart']
+    }
+  };
+  
+  //
+  // Initialize
+  //
+  
+  self.initialize = function() {
+    self.renderAddToCart();
+    self.renderItemCount();
+    self.$cart = $('#cart');
+    if (!self.$cart.length) return false;
+    self.$cart.on('click', '#remove-from-cart', self.removeHandler);
+    self.$cart.on('keyup', 'input', self.updateHandler);
+    self.render();
+  };
+  
+  //
+  // Set Variant
+  //
+  
+  self.setVariant = function(variant) {
+    if (self.$addToCart) {
+      self.$addToCart.find('input[name=variant_id]').val(variant ? variant.id : "");
+      self.$addToCart.trigger('change');
+    }
+  };
+  
+  //
+  // Render
+  //
+  
+  self.render = function() {
+    $.get('/cart/items', function(response) {
+      self.$cart.empty().html(self.templates.lineItems({ order: response.order }));
+      self.$cart.removeClass('loading');
+    });
+  };
+  
+  self.renderAddToCart = function() {
+    self.$addToCart = $('#add-to-cart');
+    if (!self.$addToCart.length) return false;
+    self.$addToCart.empty().html(self.templates.addToCart());
+    $('input[name=quantity]', self.$addToCart).on('keyup', self.quantityKeyupHandler);
+    $('form', self.$addToCart).on('submit', self.addHandler);
+  };
+  
+  self.renderItemCount = function(itemCount) {
+    var $link = $('#cart-link, .cart-link');
+    if (!$link.length) return false;
+    
+    function setCount(count) {
+      if ($link.children('i') && count < 1) {
+        $link.children('i').remove();
+      } else if ($link.children('i').length) {
+        $link.children('i').empty().text(count);
+      } else {
+        $link.append($('<i/>').text(count));
+      }
+    };
+    
+    if (itemCount) {
+      setCount(itemCount);
+    } else {
+      $.get('/cart/item-count', function(response) {
+        setCount(response.item_count);
+      });
+    }
+  };
+  
+  //
+  // Event Handlers
+  //
+  
+  self.quantityKeyupHandler = function(event) {
+    var $quantity = $(event.target);
+    $quantity.val($quantity.val().match(/\d*\.?\d+/));
+  };
+  
+  self.addHandler = function(event) {
+    event.preventDefault();
+    var $form = $(event.target);
+    
+    if ($form.find('input[name=variant_id]').val().trim() == "") {
+      alert('Must select all options');
+    } else {
+      $.ajax({
+        type: $form.attr('method'),
+        url: $form.attr('action'),
+        data: $form.serialize(),
+        success: function(response) {
+          if (response.success) {
+            self.renderItemCount(response.item_count);
+            if (self.$addToCart.length) self.$addToCart.trigger('added');
+            
+            if (!self.$addToCart.find('.message').length) {
+              self.$addToCart.append($('<p/>').hide().addClass('message').text('Successfully added to cart'));
+              self.$addToCart.find('.message').fadeIn();
+              Caboose.Store.Modules.Product.$product.trigger('added-to-cart');
+              
+              setTimeout(function() {
+                self.$addToCart.find('.message').fadeOut(function() { $(this).remove() });
+              }, 1000);
+            }
+          } else {
+            alert(response.errors[0]);
+          }
+        }
+      });
+    }
+  };
+  
+  self.updateHandler = function(event) {
+    var $quantity = $(event.target)
+      , $lineItem = $quantity.parents('li').first();
+    
+    $quantity.val($quantity.val().match(/\d*\.?\d+/));
+    if ($quantity.val() == "") return false;
+    
+    delay(function() {
+      $.ajax({
+        type: 'put',
+        url: '/cart/items/' + $lineItem.data('id'),
+        data: { quantity: $quantity.val() },
+        success: function(response) {
+          if (response.success) {
+            $lineItem.find('.price').empty().text('$' + response.line_item.price);
+            if (self.$cart.find('.subtotal').length) self.$cart.find('.subtotal').empty().text('$' + response.order_subtotal);
+          } else {
+            alert(response.errors[0]);
+          }
+        }
+      });
+    }, 1000);
+  };
+  
+  self.removeHandler = function(event) {
+    var $lineItem = $(event.target).parents('li').first();
+    
+    $.ajax({
+      type: 'delete',
+      url: '/cart/items/' + $lineItem.data('id'),
+      success: function(response) {
+        if (response.success) {
+          self.render();
+          self.renderItemCount(response.item_count);
+        }
+      }
+    });
+  };
+  
+  self.redirectHandler = function(event) {
+    event.preventDefault();
+    window.location = $(event.target).attr('href');
+  };
+  
+  return self;
+}).call(Caboose.Store);
+

data/app/assets/javascripts/caboose/checkout.js

@@ -0,0 +1,151 @@
+//
+// Checkout
+//
+// :: Initialize
+// :: Index
+// :: Shipping
+// :: Payment
+
+var CabooseCheckout = function() {
+  var self = this;
+  
+  //
+  // Initialize
+  //
+  
+  self.initialize = function() {
+    
+    // Ensure that a user is logged in
+    //if (!Caboose.loggedIn && window.location.pathname.substring(0, 9) == '/checkout') Caboose.login();
+    console.log('foo');
+    
+    // Route to correct method
+    switch (window.location.pathname) {
+      case '/checkout':          self.index();    break;
+      case '/checkout/shipping': self.shipping(); break;
+      case '/checkout/billing':  self.billing();  break;
+    }
+  };
+  
+  //
+  // Index
+  //
+  
+  self.index = function() {
+    
+    // Ensure use as billing is automatically checked
+    $('#use-as-billing').prop('checked', true);
+    
+    // Show/hide the billing form
+    $('#use-as-billing').on('change', function(event) {
+      if ($('#use-as-billing')[0].checked) {
+        $('#billing').hide()
+      } else {
+        $('#billing').show()
+      }
+    });
+    
+    // Update address info
+    $('form#address').on('submit', function(event) {
+      event.preventDefault();
+      
+      $.ajax({
+        url: '/checkout/address',
+        type: 'put',
+        data: $(event.delegateTarget).serialize(),
+        success: function(response) {
+          if (response.error)    $('#message').html("<p class='note error'>" + response.error + "</p>");
+          if (response.redirect) window.location = response.redirect;
+        }
+      });
+    });
+  };
+  
+  //
+  // Shipping
+  //
+  
+  self.shipping = function() {
+    $('form#shipping-rates').one('submit', function(event) {
+      event.preventDefault();
+      
+      var $form = $(event.delegateTarget)
+        , code  = $('input[name=shipping_method_code]:checked', $form).val()
+        , name  = $('input#shipping-method-' + code + '-name', $form).val()
+        , price = $('input#shipping-method-' + code + '-price', $form).val();
+        
+      $.ajax({
+        url: '/checkout/shipping-method',
+        type: 'put',
+        data: {
+          shipping_method: {
+            code: code,
+            name: name,
+            price: price
+          }
+        },
+        success: function(response) {
+          if (response.error)    $('#message').html("<p class='note error'>" + response.error + "</p>");
+          if (response.redirect) window.location = response.redirect;
+        }
+      });
+    });
+  };
+  
+  //
+  // Billing
+  //
+  
+  self.billing = function() {
+    window.relay = function(authorized) {
+      if (authorized) {
+        window.location.replace('/checkout/thanks');
+      } else {
+        window.location.replace('/checkout/error');
+      }
+    };
+    
+    $('#billing-expiration-month, #billing-expiration-year').on('change', function(event) {
+      $('input[name=billing-cc-exp]').val($('#billing-expiration-month').val() + $('#billing-expiration-year').val());
+    });
+    
+    $('#billing-form').one('submit', function(e) {
+      e.preventDefault();
+      
+      // TODO this is a temporary fix.. for some reason the one submit event is getting registered multiple times
+      if ($('#billing-confirmation').length) return false;
+      
+      $('input[name=billing-cc-exp]').val($('#billing-expiration-month').val() + $('#billing-expiration-year').val());
+      
+      var $form    = $(e.delegateTarget)
+        , cc_num   = $form.find('input[name=billing-cc-number]').val()
+        , cc_exp   = $form.find('input[name=billing-cc-exp]').val()
+        , total    = $('input#billing-amount').val()
+        , $confirm = $(document.createElement('div'));
+      
+      $confirm.attr('id', 'billing-confirmation');
+      $confirm.append( $('</p>').attr('style', 'margin-bottom: 0').html('<strong>Credit Card Number</strong>: xxxx-xxxx-xxxx-' + cc_num.replace(/\-\ /g, '').substr(-4)) );
+      $confirm.append( $('</p>').attr('style', 'margin-bottom: 0').html('<strong>Expiration Date</strong>: ' + cc_exp.substr(0, 2) + '/' + cc_exp.substr(2, 2)) );
+      $confirm.append( $('</p>').html('<strong>Total</strong>: $' + total) );
+      $confirm.append( $('</p>').attr('style', 'margin: 24px 0').html('<a href="/checkout/billing">Edit billing info</a>') );
+      $confirm.append( $('</p>').html('<input id="submit-billing" type="button" value="Continue >" />') );
+      
+      $form.after($confirm);
+      $form.hide();
+      
+      $confirm.find('#submit-billing').on('click', function(e) {
+        e.preventDefault();
+        $form.submit();
+        $confirm.after( $('</p>').addClass('loading').text('Authorizing transaction..') );
+        $confirm.hide();
+      });
+    });
+  };
+  
+  // Init and return
+  $(document).ready(self.initialize);
+  return self;
+};
+
+Caboose.Checkout = new CabooseCheckout();
+

data/app/assets/javascripts/caboose/checkout_module.js

@@ -0,0 +1,312 @@
+//
+// Checkout
+//
+
+Caboose.Store.Modules.Checkout = (function() {
+
+  // Steps
+  // Step 1: Present non-editable cart and login/register/guest buttons.
+  // Step 2: Present shipping address form.
+  // Step 3: Present shipping options.
+  // Step 4: Present credit card form.
+  // Step 5: Thank you.
+    
+  self = {
+    templates: {
+      address:    JST['caboose/checkout/address'],
+      login:      JST['caboose/checkout/login'],
+      payment:    JST['caboose/checkout/payment'],
+      lineItems:  JST['caboose/checkout/line_items'],
+      shipping:   JST['caboose/checkout/shipping'],
+      forms: {
+        signin:   JST['caboose/checkout/forms/signin'],
+        register: JST['caboose/checkout/forms/register'],
+        guest:    JST['caboose/checkout/forms/guest']
+      }
+    }
+  };
+  
+  //
+  // Initialize
+  //
+  
+  self.initialize = function() {    
+    switch (window.location.pathname.replace(/\/$/, "")) {
+      case '/checkout':
+      case '/checkout/step-one': self.step = 1; break;
+      case '/checkout/step-two': self.step = 2; break;
+    }
+    
+    self.$checkout = $('#checkout')
+    if (!self.$checkout.length) return false;
+    self.loggedIn = $('body').data('logged-in');
+    
+    // TODO refactor this
+    if (self.loggedIn) {
+      $.post('/checkout/attach-user', function(response) {
+        self.fetch(self.render);
+      });
+    } else {
+      self.fetch(self.render);
+    }
+    
+    self.bindEventHandlers();
+  };
+  
+  //
+  // Fetch items from the cart
+  //
+  
+  self.fetch = function(callback) {
+    $.get('/cart/items', function(response) {
+      self.order = response.order
+      
+      if (self.step == 2) {
+        $.get('/checkout/shipping', function(response) {
+          self.shippingRates = response.rates;
+          self.selectedRate = response.selected_rate;
+          callback();
+        });
+      } else {
+        callback();
+      }
+    });
+  };
+  
+  //
+  // Events
+  //
+  
+  self.bindEventHandlers = function() {
+    self.$checkout.on('click' , '[data-login-action]', self.loginClickHandler);
+    self.$checkout.on('submit', '#checkout-login form', self.loginSubmitHandler);
+    self.$checkout.on('change', 'input[type=checkbox][name=use_as_billing]', self.useAsBillingHandler);
+    self.$checkout.on('click' , '#checkout-continue button', self.continueHandler);
+    self.$checkout.on('click' , '#checkout-complete button', self.completeHandler);
+    self.$checkout.on('change', '#checkout-shipping select', self.shippingChangeHandler);
+    self.$checkout.on('change', '#checkout-payment form#payment select', self.expirationChangeHandler);
+    self.$checkout.on('submit', '#checkout-payment form#payment', self.paymentSubmitHandler);
+  };
+  
+  $('.login-choices button').removeClass('selected');
+  self.loginClickHandler = function(event) {
+    $section = self.$login.children('section');
+    
+    switch ($(event.target).data('login-action')) {
+      case 'signin'  : $section.slideUp(400, function() { $section.empty().html(self.templates.forms.signin()  ).slideDown() }); $('#signin_button'  ).addClass('selected'); break;
+      case 'register': $section.slideUp(400, function() { $section.empty().html(self.templates.forms.register()).slideDown() }); $('#register_button').addClass('selected'); break;
+      case 'continue': $section.slideUp(400, function() { $section.empty().html(self.templates.forms.guest()   ).slideDown() }); $('#continue_button').addClass('selected'); break;
+    };
+  };
+  
+  self.loginSubmitHandler = function(event) {
+    event.preventDefault();
+    var $form = $(event.target);
+    
+    $.ajax({
+      type: $form.attr('method'),
+      url: $form.attr('action'),
+      data: $form.serialize(),
+      success: function(response) {
+        if (response.error || (response.errors && response.errors.length > 0)) {
+          if ($form.find('.message').length) {
+            $form.find('.message').empty().addClass('error').text(response.error || response.errors[0]);
+          } else {
+            $form.append($('<span/>').addClass('message error').text(response.error || response.errors[0]));
+          }
+        } else {
+          if (response.logged_in) {
+            self.$login.after($('<p/>').addClass('alert').text('You are now signed in').css('text-align', 'center')).remove();
+            $.post('/checkout/attach-user');
+          } else {
+            self.$login.after($('<p/>').addClass('alert').text('Email successfully saved').css('text-align', 'center')).remove();
+          }
+        }
+        
+        self.fetch(self.render);
+      }
+    });
+  };
+  
+  self.useAsBillingHandler = function(event) {
+    if (event.target.checked) {
+      self.$address.find('#billing').hide();
+    } else {
+      self.$address.find('#billing').show();
+    }
+  };
+  
+  self.continueHandler = function(event) {
+    $form = self.$address.find('form');
+    
+    if (!self.order.email && !self.order.customer_id) {
+      alert('Please sign in, register or choose to continue as a guest');
+      return false;
+    }
+    
+    $.ajax({
+      type: $form.attr('method'),
+      url: $form.attr('action'),
+      data: $form.serialize(),
+      success: function(response) {
+        if (response.success) {
+          window.location = '/checkout/step-two';
+        } else {
+          $form.find('.message').remove();
+          $form.find('#' + response.address + ' h3').append($('<span/>').addClass('message error').text(response.errors[0]));
+        }
+      }
+    });
+  };
+  
+  self.shippingChangeHandler = function(event) {
+    if (event.target.value == "") return false;
+    self.$checkout.addClass('loading');
+    
+    $.ajax({
+      url: '/checkout/shipping',
+      type: 'put',
+      data: { shipping_method_code: event.target.value },
+      success: function(response) {
+        if (response.success) {
+          self.order = response.order;
+          self.selectedRate = response.selected_rate;
+          self.render();
+        }
+      }
+    });
+  };
+  
+  self.expirationChangeHandler = function(event) {
+    var $form = $('#checkout-payment #payment')
+      , month = $form.find('select[name=month]').val()
+      , year = $form.find('select[name=year]').val();
+    
+    $form.find('#expiration').val(month + year);
+  };
+  
+  self.completeHandler = function(event) {
+    if (self.$payment.length) self.$payment.find('form').submit();
+  };
+  
+  self.paymentSubmitHandler = function(event) {
+    event.preventDefault();
+    
+    if (!self.order.shipping_method_code) {
+      alert('Please choose a shipping method');
+    } else {
+      self.$checkout.off('submit', '#checkout-payment form#payment').addClass('loading');
+      $(event.target).submit();
+    }
+  };
+  
+  self.relayHandler = function(event) {
+    var $iframe = $(event.target)
+      , $form = self.$payment.find('form')
+      , $response = $iframe.contents().find('#response');
+    
+    if (!$response.length || !$form.length) return false;
+    var response = JSON.parse($iframe.contents().find('#response').html());
+    console.log(response);
+    if (response.success == true) {
+      window.location = '/checkout/thanks';
+    } else {
+      alert(response.message);
+      self.render();
+    }
+  };
+  
+  //
+  // Render
+  //
+  
+  self.render = function() {
+    var renderFunctions = [];
+        
+    if (self.step == 1) {      
+      renderFunctions.push(self.renderLineItems);
+      renderFunctions.push(self.renderLogin);
+      renderFunctions.push(self.renderAddress);
+    } else {
+      renderFunctions.push(self.renderShipping);
+      renderFunctions.push(self.renderLineItems);
+      renderFunctions.push(self.renderPayment);
+    }
+    
+    _.each(renderFunctions, function(renderFunction, index) {
+      var finished = index == (renderFunctions.length - 1)
+      
+      renderFunction(function() {
+        if (finished) self.$checkout.removeClass('loading');
+      });
+    });
+  };
+  
+  self.renderLineItems = function(callback) {
+    self.$lineItems = self.$checkout.find('#checkout-line-items');
+    if (!self.$lineItems.length) return false;
+    self.$lineItems.empty().html(self.templates.lineItems({ order: self.order }));
+    if (callback) callback();
+  };
+  
+  self.renderLogin = function(callback) {
+    self.$login = self.$checkout.find('#checkout-login');
+    if (self.loggedIn) self.$login.remove();
+    if (self.loggedIn || !self.$login.length) return false;
+    self.$login.html(self.templates.login());
+    //if (!self.order.email) self.$login.find('button[data-login-action="signin"]').click();
+    if (callback) callback();
+  };
+  
+  self.renderAddress = function(callback) {
+    self.$address = self.$checkout.find('#checkout-address');
+    if (!self.$address.length) return false;
+    
+    self.$address.empty().html(self.templates.address({
+      shippingAddress: self.order.shipping_address,
+      billingAddress: self.order.billing_address,
+      states: window.States
+    }));
+    
+    if (callback) callback();
+  };
+  
+  self.renderShipping = function(callback) {
+    self.$shipping = self.$checkout.find('#checkout-shipping');
+    if (!self.$shipping.length) return false;
+    
+    self.$shipping.empty().html(self.templates.shipping({
+      rates: self.shippingRates,
+      selectedRate: self.selectedRate
+    }));
+    
+    if (callback) callback();
+  };
+  
+  self.renderPayment = function(callback) {
+    self.$payment = self.$checkout.find('#checkout-payment');
+    if (!self.$payment.length) return false;
+    self.$checkout.addClass('loading');
+    
+    $.get('/checkout/payment', function(response) {
+      var serializedForm = self.$payment.find('form').serialize();
+      self.$payment.empty().html(self.templates.payment({ form: response }));
+      
+      if (serializedForm.length > 0) {
+        _.each(serializedForm.split('&'), function(serializedField) {
+          var name = serializedField.split('=')[0]
+            , value = serializedField.split('=')[1];
+          
+          self.$payment.find('form [name="' + name + '"]').val(value);
+        });                               
+      }
+      
+      self.expirationChangeHandler();
+      self.$checkout.removeClass('loading');
+      self.$payment.find('iframe').on('load', self.relayHandler);
+    });
+  };
+  
+  return self
+}).call(Caboose.Store);
+