stripeの公式サンプルコードに型を当てているのですが、エラーが出力される。
型注釈は使用しているのですが、こちらはどのように型を当てたら良いのでしょうか?
エラー内容
(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, canceled_at, and 16 more.ts(2345)
Property 'paymentIntent' does not exist on type 'PaymentIntent'.ts(2339)
コード
import React, { useState, useEffect } from "react";
// stripeのコンポーネントを読み込んでる
import {
PaymentElement,
useStripe,
useElements
} from "@stripe/react-stripe-js";
import { PaymentIntent } from "@stripe/stripe-js";
// import { CardElementType } from './types/stripe'
export default function CheckoutForm() {
// 第一配列がデフォルトの値, 第二配列がそれを変更する関数が入る
const stripe = useStripe();
const elements = useElements();
const [message, setMessage] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
type = Payme
useEffect(() => {
if (!stripe) {
return;
}
//URLのクエリから値を取得する
const clientSecret = new URLSearchParams(window.location.search).get(
"payment_intent_client_secret"
);
// リダイレクト時にここに値が入る
if (!clientSecret) {
return;
}
stripe.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;
}
});
}, [stripe]);
const handleSubmit = async (e: { preventDefault: () => void; }) => {
e.preventDefault();
if (!stripe || !elements) {
// Stripe.js has not yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
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",
},
});
// 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 occured.");
}
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 && <div id="payment-message">{message}</div>}
</form>
);
}