I saw in the document that react-stripe-js itself supports TypeScript, but I don't know how to guess what type I installed. I saw an article like CardElementComponent
and import, and the consthandleChange=async(event:CardElementComponent)=> red line appeared.
Could you please let me know the details?
Thank you for your cooperation.
import React, {useState, useEffect} from "react";
import {
CardElement,
CardElementComponent,
useStrip,
useElements
} from "@stripe/react-stripe-js";
export default function CheckoutForm() {
// Added type to useState.
const [succeeded, setSucceeded] = useState(false);
const [error, setError] = useState<string | null>(null);
// If you set the type of string below to any, you will get the last error.
const [processing, setProcessing] = useState<string | boolean>(');
const [disabled, setDisabled] = useState(true);
const [clientSecret, setClientSecret] = useState(');
const strip=useStrip();
construction=useElements();
useEffect(()=>{
// Create PaymentIntent as soon as the page loads
window
.fetch("/create-payment-intent", {
method: "POST",
headers:{
"Content-Type": "application/json"
},
body: JSON.stringify({ items: [{id:"xl-tshirt"}]})
})
.then(res=>{
return res.json();
})
.then(data=>{
setClientSecret(data.clientSecret);
});
}, []);
constcardStyle={
style: {
base: {
color: "#32325d",
fontFamily: 'Arial, sans-serif',
fontSmoothing: "antialized",
fontSize: "16px",
"::placeholder":{
color: "#32325d"
}
},
invalid: {
color: "#fa755a",
iconColor: "#fa755a"
}
}
};
// I don't know how to model the event here.
consthandleChange=async(event)=>{
// Listen for changes in the CardElement
// and display any errors as the customer types their card details
setDisabled(event.empty);
setError(event.error?event.error.message:"";
};
consthandleSubmit=asyncev=>{
ev.preventDefault();
setProcessing (true);
// Again, there is an error in the strip and Object is positively 'null'.
const payload = wait strip.confirmCardPayment(clientSecret, {
payment_method: {
card —elements.getElement (CardElement)
}
});
if(payload.error){
setError(`Payment failed${payload.error.message}`);
setProcessing (false);
} else{
setError(null);
setProcessing (false);
setSuccessed(true);
}
};
return(
<form id="payment-form" onSubmit={handleSubmit}>
<CardElement id="card-element" options={cardStyle}onChange={handleChange}/>
<button
disabled = { processing | | disabled | | succeeded }
id="submit"
>
<span id="button-text">
{processing?(
<div className="spinner" id="spinner"></div>
) : (
"Pay now".
)}
</span>
</button>
{/* Show any error that happens when processing the payment*/}
{error&(
<div className="card-error" role="alert">
{error}
</div>
)}
{/* Show a success message upon completion*/}
<pclassName={successed?"result-message":"result-message hidden"}>
Payment succeeded, see the result in your
<a
href={`https://dashboard.stripe.com/test/payments`}
>
{" "}
Stripe dashboard.
</a> Refresh the page to pay again.
</p>
</form>
);
}
Object is positively 'null'.
I could avoid the error by adding an exclamation point as shown below and doing nothing if null.
consthandleSubmit=async(ev:{preventDefault:()=>void;})=>{
ev.preventDefault();
setProcessing (true);
// I added an exclamation point saying that if strip is null, I would do nothing.
const payload = wait strip !.confirmCardPayment(clientSecret, {
payment_method: {
card: elements!.getElement(CardElement)!
}
});
最後のエラーで disabled
に Type 'string | boolean' is not assignable to type 'boolean | undefined'. Type 'string' is not assignable to type 'boolean | undefined'.ts(2322) index.d.ts(2048, 9): The expected type comes from property 'disabled' which is declared here on type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>' (JSX attribute) React.ButtonHTMLAttributes<HTMLButtonElement>.disabled?:boolean | undefined
error.
<form id="payment-form" onSubmit={handleSubmit}>
{/* HandleChange Runs When CardElement Changes*/}
<CardElement id="card-element" options={cardStyle}onChange={handleChange}/>
<button
type = "submit"
// There is an error here.
disabled = { processing | | disabled | | succeeded }
id="submit"
>
https://stripe.com/docs/payments/integration-builder
It says to import CardElementComponent, but it doesn't say how to use it after that.
https://stackoverflow.com/questions/62680716/what-type-to-use-for-the-cardelement-in-typescript-for-stripe-react-stripe-j
Card Element Documentation https://stripe.com/docs/js/element/events/on_change?type=cardElement
typescript
The event
type is StripeCardElementChangeEvent
.
import {StripeCardElementChangeEvent} from "@stripe/stripe-js";
On VSCode, hover your mouse over onChange
.
Or try to implement it directly without using variables.
<CardElement
id="card-element"
options={cardStyle}
onChange={(event)=>{}}
/>
Then hover your mouse over the event
to see the same description.
Additional examples are available in the reference.
if(!stripe||!elements){
// Stripe.js has not loaded yet.Make sure to disable
// form submission until Stripe.js has loaded.
return;
}
If either is null
, implement it so that it cannot be submitted.
For postscript 2, as indicated by the error message,
Type 'string | boolean' is not assigned to type 'boolean | undefined'.
This is because you are trying to substitute a value of type string|boolean
for type disabled
.
(The information of the type can be found in the VSCode hover display as described above.)
const [processing, setProcessing] = useState<boolean>(false);
© 2024 OneMinuteCode. All rights reserved.