Square CreditCard payment in Reactjs - reactjs

Question

I am trying to integrate react-square-web-payments-sdk , Need to add creditcard holder name field in the paymentform and how can i mention the amount to be deducted from card to do that please check the below code and let me know still i need to add anything more.
I have installed react-square-web-payments-sdk and added creditCard in paymentform and getting the fields like cardnumber, mm/yy, cvv. and zipcode, But i need Cardholder name and no need of zip code, How can i do that and from my below code how can i show how much money to be deducted. Below is my component.
const Payment = () => {
const [errorMessage, setErrorMessage] = useState(null);
const onNonceGenerated = async (error, nonce) => {
if (error) {
setErrorMessage(error.message);
return;
}
// Your code to process the payment
try {
// Call your server to process the payment
const response = await fetch("/process-payment", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ nonce }),
});
console.log(response, "resp");
if (!response.ok) {
throw new Error("Failed to process payment");
}
// Payment was successful
alert("Payment successful!");
} catch (error) {
setErrorMessage(error.message);
}
};
return (
<div className="container">
{errorMessage && <p>{errorMessage}</p>}
<PaymentForm
applicationId="sandbox-Id"
locationId="locationId"
cardTokenizeResponseReceived={async (token, verifiedBuyer) => {
console.log(token,"token");
console.log(verifiedBuyer,"verifiedBuyer");
const response = await fetch("/api/pay", {
method: "POST",
headers: {
"Content-type": "application/json",
},
body: JSON.stringify({
sourceId: token.token,
}),
});
console.log(await response.json());
}}
>
<CreditCard
buttonProps={{
css: {
backgroundColor: "#E56B6F",
fontSize: "14px",
color: "#fff",
"&:hover": {
backgroundColor: "#E56B6F",
},
},
}}
/>
</PaymentForm>
</div>
);
};