Credit card flight components

credit_card_form.js.coffee

define (require) ->
  defineComponent = require("flight/lib/component")
  withCreditCardForm = require("app/mixins/with_credit_card_form")
  withErrors = require("app/mixins/with_errors")

  CreditCardFormUI = ->
    @attributes
      submitSelector: "input[type='submit']"

    @submit = ->
      return if @select("submitSelector").is(":disabled")
      @clearErrors()
      data = @serializeCard()

      if @validateCard(data)
        @select("submitSelector").prop("disabled", true)
        dfd = @generateToken(data)

        dfd.done (token) =>
          @trigger("uiCardTokenGenerated", token: token)

        dfd.fail (errors) =>
          @displayErrors(@parseStripeError(error))
          @trigger("uiCardTokenGenerationFailed", error: error)
          @select("submitSelector").prop("disabled", false)

      else
        @displayErrors(@cardErrors)

    @handleCardAdded = (ev, data) ->
      @select("submitSelector").prop("disabled", false)
      @$node.html(data.form_html)

    @handleCardFailed = (ev, data) ->
      @select("submitSelector").prop("disabled", false)
      @displayErrors(data.errors)

    @after "initialize", ->
      @on document, "dataCardAdded", @handleCardAdded
      @on document, "dataAddCardFailed", @handleCardFailed

      @on "click",
        submitSelector: @submit

  defineComponent(CreditCardFormUI, withCreditCardForm, withErrors)

with_credit_card_form.js.coffee

define (require) ->
  withCreditCardForm = ->
    @attributes
      cardNumberSelector: "[name='card_number']"
      cardCvcSelector: "[name='card_cvc']"
      cardExpirySelector: "[name='card_expiry']"
      stripeKey: null

    @clearCardForm = ->
      @select("cardNumberSelector").val("")
      @select("cardCvcSelector").val("")
      @select("cardExpirySelector").val("")

    @validateCard = (attributes) ->
      @cardErrors = []

      unless $.payment.validateCardNumber(attributes.number)
        @cardErrors.push
          attribute: "card_number"
          message: "Card number is not valid"

      unless $.payment.validateCardCVC(attributes.cvc)
        @cardErrors.push
          attribute: "card_cvc"
          message: "CVC is not valid"

      unless $.payment.validateCardExpiry(attributes.exp_month, attributes.exp_year)
        @cardErrors.push
          attribute: "card_expiry"
          message: "Expiration is not valid"

      @cardErrors.length == 0

    @parseStripeError = (error) ->
      return {} unless error

      attribute = switch error.param
        when "exp_month", "exp_year" then "card_expiry"
        when "number" then "card_number"
        when "cvc" then "card_cvc"
        else "base"

      [{ attribute: attribute, message: error.message }]

    @serializeCard = ->
      date = @select("cardExpirySelector").val()
      expiry = $.payment.cardExpiryVal(date)

      {
        number: @select("cardNumberSelector").val(),
        cvc: @select("cardCvcSelector").val(),
        exp_month: expiry.month,
        exp_year: expiry.year
      }

    @generateToken = (data) ->
      dfd = $.Deferred()

      Stripe.card.createToken data, (status, response) =>
        if response.error
          dfd.reject(response.error)
        else
          dfd.resolve(response.id)

      dfd

    @after "initialize", ->
      @cardErrors = []
      Stripe.setPublishableKey(@attr.stripeKey)

      @select("cardNumberSelector").payment("formatCardNumber")
      @select("cardExpirySelector").payment("formatCardExpiry")
      @select("cardCvcSelector").payment("formatCardCVC")