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>; }});
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> }});
Note - To test examples you need set public key