Question

我正在使用React实现Stripe。

提交单击后，表单提交被阻止，ajax请求转到Stripe - 在响应中给我们一个令牌，该令牌应该附加在我们服务器的后续请求中。

我在如何实施/触发对服务器的后续请求方面遇到了障碍？

以下是从react-stripe-elements存储库获取此流程的示例：

class _CardForm extends React.Component {
  props: {
    fontSize: string,
    stripe: StripeProps,
  }
  handleSubmit = (ev) => {
    ev.preventDefault();
    this.props.stripe.createToken().then((payload) => console.log(payload));
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Card details
          <CardElement
            onChange={handleChange}
            onFocus={handleFocus}
            onBlur={handleBlur}
            onReady={handleReady}
            {...createOptions(this.props.fontSize)}
          />
        </label>
        <button>Pay</button>
      </form>
    );
  }
}
const CardForm = injectStripe(_CardForm);

Answer 1

获得令牌后，您应该触发对服务器的调用，即then返回的承诺的this.props.stripe.createToken子句。

handleSubmit = (ev) => {
  ev.preventDefault();
  this.props.stripe.createToken()
    .then((payload) => yourFetchImplementation('path/to/api/endpoint', payloadAsBody));
}

Resume阻止了React中的表单提交

1 个答案: