No Overload Matches This Call. In React Stripe PaymentElement
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
Answer
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.
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?