Stripe Elements React - 如何从父组件获取条带数据？

Posted 2023-03-21

【中文标题】Stripe Elements React - 如何从父组件获取条带数据？

【英文标题】：Stripe Elements React - how to get stripe data from parent component?

【发布时间】：2018-11-05 20:21:33

【问题描述】：

我已经在_CardForm 组件中设置了Stripe 元素支付表单，并希望在Checkout 组件中执行支付流程，该组件是_CardForm 的父组件。

但是，我无法从_CardForm 组件中获取条带数据。如何从子组件中获取条带数据？

const 
  CardElement,
  StripeProvider,
  Elements,
  injectStripe,
 = ReactStripeElements

class _CardForm extends React.Component 
  render() 
    return (
      <form onSubmit=this.props.userPay>
        <CardElement />
        <button>Pay</button>
      </form>
    )
  

const CardForm = injectStripe(_CardForm)

class Checkout extends React.Component 
  userPay()
    // PROBLEM: Can't get stripe data from <CardElement />
    console.log(this.props.stripe) // undefined
    this.props.stripe.createToken().then(payload => console.log(payload))
  
  render() 
    return (
      <div className="Checkout">
        <h1>Available Elements</h1>
        <Elements>
          <CardForm userPay=this.userPay.bind(this) />
        </Elements>
      </div>
    )
  


const App = () => 
  return (
    <StripeProvider apiKey="pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ">
      <Checkout />
    </StripeProvider>
  )

ReactDOM.render(<App />, document.querySelector('.App'))

【参考方案1】：

这段代码对我来说很难测试，但它应该可以清除文档中未显示的一些内容。

此外，毫无疑问，您首先必须正确加载 Stripe。我也可以在该领域提供一些指示，但我需要了解更多有关您如何尝试加载它的信息。

const 
  CardElement,
  StripeProvider,
  Elements,
  injectStripe,
 = ReactStripeElements

class CardForm extends React.Component 
  render() 
    return (
      <form onSubmit=this.props.userPay>
        <CardElement onReady=this.props.cardRef />
        <button>Pay</button>
      </form>
    );
  


class Checkout extends React.Component 
  userPay = (event) => 
    const testName = "John Doe";

    if (this.cardElement) 
      this.props.stripe
        .createToken(
          this.cardElement,
           name: testName  // add additional information here, such as name and address, if outside card element
        )
        .then(( token ) => 
          const tokenString = token.id; // you actually want token.id to send to your server and then to the stripe API
          // code to send tokenString to your server, which will then send it to stripe's API
        );
    
  ;

  cardRef = (element) => 
    if (element) 
      this.cardElement = element;
    
  ;

  render() 
    return (
      <div className="Checkout">
        <h1>Available Elements</h1>
          <CardForm
            cardRef=this.cardRef
            userPay=this.userPay
          />
      </div>
    );
  


const StripeCheckout = injectStripe(Checkout);

const App = () => 
  return (
    <StripeProvider apiKey="pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ">
        <Elements>
          <StripeCheckout />
        </Elements>
    </StripeProvider>
  );
;
ReactDOM.render(<App />, document.querySelector('.App'))

【讨论】：

感谢您的回答。我正在尝试这个，但似乎没有工作。首先，将injectStripe 移动到injectStripe(Checkout); 会给我一条错误消息，上面写着injectStripe is outside of <Elements>

在userSingup 函数中，console.log(this.cardElement) 显示t _emit: ƒ, _once: ƒ, _removeAllListeners: ƒ, _on: ƒ, _userOn: ƒ, …，但console.log(this.props.stripe) 仍显示undefined

@Ohsik 对此感到抱歉。我可以肯定地通过上面的编辑解决第一个错误。 this.props.stripe 应该在那之后出现。

是的，它现在出现了！谢谢你。我还有一个问题。通过这样做，我将<Elements> 包裹在<App /> 组件周围，看起来像ReactDOM.render( <Provider store=store> <StripeProvider apiKey="pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ"> <Elements> <App /> </Elements> </StripeProvider> </Provider>, document.getElementById('root') ); 可以吗？或者我应该将<StripeProvider /> and <Elements> 移动到我的路线，它是App 组件的子路线。

@Ohsik 你可以随心所欲地往上走——只要你上面的injectStripe。 Stripe 建议您往上走。他们说他们可以通过这种方式更好地监控一切。再说一次，如果不需要，为什么要加载这些条带组件。由你决定。在我的实现中，我使用您的术语将其添加到子路由而不是 App。