Stripe - 如何在反应中保存卡片元素？答案

【问题标题】：Stripe - how do I save card element in react?Stripe - 如何在反应中保存卡片元素？
【发布时间】：2020-04-18 06:40:45
【问题描述】：

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

我已经生成了 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);

【问题讨论】：

标签： reactjs stripe-payments

【解决方案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>
}

将<accessDomHere> 切换为您需要执行的任何DOM 查询以获取所需信息。甚至可能有你可以访问的 React 属性或函数（我不熟悉该组件）。

【讨论】：

【解决方案2】：

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

5.1.0之前的版本有错误

【讨论】：