title: Stripe - Accept a payment throws integration error
body: <p>I am working on my app made in <code>reactjs</code> and <code>nodejs</code>. I am following this <a href="https://stripe.com/docs/payments/accept-a-payment#web" rel="nofollow noreferrer">guide</a> for react web. I am using<code>react-stripe-elements</code>. My version for <code>react-stripe-elements</code> is <code>^3.0.1</code>. Here is what my front end code looks like.</p>
  
  <p><strong>checkout.js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import {
    CardNumberElement,
    CardExpiryElement,
    CardCVCElement,
    injectStripe,
  } from "react-stripe-elements";
  import axios from 'axios';
  
  const createOptions = () =&gt; {
    return {
      style: {
        base: {
          fontSize: "16px",
          color: "#0382FF",
          fontFamily: "Quicksand",
          letterSpacing: "2px",
          fontSmoothing: "antialiased",
          "::placeholder": {
            color: "#40e8cb87"
          },
          padding: "10px"
        },
        invalid: {
          color: "#9e2146"
        }
      }
    };
  };
  
  class CheckoutFormIntent extends Component {
    constructor(props) {
      super(props);
      this.cardNumberRef = React.createRef();
    }
  
    GetClientSecret = async () =&gt; {
      await axios.get('/api/stripe-client-secret');
      return {
        clientSecret: res.data.client_secret,
      };
    }
  
  
    handleSubmit = async ev =&gt; {
      ev.preventDefault();
      const { stripe } = this.props;
  
      if (stripe) {
        setloader(true);
        this.GetClientSecret().then(responseJson =&gt; {
          const { clientSecret } = responseJson;
          stripe
            .confirmCardPayment(clientSecret, {
              payment_method: { cardNumber: this.cardNumberRef.current }
            })
            .then(result =&gt; {
              // Display error.message in your UI.
              if (result.error) {
                console.log("error");
              } else {
                console.log("success");
              }
            })
            .catch(error =&gt; {
              console.log(error);
            });
        });
      }
    };
  
    render() {
      return (
        &lt;&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;div&gt;
              &lt;div&gt;
                &lt;span&gt;Card Number&lt;/span&gt;
                &lt;CardNumberElement
                  {...createOptions()}
                  ref={this.cardNumberRef}
                  placeholder="1234 1234 1234 1234"
                /&gt;
              &lt;/div&gt;
              &lt;div className="expCvc"&gt;
                &lt;div&gt;
                  &lt;span&gt;Expiry Date&lt;/span&gt;
                  &lt;CardExpiryElement {...createOptions()} /&gt;
                &lt;/div&gt;
                &lt;div&gt;
                  &lt;span&gt;Security Code&lt;/span&gt;
                  &lt;CardCVCElement {...createOptions()} placeholder="CVV" /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;button type="submit" disabled={isSubmitting} className="btnSubmit"&gt;
              PAY 25
            &lt;/button&gt;
          &lt;/form&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default injectStripe(CheckoutFormIntent);
  </code></pre>
  
  <p>I successfully got the client secret from the backend but when the code reached at <code>confirmCardPayment</code> it throws this error <code>integration error  Invalid value for confirmCardPayment: payment_method.card should be object or element. You specified: undefined</code>. I have gone through every document of stripe, they have implemented the <code>cardElement</code> which gets <code>cardnumber</code>, <code>cvc</code> and <code>expiry</code> instead of <code>react-stripe-elements</code>. I tried to use  <a href="https://stripe.com/docs/js/element" rel="nofollow noreferrer">elements</a> to collect information but no success.</p>