title: How to integrate stripe using paymentIntent and confirmCardPayment
body: <p>I am attempting to integrate stripe into my application. I have completed the following steps so far.</p>
  
  <ol>
  <li>Ceate PaymentIntent on the server</li>
  <li>Pass client secret to frontend</li>
  <li><p>Use Stripe Elements to collect card info</p></li>
  <li><p>Use Stripe.js handleCardPayment to process the payment</p></li>
  </ol>
  
  <p>During the handleCardPayment i am using react-stripe-elements and the documentation says to pass either the card element or the cardNumber element. <a href="https://stripe.com/docs/stripe-js/reference#stripe-confirm-card-payment" rel="nofollow noreferrer">https://stripe.com/docs/stripe-js/reference#stripe-confirm-card-payment</a></p>
  
  <p>As you can see below im using <code>CardNumberElement, CardExpiryElement, CardCVCElement</code> separately. </p>
  
  <pre><code>   render() {
          console.log(this.props.paymentIntent);
          return (
              &lt;div className="checkout-component"&gt;
                  &lt;br/&gt;
                  &lt;label&gt;
                      Name:
                      &lt;input placeholder="Name" /&gt;
                  &lt;/label&gt;
                  &lt;label&gt;
                      Email:
                      &lt;input placeholder="Email"&gt;&lt;/input&gt;
                  &lt;/label&gt;
  
                  &lt;label&gt;
                      Card Number:
                  &lt;CardNumberElement ref={this.cardNumberRef}/&gt;
                  &lt;/label&gt;
  
                  &lt;label&gt;
                      Expiry Date:
                      &lt;CardExpiryElement /&gt;
                  &lt;/label&gt;
                  &lt;label&gt;
                      CVC:
                      &lt;CardCVCElement /&gt;
                  &lt;/label&gt;
  
                  &lt;Grid
                      container
                      direction="column"
                      justify="center"
                      alignItems="flex-start"
                      spacing={5}
                  &gt;
                      &lt;Grid item&gt;
                          &lt;div&gt;Total: {this.props.paymentIntent.amount / 100}&lt;/div&gt;
                      &lt;/Grid&gt;
                      &lt;Grid item&gt;
                          &lt;Button variant="contained" color="primary" onClick={this.submit}&gt;
                              Buy
                          &lt;/Button&gt;
                      &lt;/Grid&gt;
                  &lt;/Grid&gt;
  
              &lt;/div&gt;
  
          )
      }
  </code></pre>
  
  <p>my submit function looks like the following: </p>
  
  <pre><code>
      submit = async () =&gt; {
          try {
              const data = {
                  payment_method: {
                      card: this.cardNumberRef.current.getElement(),
                  }
              }
              const result = await this.props.stripe.confirmCardPayment(this.props.paymentIntent.client_secret, data)
              console.log(result);
          } catch (err) {
              console.log(err);
          }
     }
  </code></pre>
  
  <p>I opted not to use the card element instead using the individual pieces. </p>
  
  <p>Although it succeeds, i am confused why i don't need to pass the cvc or expiry date?</p>