title: Invalid value for createPaymentMethod: card should be object or element. You specified: null
body: <p><strong>Update:</strong> Not sure what happened but it's working now! (didn't change anything)</p>
  <hr />
  <p>I am using <a href="https://stripe.com/docs/stripe-js/react" rel="nofollow noreferrer">React Stripe.js</a> and I am trying to create a payment method with Stripe's <code>&lt;CardElement /&gt;</code> but I am getting an error that says: <code>&quot;Invalid value for createPaymentMethod: card should be object or element. You specified: null.&quot;</code></p>
  <p><strong>SelectPlan.js (where error comes from):</strong></p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import { Button } from &quot;@material-ui/core&quot;;
  import { CardElement, useStripe, useElements } from &quot;@stripe/react-stripe-js&quot;;
  
  const SelectPlan = () =&gt; {
    const stripe = useStripe();
    const elements = useElements();
  
    // function creates customer with necessary card info
    async function createCustomer() {
      try {
        const cardElement = elements.getElement(CardElement);
  
        const { paymentMethod } = await stripe.createPaymentMethod({
          type: &quot;card&quot;,
          card: cardElement,
        });
      } catch (error) {
        alert(error.message);
      }
    }
  
    return (
      &lt;div&gt;
        &lt;CardElement /&gt;
  
        &lt;Button onClick={createCustomer} variant=&quot;contained&quot; color=&quot;primary&quot;&gt;Submit&lt;/Button&gt;
      &lt;/div&gt;
    );
  };
  
  export default SelectPlan;
  </code></pre>
  <p><strong>StatusModal.js (parent component)</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { Modal } from &quot;@material-ui/core&quot;;
  import { loadStripe } from &quot;@stripe/stripe-js&quot;;
  import { Elements } from &quot;@stripe/react-stripe-js&quot;;
  import SelectPlan from &quot;../components/StatusModal/SelectPlan&quot;;
  
  const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_KEY);
  
  const StatusModal = () =&gt; {
    return (
      &lt;Modal open={props.modalOpen} onClose={() =&gt; props.setModalOpen(false)}&gt;
        &lt;div style={{ width: &quot;90%&quot;, height: &quot;90%&quot;, overflow: &quot;scroll&quot; }}&gt;
          &lt;h2&gt;Pick your plan&lt;/h2&gt;
  
          &lt;Elements stripe={stripePromise}&gt;
            &lt;SelectPlan /&gt;
          &lt;/Elements&gt;
        &lt;/div&gt;
      &lt;/Modal&gt;
    );
  };
  
  export default StatusModal;
  </code></pre>