#joseamica
sharp mauveBOT
Hello! We'll be with you shortly. Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- jose-cardelement-react, 1 hour ago, 41 messages
- joseamica, 5 hours ago, 25 messages
river abyss
Is this with Elements?
empty condor
<PaymentElement />
river abyss
I think there is an event for that, checking in to it
empty condor
Let me explain what I want to accomplish
Here, when the form is correct, then a modal will appear, and you can select what % of tip you want to leave to the waiter. Then on that modal, when I get the final total, then will submit. Thats why I need to get if its good and if it is, then deploy modal
river abyss
Is the modal your own modal?
empty condor
yes, its mine
river abyss
This event is how to check if the payment element is complete https://stripe.com/docs/js/element/events/on_change?type=paymentElement
So you can use that plus your own variables for your modal to check if both are complete
empty condor
Im using React
how do i use paymentElemenet.on() on react/
<form onSubmit={handleSubmit}>
<PaymentElement />
<Modal
isOpen={success}
closeModal={() => setSuccess(false)}
footer={
<div className="text-center">
<Flex space="xs" justify="center" align="center">
<H3 as="span">Estas Pagando:</H3>
<H3 as="span" variant="secondary">
{Currency(amounts.total + amounts.total * tip)}
</H3>
</Flex>
</div>
}
>
<div className="leading-8 text-center pb">
<JumboTitle>
<span>Da las gracias</span> <br /> <span>con una propina</span>
</JumboTitle>
<H3 variant="secondary">Todas las propinas van directo a los meseros</H3>
</div>
<Button text="10%" type="button" onClick={() => setTip(0.1)} />
<Button text="15%" type="button" onClick={() => setTip(0.15)} />
<Button text="20%" type="button" onClick={() => setTip(0.2)} />
</Modal>
<button className="p-4 rounded-full bg-violet-600" type="submit" disabled={!stripe || loading}>
Submit Payment
</button>
{errorMessage && <div>{errorMessage}</div>}
</form>
hey, apologies for forgetting to follow up on this. Server has been very busy. I am consulting colleagues on how to do this and will get back to you
sharp mauveBOT