Question

我正尝试保存卡的详细信息，以便以后使用。

我已经生成了SetupIntent客户端密码

我正在尝试使用确认卡设置。

我正在关注文档here进行反应。

以下行：

const cardElement = this.props.elements.getElement('card')

向我抛出此错误：

TypeError: Cannot read property 'getElement' of undefined

我要去哪里错了？我的代码如下：这是主要部分的相关部分：

import React from "react";
import { Elements, StripeProvider } from "react-stripe-elements";
import SaveCardForm from "./SaveCardForm";

<StripeProvider
apiKey={process.env.REACT_APP_API_STRIPE_PUBLISH}
>

<Elements>
<SaveCardForm/>
</Elements>

</StripeProvider>

这是SaveCardForm组件

import React, { Component } from "react";
import { Stripe, CardElement, injectStripe } from "react-stripe-elements";
import axios from "axios";


class SaveCardForm extends Component {
  constructor(props) {
    super(props);
    this.submit = this.submit.bind(this);
  }


  submit = e => {
    e.preventDefault()
        const cardElement = this.props.elements.getElement('card');
        axios.get(`${process.env.REACT_APP_API}/saveCardDetails`).then(res => {
        console.log('res.data', res.data)
        this.props.stripe.confirmCardSetup(res.data.client_secret, {
      payment_method: {
        card: cardElement,
      },
    }).then( confirmCardSetupRes => {
            console.log('confirmCardSetupRes', confirmCardSetupRes)
  })
})
}

  render() {

    return (
      <div>
        <CardElement />
        <button onClick={this.submit}>
          Bid For Tickets
        </button>
      </div>
    );
  }
}

export default injectStripe(SaveCardForm);

Answer 1

鉴于您的组件，elements中没有传递名为SaveCardForm的道具。如果您想访问CardElement，请使用ref，它可以直接引用该组件，例如

constructor(props) {
  ...
  this.cardEl = React.createRef();
}

submit = e => {
  ...     
  const card = this.cardEl.current.<accessDomHere>;
  this.props.stripe.confirmCardSetup(res.data.client_secret, {
    payment_method: {
      card
    },
  }).then(...)
}

render() {
  ...
  <div>
    <CardElement ref={this.cardEl} />
    ...
  </div>
}

针对需要执行的任何DOM查询切换<accessDomHere>，以获取所需的信息。甚至可以访问一个React属性或函数（我对该组件不熟悉）。

Answer 2

我通过更新到最新版本的react-stripe-elements解决了这个问题。

5.1.0之前的版本中存在错误

条纹-如何保存卡元素的反应？

2 个答案: