#Chhay Toch-customisation
astral hare
signal thistle
Can you share your code?
signal thistle
Where is your confirmPayment function invoked?
astral hare
but I need to customize the CardNumber, and seperate Expiry by Month, and Year
astral hare
Where is your `confirmPayment` function invoked?
onSubmit
signal thistle
Can you share that please
Think the issue is confirmPayment requires use of Payment Element. What you want is confirmCardPayment: https://stripe.com/docs/js/payment_intents/confirm_card_payment
astral hare
const PaymentForm = () => {
const theme = useTheme();
const stripe = useStripe();
const elements = useElements();
const [message, setMessage] = useState('');
const [isLoading, setIsLoading] = useState(false);
const handleSubmit = async e => {
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 }: any = 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 onSubmit={handleSubmit}>
<CardNumberElement id="cardNumber" />
<CardExpiryElement id="expiry" />
<CardCvcElement id="cvc" />
<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>);
}
Yep, shared your issue just before you sent that 👆
astral hare
Could I know what is diff between confirmPayment & confirmCardPayment?
signal thistle
confirmPayment is for usage with the Payment Element, which supports multiple payment methods (not just cards): https://stripe.com/docs/payments/payment-element
If you're explicitly using the cardNumber Element, then you can't use that and need to use confirmCardPayment. The APIs are slightly different, but are fundamentally the same
astral hare
Can we separate the input of the Expiry by Month, Year?
signal thistle
You can't
astral hare
Does the Stripe come with Paypal ?
signal thistle
We don't support PayPal right now, no
astral hare
Thank you boss
signal thistle
Np!