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

Question

我已经在_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'))

Answer 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'))