我正在尝试将条带前端集成到我的 react 和 redux 项目中

Question

我在我的项目中使用 react 和 redux 我已经在 spring boot 中集成了完整的后端 通过遵循本教程，我正在尝试将前端集成到 react https://stripe.com/docs/stripe-js/react#elements-consumer

这是我的前端

export class RecurringSubscription extends Component {
  static propTypes = {
    client: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };

  render() {
    const stripePromise = loadStripe('pk_test_123');

    const CARD_ELEMENT_OPTIONS = {
      style: {
        base: {
          color: '#32325d',
          fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
          fontSmoothing: 'antialiased',
          fontSize: '16px',
          '::placeholder': {
            color: '#aab7c4',
          },
        },
        invalid: {
          color: '#fa755a',
          iconColor: '#fa755a',
        },
      },
    };

    return (
      <div className="client-recurring-subscription">
        <main>
          <section className="section" style={{ paddingTop: 20 }}>
            <div className="container-fluid">
              <div className="row justify-content-center">
                <div className="col-12">
                  <div className="card card-info">
                    <div className="card-header">
                      <h3 className="card-title"> Payment</h3>
                    </div>
                    <div className="card-body">
                      <div className="row">
                        <div className="col-lg-6 col-md-8 col-12 my-auto mx-auto">
                          <Elements stripe={stripePromise}>
                            <MyCheckoutForm stripe={stripePromise} projectId={projectId} userId={userId} />
                          </Elements>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </main>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    client: state.client,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ ...actions }, dispatch),
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(RecurringSubscription);

这是 MyCheckoutForm 组件

 class CheckoutForm {
  handleSubmit = async () => {
    const { stripe, elements,projectId,userId } = this.props;
    console.log(stripe);
    console.log(elements);
    console.log(projectId); //udefined
    console.log(userId); // unndefied

    if (!stripe || !elements) {
      // Stripe.js has not loaded yet. Make sure to disable
      // form submission until Stripe.js has loaded.
      return;
    }

    // Get a reference to a mounted CardElement. Elements knows how
    // to find your CardElement because there can only ever be one of
    // each type of element.
    const cardElement = elements.getElement(CardElement);

    const { error, paymentMethod } = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
    });

    if (error) {
      console.log('[error]', error);
    } else {
      console.log('[PaymentMethod]', paymentMethod);
    }
  };

  render() {
    const { stripe } = this.props;
    console.log(stripe);
    return (
      <div>
        <CardElement />
        <br />
        <button
          className="btn-sm btn"
          type="submit"
          disabled={!stripe}
          onClick={() => this.handleSubmit()}
        >
          Pay
        </button>
      </div>
    );
  }
}

export default function InjectedCheckoutForm = () => {
  return (
    <ElementsConsumer>
      {({ elements, stripe }) => <CheckoutForm elements={elements} stripe={stripe} />}
    </ElementsConsumer>
  );
};

现在我的问题 1- InjectedCheckoutForm 的作用是什么？ 2- 我应该如何完成这个集成？

每当我点击支付按钮时，元素道具都是未定义的！！

Answer 1

注入表单是一种分离引入<ElementsConsumer> 以提供stripe 和elements 来渲染组件的关注点的方法。

在您的情况下，您正在导出您的 CheckoutForm（而不是 InjectedCheckoutForm ），因此您的 RecurringSubscription 组件正在非常明确地加载 CheckoutForm 而没有元素。预计 elements 属性未定义。

您应该在最后将CheckoutForm 文件改为export default InjectedCheckoutForm;，看看是否能解决您的问题。