title: Stripe payment method. Use card [split-form] not working. Can't get card number expiry and cvc number
body: <p>I am implementing stripe with react and node.
  but I am not getting these values</p>
  
  <pre><code>    &lt;CardNumberElement/&gt;
      &lt;CardExpiryElement/&gt; 
      &lt;CardCvcElement/&gt;
  </code></pre>
  
  <p>Without its value can't get token and can't charge money.</p>
  
  <p>if I only use cardElement that's work but cardElement is a one-line input field but I want to split it. so that's why I used CardNumberElement , CardExpiryElement, and CardCvcElement for splitting.
  backend code is perfect but the error is inside frontend because we can't pass values perfectly for creating the stripe token for the payment.</p>
  
  <p><strong>Frontend Code:</strong></p>
  
  <pre><code>import React from "react";
  import { loadStripe } from "@stripe/stripe-js";
  import {
      Elements,
      CardElement,
      useStripe,
      useElements,
      CardNumberElement,
      CardExpiryElement,
      CardCVCElement,
      injectStripe,
      StripeProvider,
      CardCvcElement
  } from "@stripe/react-stripe-js";
  import axios from "axios";
  import { ServiceBooking } from "../../services/service-booking"
  
  
  const CheckoutForm = ({ success }) =&gt; {
      const stripe = useStripe();
      const elements = useElements();
  
      const handleSubmit = async event =&gt; {
          event.preventDefault();
          let number = elements.getElement(CardNumberElement);
          let cvc = elements.getElement(CardCvcElement);
          console.log("farrukh",number)
          const { error, paymentMethod } = await stripe.createPaymentMethod({
              type: "card",
              card: {
                  number: number,
                  exp_month: 4,
                  exp_year: 2021,
                  cvc: cvc,
                }
          });
  
          if (!error) {
              const { id } = paymentMethod;
  
              try {
                  const data = await ServiceBooking.charge(id, 1099);
                  console.log(data);
                  success();
              } catch (error) {
                  console.log(error);
              }
          }
      };
  
      return (
          &lt;form
              onSubmit={handleSubmit}
              style={{ maxWidth: "400px", margin: "0 auto" }}
          &gt;
              &lt;h2&gt;Price: $10.99 USD&lt;/h2&gt;
              &lt;CardNumberElement/&gt;
              &lt;CardExpiryElement/&gt; 
              &lt;CardCvcElement/&gt;
              &lt;button type="submit" disabled={!stripe}&gt;
                  Pay
        &lt;/button&gt;
          &lt;/form&gt;
      );
  };
  
  // you should use env variables here to not commit this
  // but it is a public key anyway, so not as sensitive
  const stripePromise = loadStripe("pk_test_wSvr6guTJvkKmv21jVqVd2D20049BVPKHP");
  
  const Checkout = () =&gt; {
      const [status, setStatus] = React.useState("ready");
  
      if (status === "success") {
          return &lt;div&gt;Congrats on your empanadas!&lt;/div&gt;;
      }
  
      return (
            &lt;Elements stripe={stripePromise}&gt;
                &lt;CheckoutForm
                    success={() =&gt; {
                    setStatus("success");
                   }}
                /&gt;
            &lt;/Elements&gt;
      );
  };
  
  export default Checkout;
  
  </code></pre>
  
  <p><strong>Backend Code:</strong></p>
  
  <pre><code>router.post(
      "/charge",
      asyncHandler(async function (req, res) {
          const { id, amount } = req.body;
  
    try {
      const payment = await stripe.paymentIntents.create({
        amount,
        currency: "USD",
        payment_method: id,
        confirm: true
      });
  
      console.log(payment);
  
      return res.status(200).json({
        confirm: "abc123"
      });
    } catch (error) {
      console.log(error);
      return res.status(400).json({
        message: error.message
      });
    }
      })
  );
  </code></pre>
  
  <p>I have tried but could not charge (payment) successfully</p>