

stripeの公式サンプルコードに型を当てているのですが、エラーが出力される。  
型注釈は使用しているのですが、こちらはどのように型を当てたら良いのでしょうか？

エラー内容

[code]

    (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)
    
[/code]

コード

[code]

    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>
      );
    }
    
    
[/code]


CC BY-SA 4.0
2022-02-21T14:49:26.840
86499
2022-02-23T04:06:21.363
2022-02-21T15:22:40.747
22565
22565
question
javascript reactjs typescript
stripeのpaymentIntent.statusに上手く型が当てられない。


渡されないパターンもあるってのを書いたらエラーは取れました。

[code]

      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 }: 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;
          }
        });
      }, [stripe]);
    
[/code]

### 参照

[Cannot invoke an object which is possibly ‘undefined’.](https://omkz.net/en-
error-typescript-cannot-invoke/)


CC BY-SA 4.0
2022-02-23T04:06:21.363
86526
2022-02-23T04:06:21.363
22565
86499
answer