#benjamiiin-react-apple-pay
waxen lodge
I have it working fine, by issue is that if a customer tries to place an order at 13:02 when our event ended at 13:00 they see the following
our modal sits behind saying that the event has finished, but the google pay modal still sits on top
twin gyro
Sounds like you're not notifying the browser to close the UI
Specifically in the confirmCardPayment promise chain:
paymentRequest.on('paymentmethod', async (ev) => {
// Confirm the PaymentIntent without handling potential next actions (yet).
const {paymentIntent, error: confirmError} = await stripe.confirmCardPayment(
clientSecret,
{payment_method: ev.paymentMethod.id},
{handleActions: false}
);
if (confirmError) {
// Report to the browser that the payment failed, prompting it to
// re-show the payment interface, or show an error message and close
// the payment interface.
ev.complete('fail');
} else {
// Report to the browser that the confirmation was successful, prompting
// it to close the browser payment method collection interface.
ev.complete('success');
// Check if the PaymentIntent requires any actions and if so let Stripe.js
// handle the flow. If using an API version older than "2019-02-11"
// instead check for: `paymentIntent.status === "requires_source_action"`.
if (paymentIntent.status === "requires_action") {
// Let Stripe.js handle the rest of the payment flow.
const {error} = await stripe.confirmCardPayment(clientSecret);
if (error) {
// The payment failed -- ask your customer for a new payment method.
} else {
// The payment has succeeded.
}
} else {
// The payment has succeeded.
}
}
});
The ev.complete() method is what closes that Google Pay interface
waxen lodge
is there any way to do this before creating a payment intent? as in if I click that button and our platform says this event is over it would just not launch the google browser modal?
modest atlas
Hi there 👋 can you tell us a bit more about your flow? Are you using the PaymentRequestButtonElement, or another one of the elements available within our react library?
waxen lodge
hey yeah I am using the PaymentRequestButtonElement
which is all working fine, I just have a check that if a customer tries to place an order after the event has finished our platform shows a little modal informing that the event has finished, (works fine with card payment). If you try use apple/google pay our modal shows (as you can see in the screenshot above) but the browser modal for requesting payment sits on top
modest atlas
Hm, I was think you might be able to unmount the element when your event ends, but it sounds like the check for that is a poll so that may not work.
waxen lodge
basically I want to lick the google pay button and if out check that the event is over is true, do not display the browser modal with the option to pay
paymentRequest.on('paymentmethod', (ev) => { if (checkTodaysEventFinsihed() === true) { paymentRequest.complete('fail'); } else { paymentRequest.on('cancel', () => { paymentRequest.off('paymentmethod'); }); } });
tried something like that
doesnt work
modest atlas
Hm, I'm not terribly familiar with this function but my understanding is it allows you to suppress the default actions for an event, and I'm wondering if it could be useful here:
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
waxen lodge
yeah I have tried preventing default on the click
modest atlas
I'm poking around one of my test flows to see if I can intercept/block the event flow that's triggered from clicking on the payment request button.
waxen lodge
ok thanks
modest atlas
Thank you for your patience. I've spoken with my colleagues and confirmed that the events we fire for the PaymentRequestButtonElement all trigger after the customer completes the payment flow in their browser, so it'll be very difficult to prevent that modal from appearing. However, after the customer provides their payment info, the Payment Intent still needs to be confirmed so you can perform your check then and avoid confirming if your event has ended.
I tried adding event listeners on the button, but ran into problems doing so since it's rendered inside of iframe, so I wasn't able to override/block the default behavior of the button.