stripe_form.js.jsx

var StripeForm = React.createClass({
  getInitialState(){
    return({
      currentClinician: this.props.currentClinician,
      paymentModal: null,
      paymentForm: null,
      hasError: false
    })
  },

  componentDidMount() {
    var that = this;
    var paymentModal = $("#payment_modal");
    var paymentForm = paymentModal.find('#payment_form');
    that.setState({paymentModal: paymentModal, paymentForm: paymentForm})
  },
  componentWillReceiveProps(){
    var that = this;
  },

  stripeResponseHandler(status, response){
    var that = this;
    var paymentModal = that.state.paymentModal;
    var form = that.state.paymentForm;

    if (response.error) {
      form.find('.payment-errors').text(response.error.message);
      that.setState({hasError: true});
    } else {
      var token = response.id; // token contains id, last4, and card type
      that.setState({hasError: false});
      that.props.stripeTokenHandler(token)
    }
    paymentModal.find("img.saving_payment").hide();
    paymentModal.find("button.save").prop('disabled', false);
  },

  createStripeToken(){
    var that = this;
    Stripe.setPublishableKey(that.state.currentClinician.stripe_publishable_key);
    var form = that.state.paymentForm;
    var paymentModal = that.state.paymentModal;
    paymentModal.find("img.saving_payment").show();
    paymentModal.find("button.save").prop('disabled', true);
    form.find('.payment-errors').text('');
    Stripe.card.createToken(form, that.stripeResponseHandler);
  },


  render: function() {
    var that = this;


    return (
      <div className="form-group">
        <div className="form-row">
          <label className="form-labels control-label"></label>
          <div className="form-main">
            <div id="" className="">
              <div className="form-group">
                <div className="form-row">
                  <label className="form-labels control-label" htmlFor="cc-number">Number</label>
                  <div className="form-main">
                    <div className="input-group">
                      <input id="cc-number" className=" form-control" placeholder="Card Number" maxLength="16" type="text" data-stripe="number"/>
                      <span className="input-group-addon btn"><i className="glyphicon glyphicon-credit-card"></i></span>
                    </div>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="form-row">
                  <label className="form-labels control-label" htmlFor="cc-cvc">CVC</label>
                  <div className="form-main-left">
                    <input id="cc-cvc" className=" form-control" placeholder="CVC"
                           maxLength="4" type="text" data-stripe="cvc"/>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="form-row">
                  <label className="form-labels control-label" htmlFor="cc-exp-month">Expiration</label>
                  <div className="form-main-together">
                    <input id="cc-exp-month" className=" form-control" placeholder="MM"
                           maxLength="2" type="text" data-stripe="exp-month"/>
                  </div>
                  <label className="form-main-small control-label center-label">/</label>
                  <div className="form-main-together">
                    <input id="cc-exp-year" className=" form-control" placeholder="YYYY"
                           maxLength="4" type="text" data-stripe="exp-year"/>
                  </div>
                </div>
              </div>
            </div>

            <div id="" className=" form-group">
              <div className="form-row">
                <label className="form-labels control-label" htmlFor="cc-name">
                  Cardholder
                </label>

                <div className="form-main">
                  <input id="cc-name" className=" form-control"
                         placeholder="Name As Appears On Card" data-stripe="name" type="text"/>
                </div>
              </div>

            </div>

            <div id="" className=" form-group">
              <div className="form-row">
                <label className="form-labels control-label"
                       htmlFor="cc-address-line1">
                  Address 1
                </label>

                <div className="form-main" data-bindattr-222="222">
                  <input id="cc-address-line1" className=" form-control"
                         placeholder="Address Line 1" type="text" data-stripe="address-line1"/>

                </div>
              </div>
            </div>

            <div id="" className=" form-group">
              <div className="form-row">
                <label className="form-labels control-label" data-bindattr-223="223"
                       htmlFor="cc-address-line2">
                  Address 2
                </label>

                <div className="form-main" data-bindattr-224="224">
                  <input id="cc-address-line2" className=" form-control"
                         placeholder="Address Line 2" type="text" data-stripe="address-line2"/>

                </div>
              </div>
            </div>

            <div id="" className=" form-group">
              <div className="form-row">
                <label className="form-labels control-label" htmlFor="cc-address-city">
                </label>

                <div className="form-main" data-bindattr-226="226">
                  <input id="cc-address-city" className=" form-control" placeholder="City"
                         type="text" data-stripe="address-city"/>

                </div>
              </div>

            </div>

            <div id="" className=" form-group">
              <div className="form-row">
                <label className="form-labels control-label" htmlFor="cc-address-state">
                  State/Province
                </label>

                <div className="form-main">
                  <input id="cc-address-state" className=" form-control"
                         placeholder="State/Province" type="text" data-stripe="address-state"/>

                </div>
              </div>

            </div>

            <div id="" className=" form-group">
              <div className="form-row">
                <label className="form-labels control-label" htmlFor="cc-address-zip">
                  Zip Code
                </label>

                <div className="form-main">
                  <input id="cc-address-zip" className=" form-control" placeholder="Zip Code"
                         type="text" data-stripe="address-zip"/>

                </div>
              </div>

            </div>

            <div id="" className=" form-group">
              <div className="checkbox form-main-align">
                <label>
                  <input id="save_patient_payment_method" name="save_patient_payment_method" className="form_field" type="checkbox"/>
                  Save Card
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
});