content: // React
  import PropTypes from 'prop-types';
  import React from 'react';
  import { injectStripe, CardElement } from 'react-stripe-elements';
  
  // UI
  import { LoadingButton, Input } from 'app/components';
  
  class CheckoutForm extends React.Component {
      state = {
          cc: false,
          firstName: '',
          lastName: '',
          email: '',
          loading: false
      };
  
      handleSubmit = (e) => {
          e.preventDefault();
          this.setState({ loading: true });
  
          // const { form, actions, onSuccess, stripe } = this.props;
          const { firstName, lastName } = this.state;
          this.props.stripe.createToken({
              name: `${firstName} ${lastName}`
          })
          .then((token) => {
              this.setState({ loading: false });
              console.log(token);
          })
          .catch(() => {
              this.setState({ loading: false });
              console.log('bad');
          });
      }
  
      render() {
          const { cc, firstName, lastName, email, loading } = this.state;
          const errors = {
              firstName: firstName.length === 0 ? 'required field' : '',
              lastName: lastName.length === 0 ? 'required field' : '',
              email: email.length === 0 ? 'required field' : ''
          };
          return (
              <form onSubmit={this.handleSubmit}>
                  <div className="my-3">
                      <CardElement
                          onChange={(e) => this.setState({ cc: e.complete })}
                      />
                  </div>
                  <div className="mt-3 pt-2">
                      <Input
                          hint="First Name"
                          size="sm"
                          type="text"
                          value={firstName}
                          onChange={(e) => this.setState({ firstName: e.target.value })}
                          errorText={errors.firstName}
                          successText={errors.firstName ? '' : 'success'}
                      />
                  </div>
                  <div className="mt-3">
                      <Input
                          hint="Last Name"
                          size="sm"
                          type="text"
                          value={lastName}
                          onChange={(e) => this.setState({ lastName: e.target.value })}
                          errorText={errors.lastName}
                          successText={errors.lastName ? '' : 'success'}
                      />
                  </div>
                  <div className="mt-3">
                      <Input
                          hint="Email"
                          size="sm"
                          type="email"
                          value={email}
                          onChange={(e) => this.setState({ email: e.target.value })}
                          errorText={errors.email}
                          successText={errors.email ? '' : 'success'}
                      />
                  </div>
                  <div className="text-center text-md-left">
                      <LoadingButton
                          color="success"
                          type="submit"
                          disabled={!cc || !!errors.firstName || !!errors.lastName || !!errors.email}
                          loading={loading}
                      >Confirm</LoadingButton>
                  </div>
              </form>
          );
      }
  }
  
  CheckoutForm.propTypes = {
      stripe: PropTypes.object.isRequired
  };
  
  export default injectStripe(CheckoutForm);
  