CODEWITHSUNDEEP
javascriptreactjsstripe-payments
devon66h
devon66h

Reputation: 547

Invalid value for createPaymentMethod: card should be object or element. You specified: null

Update: Not sure what happened but it's working now! (didn't change anything)

I am using React Stripe.js and I am trying to create a payment method with Stripe's <CardElement /> but I am getting an error that says: "Invalid value for createPaymentMethod: card should be object or element. You specified: null."

SelectPlan.js (where error comes from):

import React, { useState, useEffect } from "react";
import { Button } from "@material-ui/core";
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";

const SelectPlan = () => {
  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: "card",
        card: cardElement,
      });
    } catch (error) {
      alert(error.message);
    }
  }

  return (
    <div>
      <CardElement />

      <Button onClick={createCustomer} variant="contained" color="primary">Submit</Button>
    </div>
  );
};

export default SelectPlan;

StatusModal.js (parent component)

import React from "react";
import { Modal } from "@material-ui/core";
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import SelectPlan from "../components/StatusModal/SelectPlan";

const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_KEY);

const StatusModal = () => {
  return (
    <Modal open={props.modalOpen} onClose={() => props.setModalOpen(false)}>
      <div style={{ width: "90%", height: "90%", overflow: "scroll" }}>
        <h2>Pick your plan</h2>

        <Elements stripe={stripePromise}>
          <SelectPlan />
        </Elements>
      </div>
    </Modal>
  );
};

export default StatusModal;

Upvotes: 0

Views: 3743

Answers (1)

Ariful islam
Ariful islam

Reputation: 11

Please see this solution, It is working for me.

try {
  const cardElement = elements.getElement(CardElement);

  const {
    error,
    paymentMethod
  } = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
  });


  const data = { ...user,
    paymentMethod,
    accountType
  }

  if (error) {
    seterrorMessage(error.message);
    setSuccessMessage(null);
  } else {
    setSuccessMessage(paymentMethod.id);
    seterrorMessage(null);
    cardData(paymentMethod)

  }
  if (newUser && user.name && user.email && user.password && (!error)) {

    const {
      id,
      card: {
        brand,
        country,
        exp_month,
        exp_year,
        funding,
        last4
      }
    } = data.paymentMethod
    const paymentInfo = [id, brand, country, exp_month, exp_year, funding, last4]
    setPayment(paymentInfo)
    const newLoginInfo = { ...loginInfo
    };
    newLoginInfo.paymentData = paymentInfo
    setLoginInfo(newLoginInfo)
    // fetch('https://aqueous-river-54090.herokuapp.com/userLogin', {
    fetch('http://localhost:4000/userLogin', {
      method: 'POST',
      headers: {
        'Content-type': 'application/json'
      },
      body: JSON.stringify(data)
    })
    if (jobSeaker) {
      return history.push('postedJob')
    } else if (employer) {
      history.push('postproject')
    }

  }
} catch (error) {
  // alert(error.message);
}

Upvotes: 1

Related Questions