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

我在我的项目中使用react和redux，我已经在SpringBoot中集成了完整的后端 通过遵循本教程，我试图将前端集成到react中

这是我的前端

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);

导出类RecurringSubscription扩展组件{
静态类型={
客户端：PropTypes.object.isRequired，
操作：需要PropTypes.object.isRequired，
};
render（）{
常量stripePromise=loadStripe（'pk_test_123'）；
常量卡元素选项={
风格：{
基数：{
颜色：“#32325d”，
fontFamily:“新赫尔维蒂卡”，赫尔维蒂卡，无衬线，
fontSmoothing:'抗锯齿'，
fontSize:'16px'，
“：：占位符”：{
颜色：“#aab7c4”，
},
},
无效：{
颜色：“#fa755a”，
iconColor:“#fa755a”，
},
},
};
返回(
付款
);
}
}
函数MapStateTops（状态）{
返回{
客户：state.client，
};
}
功能图DispatchToprops（调度）{
返回{
操作：bindActionCreators（{…操作}，调度），
};
}
导出默认连接（mapStateToProps、mapDispatchToProps）（重复订阅）；

这是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>
  );
};

类检查表单{
handleSubmit=async（）=>{
const{stripe，elements，projectId，userId}=this.props；
控制台日志（条带）；
控制台日志（元素）；
console.log（projectId）；//
console.log（userId）；//未定义
如果（！stripe | |！元素）{
//Stripe.js尚未加载。请确保禁用
//表单提交，直到Stripe.js加载完毕。
返回；
}
//获取已装入CardElement的引用。Elements知道如何
//查找您的CardElement，因为其中只能有一个
//每种类型的元素。
const cardElement=elements.getElement（cardElement）；
const{error，paymentMethod}=wait stripe.createPaymentMethod({
键入：“卡”，
卡片：cardElement，
});
如果（错误）{
console.log（“[error]”，error）；
}否则{
log（“[PaymentMethod]”，PaymentMethod）；
}
};
render（）{
const{stripe}=this.props；
控制台日志（条带）；
返回(


this.handleSubmit（）}
>
支付
);
}
}
导出默认函数InjectedCheckoutForm=（）=>{
返回(
{（{elements，stripe}）=>}
);
};

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

---

每当我点击支付按钮时，元素属性是未定义的

注入表单是一种将引入

以提供

条带

和

元素

以呈现组件的关注点分离开来的方法

在您的情况下，您正在导出

CheckoutForm

（而不是

InjectedCheckoutForm

），因此

RecurringSubscription

组件正在加载

CheckoutForm

，而不显式加载元素。预计

元素

属性未定义

---

您应该将

CheckoutForm

文件改为

export default InjectedCheckoutForm在最后，看看这是否解决了您的问题。
这里有一些解释：。它看起来像是一个您应该按原样导入和使用的组件，而不是实现您自己的版本…这可能也很有用：是否应该
CheckoutForm
extend
React.component
？Hi-Nolan，我按照您的建议进行了更改，现在效果很好。我在定期订阅组件中遇到了一个问题。我正在传递两个额外的prop，假设productId和userId带有stripe={stripePromise}productId={productId}和userId={userId}，所以在CheckoutForm中，两个新的prop都未定义。我编辑了代码，请查看并建议我