Stripe's paymentIntent.status is not well typed.

Asked 2 years ago, Updated 2 years ago, 372 views

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>
  );
}

javascript reactjs typescript

2022-09-30 22:00

1 Answers

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);

See also

Cannot invite an object which is positively 'undefined'.


2022-09-30 22:00

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.