Checkout form component for Embeddable paywall

checkoutForm.js

import React, { Component } from "react";
import { injectStripe } from "react-stripe-elements";
import "../App.css";
// import "fetch-polyfill";

import CardSection from "./CardSection";

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

    this.handleSubmit = this.handleSubmit.bind(this);
    this._setCreditCard = this._setCreditCard.bind(this);
    this._setExpiration = this._setExpiration.bind(this);
    this._setCVC = this._setCVC.bind(this);
    this._setZip = this._setZip.bind(this);

    this.state = {
      saveCard: false,
      cc_completed: false,
      ex_completed: false,
      cvc_completed: false,
      zip_completed: false,
      payment_error: false,
      formSubmitting: false
    };
  }

  handleSubmit(ev) {

    this.setState({
      formSubmitting: true
    })

    ev.preventDefault();

    this.props.stripe
      .createToken({
        name: this.props.readerName || "n/a",
        email: this.props.readerEmail || "n/a"
      })
      .then(({ token }) => {
        if (!token) {
          this.props.setLoading(false);
          this.props.handlePaymentIssue();
          return;
        }

        let amount = "five";

        if (this.props.amountToCharge) {
          switch (this.props.amountToCharge) {
            case 5:
              amount = "five";
              break;
            case 10:
              amount = "ten";
              break;
            case 15:
              amount = "fifteen";
              break;
            case 20:
              amount = "twenty";
              break;
            default:
          }
        }

        this.props.setLoading(true);

        if (this.state.saveCard) {
          fetch(
            `https://embeddable-api.herokuapp.com/create-customer?token=${
              token.id
            }`
          )
            .then(function(response) {
              return response.json();
            })
            .then(
              function(json) {
                const customerId = json.id;
                this.props.saveCustomer(customerId);

                // once customer is created.. then create the charge using the customer id..

                fetch(
                  `https://embeddable-api.herokuapp.com/payment?token=${
                    customerId
                  }&amount=${amount}`
                )
                  .then(function(response) {
                    return response.json();
                  })
                  .then(
                    function(json) {
                      const chargeId = json.id;

                      if (json.status === "succeeded") {
                        this.props.handleCheckout(chargeId, amount);
                      }

                      if (json === "payment error") {
                        this.props.setLoading(false);
                        this.props.handlePaymentIssue();
                      }
                    }.bind(this)
                  )
                  .catch(
                    function(ex) {
                      this.props.setLoading(false);
                      this.props.handlePaymentIssue();
                    }.bind(this)
                  );
              }.bind(this)
            )
            .catch(
              function(ex) {
                this.props.setLoading(false);
                this.props.handlePaymentIssue();
              }.bind(this)
            );
        } else {

          fetch(
            `https://embeddable-api.herokuapp.com/payment?token=${
              token.id
            }&amount=${amount}`
          )
          // fetch(
          //   `http://localhost:8081/payment?token=${
          //     token.id
          //   }&amount=${amount}`
          // )
            .then(function(response) {
              return response.json();
            })
            .then(
              function(json) {
                const chargeId = json.id;

                console.log("CHARGE ID", chargeId)

                if (json.status === "succeeded") {
                  this.props.handleCheckout(chargeId, amount);
                }

                if (json === "payment error") {
                  this.setState({
                    payment_error: true
                  });
                  this.props.setLoading(false);
                  //this.props.handlePaymentIssue();
                }
              }.bind(this)
            )
            .catch(
              function(ex) {
                this.props.setLoading(false);
                this.props.handlePaymentIssue();
              }.bind(this)
            );
        }
      });
  }

  _setCreditCard(done) {
    this.setState({
      cc_completed: done
    });
  }

  _setExpiration(done) {
    this.setState({
      ex_completed: done
    });
  }

  _setCVC(done) {
    this.setState({
      cvc_completed: done
    });
  }

  _setZip(done) {
    this.setState({
      zip_completed: done
    });
  }

  render() {
    // <div style={{display: "flex"}}>
    //   <input
    //     className="styled-checkbox"
    //     id="save-card"
    //     type="checkbox"
    //     checked={this.state.saveCard}
    //     onChange={() => this.setState({ saveCard: !this.state.saveCard }) }
    //   />
    //
    //   <label htmlFor="save-card" />
    //   <div>Save Card for Renewal</div>
    // </div>

    return (
      <form onSubmit={this.handleSubmit} style={{ height: "100%" }}>
        <div className="form-space">
          <CardSection
            completedCC={done => this._setCreditCard(done)}
            completedEx={done => this._setExpiration(done)}
            completedCVC={done => this._setCVC(done)}
            completedZip={done => this._setZip(done)}
          />

          {this.state.payment_error ? (
            <div className="account-error">
              <i
                style={{ marginRight: "6px" }}
                className="fa qs-fa  fa-close pink"
              />There was an issue with your payment
            </div>
          ) : (
            ""
          )}

          <div className="btn-wrap" style={{ paddingBottom: "12px" }}>
            <button
              disabled={
                !this.state.cc_completed ||
                !this.state.ex_completed ||
                !this.state.cvc_completed ||
                !this.state.zip_completed ||
                this.state.formSubmitting
              }
              className="onboarding-btn"
              style={{ width: "250px" }}
            >
              START READING
            </button>
          </div>
        </div>
      </form>
    );
  }
}

export default injectStripe(CheckoutForm);