Reactjs и Stripe: показывать сообщения об успехах и ошибках при отправке

Question

Я работаю в платежной системе Stripe on Reactjs.Я хочу отображать сообщения об успехе или ошибке, но я все еще новичок в React и не уверен, где должен быть размещен код.Сообщение об успешном завершении: когда платеж успешен.Сообщение об ошибке: если возникла какая-либо проблема с платежом.

Я также хочу показать код активации, который они получают в ответ, после создания токена.Например: {this.state.code && Ваш код активации ( code ): {this.state.code} и действителен в течение {this.state.subscription_days} дней.

Но это не работает.

class CheckoutForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      complete: false,
      referrer: '',
      email: '',
      amount: '',
    };
    this.submit = this.submit.bind(this);
  }

  componentDidMount() {
    console.log(this.props);
    let referrer = this.props.match.params.referrer; // url - added route to index.js
    if (referrer) {
      console.log(referrer);
      this.setState({ referrer, });
    }

    // let amount = this.state.amount;
    // document.getElementById('get3months').addEventListener('click', amount._handleAmount);
  }

  // user clicked submit
  submit(ev) {
    ev.preventDefault(); // prevent default submission and refreshing the page
    this.props.stripe.createToken() // which elements to tokenize
      .then(response => {
        console.log('Received Stripe token:', response.token);
        axios.post('http://10.250.57.37:8000/subscriptions/codes/pay/',
          {
            token: response.token,
            amount: this.state.amount,
            email: this.state.email,
            referrer: this.state.referrer, // rn name or empty string, filip
          },
          {
            'Content-Type': 'application/json', // header
          }
        )
        .then(response => {
          console.log(response);
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    if (this.state.complete) return <p>Purchase Complete!</p>;

    return (
      <div className="checkout-form">
        <PrimeHeading
          heading={this.props.heading}
          subheading={this.props.subheading}
        />
        <p>Would you like to complete the purchase?</p>
        <form onSubmit={this.submit} style={{ minHeight: 300, }}>
          <label>
            Email
            <input
              id="email"
              name="email"
              type="email"
              placeholder="Enter your email"
              required
              onChange={this._handleEmailChange.bind(this)}
              value={this.state.email}
            />
          </label>
          {/* <label>
            Referral
            <input
              id="referrer"
              name="referrer"
              type="text"
              placeholder="Enter your friends' usernames"
              required
            />
          </label> */}
          <CheckoutCardSection />
          <Button
            // label="Pay" {this.state.amount} "DKK"
            onClick={this.submit}
            type="button"
            size="medium"
            backgroundColor="#43ddb1"
            color="white"
            noShadow
          />
        </form>
        {this.state.code && <div>Your activation code is: {this.state.code} and it is valid for {this.state.subscription_days} days.</div>}
      </div>
    );
  }

  _handleEmailChange(event) {
    let email = event.target.value;
    this.setState({ email, });
  }
}

Дайте мне знать, если вам нужно больше объяснений.Помощь очень ценится!

Answer 1

В коде, который вы показываете, вы должны установить новое состояние в обратных вызовах then или catch.Вы можете иметь некоторые дополнительные свойства в состоянии вашего компонента для достижения этого.

...
this.state = {
      complete: false,
      referrer: '',
      email: '',
      amount: '',
      code: null,
      subscription_days: null,
      error: null,
    };
...

И затем, вы должны установить его так:

  ...
  .then(response => {
      console.log('Received Stripe token:', response.token);
      axios.post('http://10.250.57.37:8000/subscriptions/codes/pay/',
      {
        token: response.token,
        amount: this.state.amount,
        email: this.state.email,
        referrer: this.state.referrer, // rn name or empty string, filip
      },
      {
        'Content-Type': 'application/json', // header
      }
    )
    // Use the appropiate property in your response to set the values.
    // Note that I'm using destructuring assignment
    .then(({ code, subscription_days })=> {
      this.setState({
        code,
        subscription_days
      });
    });
  })
  .catch(error => {
    this.setState({
      error: `Your error message.`//Maybe error.message?
    });
  });
  ...

Наконец, я бы порекомендовал вытащитьвыведите свой сетевой код вызова из компонента в отдельный модуль и просто верните ответ.Это сделает ваш код компонента более читабельным.