embedding.js

/**
 * This is example code that shows how you might use the payment form from within
 * your application. I've annotated it with comments throughout to clarify its usage.
 */
$(document).ready(function() {
  // Construct the payments object, passing in the element that will hold the payment
  // form. Here I use a <div> but you could use any type of element.
  var credit_card_form = LivingSocial.Payments.CreditCardForm($("#payment-interface"));
  
  // Render the payment form.
  credit_card_form.show();

  // Get the outer form that will be submitted once the credit card is successfully
  // stored. This form corresponds with a purchase form.
  var form = $('form#purchase');

  // Construct an event handler function that will be attached to the purchase form.
  var formSubmitHandler = function(event) { 
    // When the purchase form is submitted this handler will be executed and the 
    // save function will be called on the form. If the credit card is successfully
    // saved then the function attached to success will be invoked, otherwise the
    // function attached to error will be invoked.
    credit_card_form.save({ 
      success: function(credit_card) {
        // Since the credit card was successfully saved we now have a credit card
        // token that can be inserted into the purchase form and used by the back-end
        // system.
        form.append($("<input />")
          .attr("type", "hidden")
          .attr("name", "credit_card_token")
          .attr("id", "credit_card_token")
          .attr("value", credit_card.token));
        // The form submit handler is unbound from the purchase form
        form.unbind('submit', formSubmitHandler);

        // And the purchase form is resubmitted, now having the credit card token
        // as one of its elements.
        form.submit();
      },
      error: function(errors) {
        alert("Errors:\n" + errors.join("\n"));
      }
    });
    event.stopImmediatePropagation();
    return false;
  }

  // Attach an event handler to the purchase form that listens for a submit event
  // on that form. Triggering of the payment save 
  form.bind('submit', formSubmitHandler);
});