title: Stripe Elements React - how to get stripe data from parent component?
body: <p>I have set up the Stripe element payment form in <code>_CardForm</code> component and want to execute the payment process in <code>Checkout</code> component which is parent component of <code>_CardForm</code>.</p>
  
  <p>However, I can't get the stripe data from  in <code>_CardForm</code> component. How do I get the stripe data from child component?</p>
  
  <pre><code>const {
    CardElement,
    StripeProvider,
    Elements,
    injectStripe,
  } = ReactStripeElements
  
  class _CardForm extends React.Component {
    render() {
      return (
        &lt;form onSubmit={this.props.userPay}&gt;
          &lt;CardElement /&gt;
          &lt;button&gt;Pay&lt;/button&gt;
        &lt;/form&gt;
      )
    }
  }
  const CardForm = injectStripe(_CardForm)
  
  class Checkout extends React.Component {
    userPay(){
      // PROBLEM: Can't get stripe data from &lt;CardElement /&gt;
      console.log(this.props.stripe) // undefined
      this.props.stripe.createToken().then(payload =&gt; console.log(payload))
    }
    render() {
      return (
        &lt;div className="Checkout"&gt;
          &lt;h1&gt;Available Elements&lt;/h1&gt;
          &lt;Elements&gt;
            &lt;CardForm userPay={this.userPay.bind(this)} /&gt;
          &lt;/Elements&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const App = () =&gt; {
    return (
      &lt;StripeProvider apiKey="pk_RXwtgk4Z5VR82S94vtwmam6P8qMXQ"&gt;
        &lt;Checkout /&gt;
      &lt;/StripeProvider&gt;
    )
  }
  ReactDOM.render(&lt;App /&gt;, document.querySelector('.App'))
  </code></pre>