Charge with Backbone

charge.coffee

class @Charge extends Backbone.Model
  @statusUrl = '/charges/status'

  defaults:
    currency: 'usd'

  initialize: ->
    @on 'change:number', @setType
    @on 'change:number', @validateNumber
    @on 'change:expiry', @validateExpiry
    @on 'change:cvc',    @validateCVC

    @on 'change:card_token', @create
    @on 'change:uuid', @fetchStatus

  fetchToken: ->
    data = do @getCardData

    Stripe.card.createToken data, (status, response) =>
      if response.error
        @set error: response.error.message
      else
        @unset 'error'
        @set card_token: response.id

  create: ->
    charge =
      amount: @get 'amount'
      currency: @get 'currency'
      card_token: @get 'card_token'

    $.ajax
      type: 'POST'
      url: @get 'url'
      dataType: 'json'
      data: { charge }
      success: (charge) =>
        @set uuid: charge.uuid

  fetchStatus: =>
    $.ajax
      type: 'GET'
      url: Charge.statusUrl
      data: { uuid: @get('uuid') }
      dataType: 'text'
      success: (status) =>
        switch status
          when 'confirmed' then @trigger 'confirmed'
          when 'failed' then @trigger 'failed'
          when 'processing'
            setTimeout @fetchStatus, 500
          else
            console.log 'another status'

  getCardData: ->
    exp = @get('expiry')

    number: @get('number')
    cvc: @get('cvc')
    exp_month: exp.month or null
    exp_year: exp.year or null

  setType: ->
    type = $.payment.cardType @get('number')
    @set { type }

  validateNumber: ->
    valid = $.payment.validateCardNumber @get('number')

    @trigger 'valid:number' if valid

  validateExpiry: ->
    exp = @get('expiry')
    [month, year] = [exp.month, exp.year]
    valid = $.payment.validateCardExpiry month, year

    @trigger 'valid:expiry' if valid

  validateCVC: ->
    [cvc, type] = [@get('cvc'), @get('type')]
    valid = $.payment.validateCardCVC cvc, type

    @trigger 'valid:cvc' if valid

charge_view.coffee

class @ChargeView extends Backbone.View
  el: '.charge'

  events:
    'submit': 'submit'

  initialize: ->
    url = @$el.data('url')
    @model = new Charge { url }

    @$slider = @$el.find('.slider')
    @$number = @$el.find('.card-number')
    @$expiry = @$el.find('.card-expiry')
    @$cvc    = @$el.find('.card-cvc')

    @$slider.slider
      range: 'min'
      value: 10
      max: 10000
      step: 100

    @$number.payment 'formatCardNumber'
    @$expiry.payment 'formatCardExpiry'
    @$cvc.payment    'formatCardCVC'

    @$slider.on 'slide', @setAmount
    @$number.on 'input', @setNumber
    @$expiry.on 'input', @setExpiry
    @$cvc.on    'input', @setCVC

    @model.on 'change:amount', @renderAmount
    @model.on 'change:type',   @setType
    @model.on 'valid:number',  @validNumber
    @model.on 'valid:expiry',  @validExpiry
    @model.on 'valid:cvc',     @validCVC

    @model.on 'change:error'

  submit: ->
    # disable form
    # validate payment (amount, card)
    do @model.fetchToken
    false

  setAmount: (e, ui) =>
    amount = ui.value
    @model.set { amount }

  setNumber: =>
    number = @$number.val()
    @model.set { number }

  setExpiry: =>
    expiry = @$expiry.payment 'cardExpiryVal'
    @model.set { expiry }

  setCVC: =>
    cvc = @$cvc.val()
    @model.set { cvc }

  renderAmount: =>
    amount = "#{@model.get('amount') / 100}.00"
    @$el.find('.value').text amount

  setType: =>
    type = @model.get('type')
    @$el.find('.card-number').attr('class', '.card-number')
      .addClass(type)

  validNumber: ->
    console.log 'valid:number'

  validExpiry: ->
    console.log 'valid:expiry'

  validCVC: ->
    console.log 'valid:cvc'