React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Alex Cory

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>



<!-- <form name="ccform" action="">
  <input name="cc-number" placeholder="Card Number" autocomplete="cc-number" />
  <input name="cc-csc" placeholder="Security Code (CVC)" autocomplete="cc-csc" />
  <input name="cc-exp-month" placeholder="MM" autocomplete="cc-exp-month" />
  <input name="cc-exp-year" placeholder="YYYY" autocomplete="cc-exp-year" />
</form> -->

CSS

.widget {
  width: 202px;
  margin: 100px auto;
  //    border:1px solid black;
  padding: 20px;
}

.name {
  color: red;
}


/* .default-label {
    border: 1px solid black;
    padding: 10px;
    margin-bottom: 10px;
    width:180px;
} */

.green-label {
  border: 1px solid green;
  padding: 10px;
  margin-bottom: 10px;
  width: 180px;
}


/* .default-input {
    border: 1px solid #eaeaea;
    padding: 10px;
    width:180px;
} */

.important-input {
  border: 2px solid red;
  width: 180px;
}

.center {
  text-align: center;
}

JavaScript 1.7

class Form extends React.Component {

	submit(e) {
  	e.preventDefault()
    // do whatever you need to do
    /*
    	const form = this._form
      window.Stripe.setPublishableKey(this.props.stripeKey)
      const message = ReactDOM.findDOMNode(this._input).value

      window.Stripe.card.createToken(form, async (status, token) => {
        const res = await window.fetch(PAYMENT_API + profile.id, {
          method: 'POST',
          credentials: 'same-origin',
          headers: {
            authentication: global.store.getState().auth.token,
            'content-type': 'application/json'
          },
          body: JSON.stringify({token: token.id, amount, capture: false})
        })
        */

    alert('You have submitted the card information')
  }
  
  render() {
    return ( 
    	<div className="widget" >
        <Logo className='center' src='http://bit.ly/2a7TS26' />
        <form 
        	name="ccform"
          ref={r => { this._form = r }}
        >
          <input name="cc-number" placeholder="Card Number" autocomplete="cc-number" />
          <input name="cc-csc" placeholder="Security Code (CVC)" autocomplete="cc-csc" />
          <input name="cc-exp-month" placeholder="MM" autocomplete="cc-exp-month" />
          <input name="cc-exp-year" placeholder="YYYY" autocomplete="cc-exp-year" />
          <br/>
          <button
            onClick={this.submit}
          >Add Card</button>

        </form>
      </div >
    )
  }
}




class Logo extends React.Component {
  render() {
    return <img className="center" {...this.props
    }
    />;
  }
}

Logo.propTypes = {
  src: React.PropTypes.string.isRequired
};

ReactDOM.render(
  <Form />,
  document.getElementById('container')
);