#mkoenke
brittle plover
unkempt thicket
Hello 👋
Not sure, let me check..
fallen torrent
thanks so much!
unkempt thicket
I'm not seeing the same behavior when I test with google pay on PaymentElement.
When I click on Google Pay > Submit > Modal shows up > I dismiss the modal > click on submit again > the modal shows up
fallen torrent
interesting... it may be because we have a deferred payment intent flow... so we call elements.submit to make the modal appear, and then if the charge is approved, we create a payment method on the frontend, and then on the backend create the payment intent and actually charge at the same time...
unkempt thicket
Ah hmm, not sure with deferred intent.
Gonna need some time to reproduce
fallen torrent
I think theres something we need to be doing to 'reset' the payment element after calling elements.submit and the modal is dismissed so we get an error in the response
sure, no problem, thanks for your help!
unkempt thicket
Can you share the code you're using for this?
Like how are you invoking elements.submit()?
fallen torrent
sure hold on
basically we have this listening for changes in the payment element:
const { elements } = this.props;
const { paymentElementStatus } = this.state;
if (elements && prevProps.elements !== elements) {
const paymentElement = elements.getElement('payment');
const cardElement = elements.getElement('card');
if (cardElement) {
this.setState({ cardElement });
}
if (paymentElement) {
this.setState({ paymentElement });
paymentElement.on('change', (event) => {
this.setState({ paymentElementStatus: event });
});
}
}
const shouldSubmitPaymentElement =
paymentElementStatus?.complete &&
prevState.paymentElementStatus !== paymentElementStatus;
submitPaymentElement(
shouldSubmitPaymentElement,
elements?.submit,
this.handleError,
this._createPaymentMethod,
);
}and this is submitPaymentElement:
here:
shouldSubmitPaymentElement,
submit,
handleError,
createPaymentMethod,
) => {
if (shouldSubmitPaymentElement) {
const { error } = await submit();
if (error) {
handleError({ message: error.message });
} else {
await createPaymentMethod();
}
}
};
agile beacon
So yeah that is why you aren't seeing anything happen when you click on Google Pay again
fallen torrent
correct
agile beacon
Because nothing changed
However
Actually no.
So the only way would be to actually re-render Payment Element here
Based on the elements.submit() error
But I assume you don't want to do that
fallen torrent
would that mean we need a new elements instance too?
i think we would prefer not to do that
agile beacon
Yeah I mean the design here is to use a click handler to submit... this isn't really what the change event is designed for.
Thinking, but not really coming up with a good workaround here.
fallen torrent
hmmmmm
agile beacon
Ah
The focus event should work
That will fire when Google Pay is clicked on again
fallen torrent
ahhhh nice, then we can submit again
agile beacon
So basically what you will want to do is set some state that Google Pay was the last clicked payment method type
Ah wait
The focus Event doesn't contain the payment method type....
Oh
But if the change event doesn't fire
Then you know
That the payment method type stayed the same
Ugh this is pretty hacky
agile beacon
Not coming up with anything better though...
Yeah not sure of a different way to handle this other than showing an error message that indicates the behavior
fallen torrent
or we should use an onClick handler to submit the payment element
agile beacon
Oh well yeah
Or that
I suppose what you could also do is just show a click handler for Google Pay and not the other payment method types
If you wanted to do some sort of "in-between"
fallen torrent
how?