A example of a simple CheckoutForm with React

checkout-form.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { injectStripe } from 'react-stripe-elements'

class CheckoutForm extends Component {
  constructor (props) {
    super(props)

    this.handleSubmit = this.handleSubmit.bind(this)
    this.onChange = this.onChange.bind(this)

    this.state = {
      email: null,
      fullname: null,
      authenticated: false,
      userId: null,
      error: {
        fullname: false,
        email: false,
        payment: false,
        message: 'loading'
      },
      paymentRequested: false
    }
  }

  handleSubmit (ev) {
    this.props.stripe
      .createToken({ name: this.state.fullname })
      .then(({ token }) => {
        // do something with the token
      })
      .catch(e => {
        // eslint-disable-next-line no-console
        console.log('error to create token')
        // eslint-disable-next-line no-console
        console.log(e)
        this.props.addNotification('Erro no pagamento')
        this.setState({
          paymentRequested: false
        })
      })

    // However, this line of code will do the same thing:
    // this.props.stripe.createToken({type: 'card', name: 'Jenny Rosen'});
  }

  onChange (ev) {
    ev.preventDefault()
    let formData = {}
    formData[ev.target.name] = ev.target.value
    this.setState(formData)
    this.setState({ paymentRequested: false })
  }

  componentDidMount () {
    const { user } = this.props

    if (user && user.id) {
      this.setState({
        authenticated: true,
        fullname: user.name,
        email: user.email,
        userId: user.id
      })
    }
  }

  render () {
    const logged = this.state.authenticated
    const { user } = this.props

    return (
      <form
        onSubmit={ this.handleSubmit }
        onChange={ this.onChange }
        style={ { marginTop: 20 } }
      ></form>
    )
  }
}

CheckoutForm.propTypes = {
  stripe: PropTypes.object,
  onPayment: PropTypes.func,
  task: PropTypes.any,
  onClose: PropTypes.func,
  addNotification: PropTypes.func,
  itemPrice: PropTypes.any,
  user: PropTypes.object
}

export const CheckoutFormPure = CheckoutForm
export default injectStripe(CheckoutForm)