billing_form

billing_form.js

import {
  CardNumberElement,
  CardExpiryElement,
  CardCVCElement,
  injectStripe
} from 'react-stripe-elements';
import uuid from 'uuid/v1';

/* Your other imports for a usual form */

class BillingForm extends Component {
  constructor() {
    super();
    this.state = {
        cardInputKey: uuid()
      };
    this.onSubmit = this.onSubmit.bind(this);
  }
  async onSubmit(result) {
    const { stripe, submitBilling, shopId, initialValues } = this.props;
    const data = result.toJS();

    /* AT THIS POINT THE CC IS CREATED AT STRIPE AND YOU NEED TO TELL YOUR BACKEND ABOUT IT */
    const { token, error } = await stripe.createToken(decamelizeKeys(data));

    if (error) {
      throw new SubmissionError({
        _error: error.message
      });
    }

    /* HERE WE WERE SUBMITING AND LENDING THE INFO TO THE BACKEND */
    await submitBilling(shopId, camelizeKeys(token), initialValues.get('name'));
  }

  render() {
    /* all your consts */
    return (
      ....
      <form onSubmit={handleSubmit(this.onSubmit)} className="p-3">
        /* The rest of your user profile form */
        /* CC real info */
        <div className="col-lg-3 offset-1">
          <div className="form-group">
            <label className="form-control-label">Card On File</label>
            <div>{brand && last4 ? `${brand} ending in ${last4}` : 'none'}</div>
          </div>
          <div className="form-group">
            <label className="form-control-label">Card Number</label>
            <CardNumberElement key={`cardNumber${cardInputKey}`} className="form-control" />
          </div>
          <div className="form-group">
            <label className="form-control-label">Expiry</label>
            <CardExpiryElement key={`cardExpiry${cardInputKey}`} className="form-control wd-80" />
          </div>
          <div className="form-group">
            <label className="form-control-label">CVC</label>
            <CardCVCElement key={`cardCvc${cardInputKey}`} className="form-control wd-80" />
          </div>
        </div>
      </form>
    )
  }
}

export default injectStripe(reduxForm({
  ...
})(BillingForm));