Stripe custom form with Reactjs

There are several ways how you can use Stripe.js, you can pass form DOMElement (and you don't need use ref, because you can get form element from e.target in onSubmit event) where there are data attributes for Stripe

var StripeComponent = React.createClass({
  componentDidMount: function () {
    Stripe.setPublishableKey(); // set your test public key
  },

  handleSubmit: function (e) {
    e.preventDefault();
    Stripe.card.createToken(e.currentTarget, function (status, response) {
      console.log( status, response );      
    });
  },

  render: function() {
    return <form method="post" onSubmit={ this.handleSubmit }>
      <input size="20" data-stripe="number" placeholder="number"/>
      <input size="4" data-stripe="cvc" placeholder="cvc" />
      <input size="2" data-stripe="exp-month" placeholder="exp-month" />
      <input size="4" data-stripe="exp-year" placeholder="exp-year" />
      <button type="submit">Pay</button>
    </form>;
  }
});

Example

or you can create custom data object like this

var StripeComponent = React.createClass({
  getInitialState: function () {
    return {
      card: {
        number: '',
        cvc: '',
        exp_month: '',
        exp_year: ''
      }
    }
  },

  componentDidMount: function () {
    Stripe.setPublishableKey(); // set your test public key
  },

  handleSubmit: function (e) {
    e.preventDefault();
    Stripe.createToken(this.state.card, function (status, response) {
      console.log( status, response );
    });
  },

  handleChange: function (e) {
    let card = this.state.card;
    card[e.target.name] = e.target.value
    this.setState(card);
  },

  render: function() {
    return <form onSubmit={ this.handleSubmit }>
      <input size="20" name="number" onChange={this.handleChange} />
      <input size="4" name="cvc" onChange={this.handleChange} />
      <input size="2" name="exp_month" onChange={this.handleChange} />
      <input size="4" name="exp_year" onChange={this.handleChange} />
      <button type="submit">Pay</button>
    </form>
  }
});

Example

Note - To test examples you need set public key