#yingzhu_
fickle umbra
cloud timber
Hello! What's up?
gloomy schooner
Oops you beat me, one sec
I am migrating our checkout page from card elements to payment elements following the Stripe documentation guide (https://stripe.com/docs/payments/payment-element/migration?integration-path=future and https://stripe.com/docs/payments/accept-a-payment-deferred?platform=web&type=setup). Additionally, I want to add more payment methods like Apple Pay and Google Pay.
The problem we encountered is that when we were testing Google Pay, we got a console error "Uncaught DOMException: Failed to execute 'postMessage' on 'Window': Delegation is not allowed without transient user activation" from stripe.js. We followed the guide(https://stripe.com/docs/payments/payment-element/migration?integration-path=future) provided and rendered Element/PaymentElement to collect payment details before creating the Intent(https://stripe.com/docs/payments/accept-a-payment-deferred?platform=web&type=setup). After the payer selects Google Pay as their payment method and clicks on the payment button, we call element.submit() to validate paymentElement, create the intent, and then use stripe.confirmSetup to confirm the intent. The error occurred on confirmSetup, and we never receive confirmed intent on stripe dashboard
We also got "invalid_request_error" with general error msg "Something went wrong. Unable to show Google Pay. Please choose a different payment method and try again."
cloud timber
The issue is that you're doing too much stuff between when you call elements.submit() and when you actually confirm. The Apple Pay and Google Pay payment sheets need to be invoked directly by user activation, meaning a click or similar needs to activate the sheet. If you take too much time between the user activation and the actual display of the sheet it's no longer considered a user activation and you get the error above.
If you're curious about the specifics, there's a lot of detail in this WebKit blog post: https://webkit.org/blog/13862/the-user-activation-api/
Chrome has a ~similar system.
Or it could be that you're doing too much before you call elements.submit().
gloomy schooner
Yeah, unfortunately out current implementation does not support create intent before user click. Do you know any work around or anything we can do to mitigate this issue?
cloud timber
What happens between when the button is clicked and when you call elements.submit()?
gloomy schooner
Nothing honestly, but we do call my BE to generate the intent before I call confirmSetup
cloud timber
Can you share the code in question?
gloomy schooner
Which part?
cloud timber
All of the code involved in the button click that eventually leads to stripe.confirmSetup().
The client-side code.
gloomy schooner
Sure, here is a slightly more readable version
const onClick = () => {
elements.submit() and error handling
FormValidation(other part of form)
setLoading(true);
Call BE to create subscription and pending_setup_intent
stripe.confirmSetup()
}
I can see some delays may happen during form validation and create intent, do you know the time allowed with in the user activation?
cloud timber
It varies. Can you give me the actual code instead of the cleaned up version?
gloomy schooner
It's a bunch of huge blocks and involved a lot of unrelated things, do you have any other way to connect? It may be too much for discord lol
cloud timber
That tells me you're doing too much.