I am typing the official sample code of strip, but an error is printed.
I am using a type annotation, but how should I guess the type here?
Error Contents
(parameter) paymentIntent: any
Argument of type'({paymentIntent}:PaymentIntent) => void' is not assignable to parameter of type'(value:PaymentIntentResult) =>void | PromiseLike <void>'.
Types of parameters '__0' and 'value' are incompatible.
Type 'PaymentIntentResult' is not assignable to type 'PaymentIntent'.
Type '{paymentIntent:PaymentIntent;error?:undefined;}' is missing the following properties from type 'PaymentIntent': id, object, amount, cancelled_at, and 16 more.ts(2345)
Property 'paymentIntent' does not exist on type 'PaymentIntent'.ts(2339)
Code
import React, {useState, useEffect} from "react";
// Loading strip components
import {
PaymentElement,
useStrip,
useElements
} from "@stripe/react-stripe-js";
import {PaymentIntent} from "@stripe/stripe-js";
// import {CardElementType} from './types/stripe'
export default function CheckoutForm() {
// The first array is the default value, and the second array contains a function to change it.
const strip=useStrip();
construction=useElements();
const [message, setMessage] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
type = Payme
useEffect(()=>{
if(!stripe){
return;
}
// Get value from URL query
constclientSecret=newURLSearchParams(window.location.search).get(
"payment_intent_client_secret"
);
// Value here on redirect
if(!clientSecret){
return;
}
strip.retrievePaymentIntent(clientSecret).then({paymentIntent}:PaymentIntent)=>{
switch(paymentIntent.status){
case "succeeded":
setMessage("Payment succeeded!");
break;
case "processing":
setMessage("Your payment is processing.");
break;
case "requires_payment_method":
setMessage("Your payment was not successful, please try again.");
break;
default:
setMessage("Something went wrong.");
break;
}
});
}, strip);
consthandleSubmit=async(e:{preventDefault:()=>void;})=>{
e.preventDefault();
if(!stripe||!elements){
// Stripe.js has not loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
setIsLoading(true);
const {error} = wait strip.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: "http://localhost:3000",
},
});
// This point will only be reached if there is an immediate error when
// confirming the payment.Otherwise, your customer will be redirected to
// your `return_url`. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to the `return_url`.
if(error.type==="card_error"||error.type==="validation_error"){
setMessage(error.message);
} else{
setMessage("An unexpected error occurred.");
}
setIsLoading(false);
};
return(
<form id="payment-form" onSubmit={handleSubmit}>
<PaymentElement id="payment-element"/>
<button disabled={isLoading||!stripe||!elements}id="submit">
<span id="button-text">
{isLoading?<div className="spinner" id="spinner"></div>: "Pay now"}
</span>
</button>
{/* Show any error or success messages*/}
{message&&divid="payment-message">{message}</div>}
</form>
);
}
When I wrote that some patterns were not given, I got an error.
useEffect()=>{
if(!stripe){
return;
}
// Get value from URL query
constclientSecret=newURLSearchParams(window.location.search).get(
"payment_intent_client_secret"
);
// Value here on redirect
if(!clientSecret){
return;
}
strip.retrievePaymentIntent(clientSecret).then({paymentIntent}:PaymentIntentResult)=>{
switch(paymentIntent?.status){
case "succeeded":
setMessage("Payment succeeded!");
break;
case "processing":
setMessage("Your payment is processing.");
break;
case "requires_payment_method":
setMessage("Your payment was not successful, please try again.");
break;
default:
setMessage("Something went wrong.");
break;
}
});
}, strip);
Cannot invite an object which is positively 'undefined'.
© 2024 OneMinuteCode. All rights reserved.