payment form

var PaymentForm = React.createClass({
  propTypes: {
    onValidPaymentDetails: React.PropTypes.func.isRequired,
    onErrors: React.PropTypes.func.isRequired
  },
  getInitialState: function() {
    return { 
      buttonDisabled: false,
      showSpinner: false 
     };
  },
  createStripeToken: function(){
    Stripe.card.createToken({
      number: this.refs['number'].getDOMNode().value,
      cvc: this.refs['cvc'].getDOMNode().value,
      exp_month: this.refs['exp-month'].getDOMNode().value,
      exp_year: this.refs['exp-year'].getDOMNode().value
    }, this.stripeResponseHandler);
  },
  stripeResponseHandler: function(status, response){
    if (response.error) {
      this.props.onErrors([response.error.message])
    } else {
      var token = response.id;
      this.props.onValidPaymentDetails(token)
    }
  },
  render: function(){


    return (
      <div>
        <div className="form-group">
            <label>Card number</label>
            <input type="text" size="20" ref='number' data-stripe="number" id="card_number" className="form-control" pattern='[\d ]*'/>
        </div>

        <div className="cc-details-container">
          <div className="form-group cvc">
            <label>Cvc</label>
            <input type="text" size="4" ref='cvc' data-stripe="cvc" id="cvc" className='form-control cc-control cvc' pattern='\d*' />
          </div>

          <div className="form-group mm">
            <label>Exp. Month</label>
            <input type="text" size="2" ref='exp-month' data-stripe="exp-month" id="exp-month" placeholder='MM' className='form-control cc-control mm' pattern='\d*' />
          </div>
          <div className="form-group yy">
            <label>Exp. Year</label>
            <input type="text" size="4" ref='exp-year' data-stripe="exp-year" id="exp-year" placeholder='YYYY' className='form-control cc-control yy' pattern='\d*'/>
          </div>
        </div>
        <div className="form-group cc-hints">
          <label>Your CVC is the 3 digit number on the back of your credit card</label>
        </div>
      </div>
    )
  }
})

stripe

var Pay = React.createClass({
  mixins: [FormHelpers,FluxMixin,StoreWatchMixin("AccountStore","WizardStore","MealsStore")],
  componentDidMount: function(){
    heap.track('Visit Payment', {});
  },
  getDefaultProps: function() {
    return {
      flux: flux
    }
  },
  getInitialState: function() {
    return { 
      buttonDisabled: false,
      showSpinner: false,
      upgradeSpinner: false 
     };
  },
  getStateFromFlux: function() {
    var NewCustomerWizardState = flux.store("WizardStore").getState()

    return {
      account: flux.store("AccountStore").getState().account,
      discount: NewCustomerWizardState.discount,
      couponCode: NewCustomerWizardState.couponCode,
      freeMeals: NewCustomerWizardState.freeMeals,
      mealpackData: NewCustomerWizardState.mealpackData,
      meals: flux.store("MealsStore").getState()
    }
  },
  handlePayment: function(token){
    this.refs.paymentForm.createStripeToken()
    this.setState({
      showSpinner: true,
      buttonDisabled: true
    })
  },
  processOrder: function(token){
     var lineItems = {};
      this.state.meals.forEach(function(meal, i){
        lineItems[i] = {quantity: meal.quantity, product_id: meal.product_id }
      })

      var url = "/orders";
      var data =  { order: {
                      line_items_attributes: lineItems,
                      apply_discount: this.state.discount > 0,
                      coupon_code: this.state.couponCode
                    }, 
                    stripeToken: token, 
                    active_date: this.state.mealpackData.active_date,
                    mealpack_id: this.state.mealpackData.id
                  }


      $.ajax({
        dataType: "json",
        url: url,
        data: data,
        type: 'POST'
      })
      .done(function( data ) {
        if(data.errors){
         
           this.handleErrors([data.errors])
       
        } else {
          window.location.replace(data.order_url);
        }
      }.bind(this))
  },
  handleErrors: function(errors){
    this.setState({
      showSpinner: false,
      buttonDisabled: false
    }) 
    this.getFlux().actions.errors(errors)
  },
  render:function(){
    var subscriptionDetails;

    if (this.state.account.subscription){
      var note = "You will receive future deliveries for $" + (((this.state.account.default_quantity * 5) * this.state.meals[0].subscription_price)/ 100 ).toFixed(2) + 
                 " per week (plus tax), and you can skip the week or cancel your account at anytime before 5pm on Thursday."
      subscriptionDetails = <p>{note}</p>
    }

    return (
      <div className="row">
        <div className="text-center">
          <h3>Enter your billing infomation</h3>
          <div className="col-md-offset-2 col-md-8">
            {subscriptionDetails}
          </div>
        </div>  
        <div className="row">
          <div className="col-md-12">
          
            <div className="col-md-6">
              <h4>Enter Payment Info</h4>
              <div className="row well">
                <PaymentForm onErrors={this.handleErrors} ref="paymentForm" onValidPaymentDetails={this.processOrder}/>
              </div>
            </div>

            <div className="col-md-6">
              <OrderDetails meals={this.state.meals}
                            price={this.state.account.plan.meal_price}
                            existingCutomer={this.state.account.referred} 
                            discount={this.state.discount}
                            freeMeals={this.state.freeMeals}
                            availableCredits={this.state.account.credits}/>
            </div>

          </div>
        </div>

        <div className="order-nav-buttons">
          <button onClick={this.handlePayment} type="submit"  disabled={this.state.buttonDisabled} className="btn btn-primary btn-large"> Complete Order</button> 
          <Spinner show={this.state.showSpinner} />     
        </div>
      </div>
    )
  }
})