#juls1083
finite rapids
Hi there 👋 onChange events is also the approach that comes to mind for handling this, but maybe I'm not grasping what validation you're trying to do and what hurdles you're running into?
hexed zodiac
The validation that exist on the stripe examples on the links above
Just clicking the button without adding anything to the inputs trigger a validation with an error message below the inputs
Looking at github, no extra code is added for this purpuse https://github.com/stripe/elements-examples/tree/master/js
finite rapids
None of the examples in there seem to be Payment Element examples as shown in the site you referenced. They look like Card Element and Payment Request Button examples.
hexed zodiac
This example is a payment element in react https://stripe.com/docs/payments/quickstart
finite rapids
Okay, that's yet another different page, sorry but I'm getting really confused. Can we take a step back? What is the problem that you're running into with your code that is blocking you?
hexed zodiac
I need to archieve this type of validation, with the error message below the inputs. According to this example, it is possible. https://stripe.com/docs/payments/quickstart
finite rapids
Is the sample code provided in that guide not working as expected for you?
hexed zodiac
There's nothing in the sample code that triggers this input validation. I assumed this happened as default behavior, but apparently not
finite rapids
There is logic in the checkout.js file in that guide that triggers the surfacing of errors.
It's after the payment confirmation request
hexed zodiac
I think you are talking about the message that shows below the button
latent wingBOT
hexed zodiac
There's no logic for the messages below each input
After hours investigating, I've come to the conclusion that's not possible.... But i needed to ask.. Because in this example, the messages show up
finite rapids
I'm talking about the error handling inside of the handleSubmit function from the sample code (but I'm also looking at the Node sample specifically and am not yet sure what language you're working in)
e.preventDefault();
setLoading(true);
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: "http://localhost:4242/checkout.html",
receipt_email: emailAddress,
},
});
// 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") {
showMessage(error.message);
} else {
showMessage("An unexpected error occurred.");
}
setLoading(false);
}```
Which relies on the `showMessage` helper function provided further down in the `checkout.js` fileThere is no showMessage function, you mean setMessage?
wide aspen
👋 adding on top of what toby said above
here's what the showMessage function looks like in the quick start
we're likely looking at different language examples
hexed zodiac
Which example you are looking into?
hexed zodiac
You mean that I must add/remove CSS classes to display the error message?
wide aspen
No, javascript is hiding and unhiding div with #payment-message and is setting textContent when there's an error
hexed zodiac
No built-in UI validation in the React component?
By the way, you were just talking about this example, right? https://github.com/stripe/elements-examples/blob/master/js/index.js
I cannot find the showMessage function from before
wide aspen
I'm talking about examples from this page
https://stripe.com/docs/payments/quickstart?lang=node
You seem to be jumping between multiple docs, I'd recommend not doing that and follow the link I shared above
hexed zodiac
ok, I think I understand now.
Sorry for insisting, but is it possible that the React example is wrong then?
I was being shown an example with vanilla JS
wide aspen
React example seems fine too as when there's a message it uses setMessage hook to set state with the error message
setting the state causes a re-render and react checks message variable to see if it is null or not, if not, it renders <div id="payment-message">{message}</div>
hexed zodiac
It seems to me that the setMessage renders this message below the button, like in the screenshot, not the errors on each input
wide aspen
It doesnt' error on each input since setMessage is wrapped inside confirmPayment which gets called on button click handleSubmit
hexed zodiac
My question was about the errors on each input
How to implement them, because they doesn't happen by default, and I've found no API that would trigger this
wide aspen
I'm sorry, I don't exactly grasp what you mean?
The example in the quick start clearly throws/shows the relevant error on form submission when there's an incomplete field
i.e.
hexed zodiac
I implemented Payment Details in my custom form, just like in the example, with no extra code, and no input messages were appearing. The question is about that
wide aspen
But the example in the quickstart guide uses extra code for that error message under the pay now button
https://stripe.com/docs/payments/quickstart?lang=node
You haven't shared any code for your "custom form"
You seem to be referencing multiple examples/docs so it it unclear what example doc are you referring to exactly
hexed zodiac
I'm refering to this one https://stripe.com/docs/payments/quickstart?lang=node
wide aspen
that guide uses custom code as I shared in the screenshots above
hexed zodiac
I'll post an isolated version of my custom form here in a while 🙏 🙇
But my question is about me not getting the messages below the inputs
wide aspen
Do you mean the text in red or text in grey?