I get this error

No overload matches this call.
  Overload 1 of 2, '(options: { elements: StripeElements; confirmParams?: Partial<ConfirmPaymentData> | undefined; redirect: "if_required"; }): Promise<PaymentIntentResult>', gave the following error.
    Property 'update' is missing in type 'import("/sandbox/node_modules/@stripe/stripe-js/types/index").StripeElements' but required in type 'import("/sandbox/node_modules/@stripe/stripe-js/types/stripe-js/elements-group").StripeElements'.ts(2769)
elements-group.d.ts(41, 3): 'update' is declared here.
stripe.d.ts(57, 5): The expected type comes from property 'elements' which is declared here on type '{ elements: StripeElements; confirmParams?: Partial<ConfirmPaymentData> | undefined; redirect: "if_required"; }'

in the below code snippet

const handleSubmit = async (e: any) => {
    e.preventDefault();

    if (!stripe || !elements) {
      return;
    }

    setIsLoading(true);

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        // Make sure to change this to your payment completion page
        return_url: "http://localhost:3000"
      },
      redirect: "if_required"
    });

    if (error.type === "card_error" || error.type === "validation_error") {
      setMessage(error.message);
    } else {
      setMessage("An unexpected error occured.");
    }

    setIsLoading(false);
  };

I get this code from the stripe docs into this codesandbox for testing purposes, before using it in the project I'm working on right now. As I found out this error occurs when parameter count is mismatched, but as I checked in the node-module for the stripe.confirmPayment() It has the same parameter list as passed here. I can't see the actual issue here, and the component is not loading also, I guess it's related to this error. when I use <CardElement> from stripe it works fine, I couldn't find any typescript-related docs for this either. If someone can point out the real issue here, that would be great. Please refer the full code in codesandbox

CodePudding user response：

You have a weird entry in your package.json

"@stripe/react-stripe-js ": "stripe/stripe-js",
"@stripe/react-stripe-js": "1.7.0",
"@stripe/stripe-js": "1.22.0",

remove the first one and reinstall your deps, It should fix it.