title: I am trying to integrate stripe frontend in my react and redux project
body: <p>I am using react and redux in my project i already integrated complete backend in spring boot
  and by following this tutorial i am trying to integrate frontend in react <a href="https://stripe.com/docs/stripe-js/react#elements-consumer" rel="nofollow noreferrer">https://stripe.com/docs/stripe-js/react#elements-consumer</a> <img src="https://i.stack.imgur.com/IGKyR.png" alt="enter image description here" /></p>
  <p>This is my frontend</p>
  <pre><code>export class RecurringSubscription extends Component {
    static propTypes = {
      client: PropTypes.object.isRequired,
      actions: PropTypes.object.isRequired,
    };
  
    render() {
      const stripePromise = loadStripe('pk_test_123');
  
      const CARD_ELEMENT_OPTIONS = {
        style: {
          base: {
            color: '#32325d',
            fontFamily: '&quot;Helvetica Neue&quot;, Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
              color: '#aab7c4',
            },
          },
          invalid: {
            color: '#fa755a',
            iconColor: '#fa755a',
          },
        },
      };
  
      return (
        &lt;div className=&quot;client-recurring-subscription&quot;&gt;
          &lt;main&gt;
            &lt;section className=&quot;section&quot; style={{ paddingTop: 20 }}&gt;
              &lt;div className=&quot;container-fluid&quot;&gt;
                &lt;div className=&quot;row justify-content-center&quot;&gt;
                  &lt;div className=&quot;col-12&quot;&gt;
                    &lt;div className=&quot;card card-info&quot;&gt;
                      &lt;div className=&quot;card-header&quot;&gt;
                        &lt;h3 className=&quot;card-title&quot;&gt; Payment&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;card-body&quot;&gt;
                        &lt;div className=&quot;row&quot;&gt;
                          &lt;div className=&quot;col-lg-6 col-md-8 col-12 my-auto mx-auto&quot;&gt;
                            &lt;Elements stripe={stripePromise}&gt;
                              &lt;MyCheckoutForm stripe={stripePromise} projectId={projectId} userId={userId} /&gt;
                            &lt;/Elements&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/section&gt;
          &lt;/main&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      client: state.client,
    };
  }
  
  function mapDispatchToProps(dispatch) {
    return {
      actions: bindActionCreators({ ...actions }, dispatch),
    };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(RecurringSubscription);
  </code></pre>
  <p>This is MyCheckoutForm Component</p>
  <pre><code> class CheckoutForm {
    handleSubmit = async () =&gt; {
      const { stripe, elements,projectId,userId } = this.props;
      console.log(stripe);
      console.log(elements);
      console.log(projectId); //udefined
      console.log(userId); // unndefied
  
      if (!stripe || !elements) {
        // Stripe.js has not loaded yet. Make sure to disable
        // form submission until Stripe.js has loaded.
        return;
      }
  
      // Get a reference to a mounted CardElement. Elements knows how
      // to find your CardElement because there can only ever be one of
      // each type of element.
      const cardElement = elements.getElement(CardElement);
  
      const { error, paymentMethod } = await stripe.createPaymentMethod({
        type: 'card',
        card: cardElement,
      });
  
      if (error) {
        console.log('[error]', error);
      } else {
        console.log('[PaymentMethod]', paymentMethod);
      }
    };
  
    render() {
      const { stripe } = this.props;
      console.log(stripe);
      return (
        &lt;div&gt;
          &lt;CardElement /&gt;
          &lt;br /&gt;
          &lt;button
            className=&quot;btn-sm btn&quot;
            type=&quot;submit&quot;
            disabled={!stripe}
            onClick={() =&gt; this.handleSubmit()}
          &gt;
            Pay
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default function InjectedCheckoutForm = () =&gt; {
    return (
      &lt;ElementsConsumer&gt;
        {({ elements, stripe }) =&gt; &lt;CheckoutForm elements={elements} stripe={stripe} /&gt;}
      &lt;/ElementsConsumer&gt;
    );
  };
  </code></pre>
  <p>Now my issue
  1- What is the role of InjectedCheckoutForm?
  2- And How should i complete this integration ?</p>
  <p>Whenever i click pay button element prop is undefined!!</p>